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

package/src/ward-workspace/patient-transfer-bed-swap/patient-admit-or-transfer-request-form.component.tsx

@@ -11,19 +11,32 @@ import {
   TextArea,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ResponsiveWrapper, showSnackbar, useAppContext } from '@openmrs/esm-framework';
+import { ResponsiveWrapper, showSnackbar, useAppContext, Workspace2 } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 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 LocationSelector from '../../location-selector/location-selector.component';
-import type { ObsPayload, WardPatientWorkspaceProps, WardViewContext } from '../../types';
+import type { ObsPayload, WardPatient, WardPatientWorkspaceProps, WardViewContext } from '../../types';
 import { useCreateEncounter } from '../../ward.resource';
 import styles from './patient-transfer-swap.scss';
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name.component';
 import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier.component';
 
+export interface PatientAdmitOrTransferFormProps {
+  wardPatient: WardPatient;
+
+  /**
+   * Related patients that are in the same bed as wardPatient. On transfer or bed swap
+   * these related patients have the option to be transferred / swapped together
+   */
+  relatedTransferPatients?: WardPatient[];
+
+  onSuccess(): void;
+  onCancel(): void;
+}
+
 /**
  * Form to fill out for:
  * - an admitted patient without pending transfer request, to initiate a transfer request for a patient
@@ -31,11 +44,11 @@ import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-pat
  * - an un-admitted patient, to create a request to admit
  */
 export default function PatientAdmitOrTransferForm({
-  closeWorkspaceWithSavedChanges,
   wardPatient,
-  promptBeforeClosing,
   relatedTransferPatients = [],
-}: WardPatientWorkspaceProps) {
+  onSuccess,
+  onCancel,
+}: PatientAdmitOrTransferFormProps) {
   const { t } = useTranslation();
   const { patient, inpatientRequest, visit } = wardPatient ?? {};
   const [showErrorNotifications, setShowErrorNotifications] = useState(false);
@@ -90,11 +103,6 @@ export default function PatientAdmitOrTransferForm({
     }
   }, [dispositionsWithTypeTransfer, setValue]);
 
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-    return () => promptBeforeClosing(null);
-  }, [isDirty, promptBeforeClosing]);
-
   const onSubmit = useCallback(
     (values: FormValues) => {
       setIsSubmitting(true);
@@ -144,6 +152,7 @@ export default function PatientAdmitOrTransferForm({
             title: t('patientTransferRequestCreated', 'Patient transfer request created'),
             kind: 'success',
           });
+          onSuccess();
         })
         .catch((err: Error) => {
           showSnackbar({
@@ -154,12 +163,11 @@ export default function PatientAdmitOrTransferForm({
         })
         .finally(() => {
           setIsSubmitting(false);
-          closeWorkspaceWithSavedChanges();
           wardPatientGroupDetails.mutate();
         });
     },
     [
-      closeWorkspaceWithSavedChanges,
+      onSuccess,
       createEncounter,
       dispositionsWithTypeTransfer,
       emrConfiguration,
@@ -303,7 +311,7 @@ export default function PatientAdmitOrTransferForm({
         )}
       </Stack>
       <ButtonSet className={styles.buttonSet}>
-        <Button size="xl" kind="secondary" onClick={closeWorkspaceWithSavedChanges}>
+        <Button size="xl" kind="secondary" onClick={onCancel}>
           {t('cancel', 'Cancel')}
         </Button>
         <Button

package/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { Button, ButtonSet, Form, InlineNotification, CheckboxGroup, Checkbox, Stack } from '@carbon/react';
 import { Controller, useForm } from 'react-hook-form';
@@ -7,19 +7,20 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { showSnackbar, useAppContext } from '@openmrs/esm-framework';
 import { assignPatientToBed, removePatientFromBed, useCreateEncounter } from '../../ward.resource';
-import type { WardPatientWorkspaceProps, WardViewContext } from '../../types';
+import type { WardViewContext } from '../../types';
 import BedSelector from '../bed-selector.component';
 import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier.component';
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name.component';
 import styles from './patient-transfer-swap.scss';
+import { type PatientAdmitOrTransferFormProps } from './patient-admit-or-transfer-request-form.component';
 
 export default function PatientBedSwapForm({
-  promptBeforeClosing,
-  closeWorkspaceWithSavedChanges,
   wardPatient,
   relatedTransferPatients = [],
-}: WardPatientWorkspaceProps) {
-  const { patient, visit } = wardPatient;
+  onCancel,
+  onSuccess
+}: PatientAdmitOrTransferFormProps) {
+  const { patient } = wardPatient;
   const { t } = useTranslation();
   const [showErrorNotifications, setShowErrorNotifications] = useState(false);
   const { createEncounter, emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } =
@@ -47,11 +48,6 @@ export default function PatientBedSwapForm({
     handleSubmit,
   } = useForm<FormValues>({ resolver: zodResolver(zodSchema) });
 
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-    return () => promptBeforeClosing(null);
-  }, [isDirty, promptBeforeClosing]);
-
   const beds = useMemo(() => wardPatientGroupDetails?.bedLayouts ?? [], [wardPatientGroupDetails]);
 
   const onSubmit = useCallback(
@@ -112,6 +108,7 @@ export default function PatientBedSwapForm({
                 }),
               });
             }
+            onSuccess();
           }
         })
         .catch((error: Error) => {
@@ -124,7 +121,6 @@ export default function PatientBedSwapForm({
         .finally(() => {
           setIsSubmitting(false);
           wardPatientGroupDetails.mutate();
-          closeWorkspaceWithSavedChanges();
         });
     },
     [
@@ -134,7 +130,7 @@ export default function PatientBedSwapForm({
       emrConfiguration,
       t,
       wardPatientGroupDetails,
-      closeWorkspaceWithSavedChanges,
+      onSuccess,
       selectedRelatedPatient,
       relatedTransferPatients,
       wardPatient,
@@ -222,7 +218,7 @@ export default function PatientBedSwapForm({
         )}
       </Stack>
       <ButtonSet className={styles.buttonSet}>
-        <Button size="xl" kind="secondary" onClick={closeWorkspaceWithSavedChanges}>
+        <Button size="xl" kind="secondary" onClick={onCancel}>
           {t('cancel', 'Cancel')}
         </Button>
         <Button

package/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx

@@ -1,10 +1,12 @@
 import { ContentSwitcher, Switch } from '@carbon/react';
-import { useFeatureFlag } from '@openmrs/esm-framework';
+import { closeWorkspaceGroup2, useFeatureFlag, Workspace2, Workspace2DefinitionProps } from '@openmrs/esm-framework';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { WardPatientWorkspaceProps } from '../../types';
+import type { WardPatientWorkspaceDefinition, WardPatientWorkspaceProps } from '../../types';
 import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
-import PatientAdmitOrTransferForm from './patient-admit-or-transfer-request-form.component';
+import PatientAdmitOrTransferForm, {
+  type PatientAdmitOrTransferFormProps,
+} from './patient-admit-or-transfer-request-form.component';
 import PatientBedSwapForm from './patient-bed-swap-form.component';
 import styles from './patient-transfer-swap.scss';
 
@@ -19,34 +21,50 @@ type TransferSectionValues = (typeof TransferSection)[keyof typeof TransferSecti
  * This workspace opens the form to either transfer a patient to a different ward location
  * or to change their currently assigned bed
  */
-export default function PatientTransferAndSwapWorkspace(props: WardPatientWorkspaceProps) {
+export default function PatientTransferAndSwapWorkspace({
+  groupProps: { wardPatient },
+  closeWorkspace,
+}: WardPatientWorkspaceDefinition) {
   const { t } = useTranslation();
   const [selectedSection, setSelectedSection] = useState<TransferSectionValues>(TransferSection.TRANSFER);
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
 
+  const props: PatientAdmitOrTransferFormProps = {
+    wardPatient,
+    onSuccess: async () => {
+      await closeWorkspace({ discardUnsavedChanges: true });
+      closeWorkspaceGroup2();
+    },
+    onCancel: () => {
+      closeWorkspace();
+    },
+  };
+
   return (
-    <div className={styles.flexWrapper}>
-      <div className={styles.patientWorkspaceBanner}>
-        <WardPatientWorkspaceBanner wardPatient={props?.wardPatient} />
-      </div>
-      {isBedManagementModuleInstalled && (
-        <div className={styles.contentSwitcherWrapper}>
-          <h2 className={styles.productiveHeading02}>{t('typeOfTransfer', 'Type of transfer')}</h2>
-          <div className={styles.contentSwitcher}>
-            <ContentSwitcher onChange={({ name }) => setSelectedSection(name)}>
-              <Switch name={TransferSection.TRANSFER} text={t('transfer', 'Transfer')} />
-              <Switch name={TransferSection.BED_SWAP} text={t('bedSwap', 'Bed swap')} />
-            </ContentSwitcher>
-          </div>
+    <Workspace2 title={t('transfers', 'Transfers')}>
+      <div className={styles.flexWrapper}>
+        <div className={styles.patientWorkspaceBanner}>
+          <WardPatientWorkspaceBanner wardPatient={wardPatient} />
         </div>
-      )}
-      <div className={styles.workspaceForm}>
-        {selectedSection === TransferSection.TRANSFER ? (
-          <PatientAdmitOrTransferForm {...props} />
-        ) : (
-          <PatientBedSwapForm {...props} />
+        {isBedManagementModuleInstalled && (
+          <div className={styles.contentSwitcherWrapper}>
+            <h2 className={styles.productiveHeading02}>{t('typeOfTransfer', 'Type of transfer')}</h2>
+            <div className={styles.contentSwitcher}>
+              <ContentSwitcher onChange={({ name }) => setSelectedSection(name)}>
+                <Switch name={TransferSection.TRANSFER} text={t('transfer', 'Transfer')} />
+                <Switch name={TransferSection.BED_SWAP} text={t('bedSwap', 'Bed swap')} />
+              </ContentSwitcher>
+            </div>
+          </div>
         )}
+        <div className={styles.workspaceForm}>
+          {selectedSection === TransferSection.TRANSFER ? (
+            <PatientAdmitOrTransferForm {...props} />
+          ) : (
+            <PatientBedSwapForm {...props} />
+          )}
+        </div>
       </div>
-    </div>
+    </Workspace2>
   );
 }

package/src/ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace.tsx

@@ -1,23 +1,37 @@
 import React from 'react';
+import { closeWorkspaceGroup2, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
 import { type WardPatientWorkspaceProps } from '../../types';
 import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 import PatientAdmitOrTransferForm from '../patient-transfer-bed-swap/patient-admit-or-transfer-request-form.component';
 import styles from './patient-transfer-request.scss';
-
-interface PatientTransferRequestWorkspaceProps extends WardPatientWorkspaceProps {}
+import { useTranslation } from 'react-i18next';
 
 /**
  * This workspace is launched when the "Transfer elsewhere" / "Admit elsewhere"
  * button on a pending request patient card is clicked on
  */
-const PatientTransferRequestWorkspace: React.FC<PatientTransferRequestWorkspaceProps> = (props) => {
-  const { wardPatient } = props;
+const PatientTransferRequestWorkspace: React.FC<Workspace2DefinitionProps<WardPatientWorkspaceProps>> = ({
+  workspaceProps: { wardPatient },
+  closeWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const isTransfer = wardPatient.inpatientRequest.dispositionType == 'TRANSFER';
 
   return (
-    <div className={styles.patientTransferRequestWorkspace}>
-      <WardPatientWorkspaceBanner {...{ wardPatient }} />
-      <PatientAdmitOrTransferForm {...props} />
-    </div>
+    <Workspace2
+      title={isTransfer ? t('transferElsewhere', 'Transfer elsewhere') : t('admitElsewhere', 'Admit elsewhere')}>
+      <div className={styles.patientTransferRequestWorkspace}>
+        <WardPatientWorkspaceBanner {...{ wardPatient }} />
+        <PatientAdmitOrTransferForm
+          wardPatient={wardPatient}
+          onSuccess={async () => {
+            await closeWorkspace({ discardUnsavedChanges: true });
+            closeWorkspaceGroup2();
+          }}
+          onCancel={() => closeWorkspace()}
+        />
+      </div>
+    </Workspace2>
   );
 };
 

package/src/ward-workspace/ward-patient-notes/notes-action-button.component.tsx

@@ -0,0 +1,17 @@
+import { ActionMenuButton2, StickyNoteAddIcon } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function WardPatientNotesActionButton() {
+  const { t } = useTranslation();
+
+  return (
+    <ActionMenuButton2
+      icon={(props) => <StickyNoteAddIcon {...props} size={16} />}
+      label={t('PatientNote', 'Patient Note')}
+      workspaceToLaunch={{
+        workspaceName: 'ward-patient-notes-workspace',
+      }}
+    />
+  );
+}

package/src/ward-workspace/ward-patient-notes/{form/notes-form.scss → notes.scss}

@@ -10,7 +10,6 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100%;
 }
 
 .row {

package/src/ward-workspace/ward-patient-notes/notes.test.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { createErrorHandler, ResponsiveWrapper, showSnackbar, translateFrom, useSession } from '@openmrs/esm-framework';
+import { savePatientNote, usePatientNotes } from './notes.resource';
+import WardPatientNotesWorkspace from './notes.workspace';
+import { emrConfigurationMock, mockInpatientRequestAlice, mockPatient, mockPatientAlice, mockSession } from '__mocks__';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import { type WardPatient, type WardPatientWorkspaceDefinition } from '../../types';
+
+const mockWardPatientAlice: WardPatient = {
+  visit: mockInpatientRequestAlice.visit,
+  patient: mockPatientAlice,
+  bed: null,
+  inpatientAdmission: null,
+  inpatientRequest: mockInpatientRequestAlice,
+};
+
+const testProps: WardPatientWorkspaceDefinition = {
+  groupProps: {
+    wardPatient: mockWardPatientAlice,
+  },
+  closeWorkspace: jest.fn(),
+  launchChildWorkspace: jest.fn(),
+  workspaceProps: undefined,
+  windowProps: undefined,
+  workspaceName: '',
+  windowName: '',
+  isRootWorkspace: false,
+};
+
+const mockSavePatientNote = savePatientNote as jest.Mock;
+const mockedShowSnackbar = jest.mocked(showSnackbar);
+
+jest.mock('./notes.resource', () => ({
+  savePatientNote: jest.fn(),
+  usePatientNotes: jest.fn(),
+}));
+
+jest.mock('../../hooks/useEmrConfiguration', () => jest.fn());
+
+const mockedUseEmrConfiguration = jest.mocked(useEmrConfiguration);
+const mockedUsePatientNotes = jest.mocked(usePatientNotes);
+
+mockedUseEmrConfiguration.mockReturnValue({
+  emrConfiguration: emrConfigurationMock,
+  mutateEmrConfiguration: jest.fn(),
+  isLoadingEmrConfiguration: false,
+  errorFetchingEmrConfiguration: null,
+});
+
+describe('<WardPatientNotesWorkspace>', () => {
+  mockedUsePatientNotes.mockReturnValue({
+    patientNotes: [],
+    errorFetchingPatientNotes: undefined,
+    isLoadingPatientNotes: false,
+    mutatePatientNotes: jest.fn(),
+  });
+
+  test('renders the visit notes form with all the relevant fields and values', () => {
+    renderWardPatientNotesForm();
+
+    expect(screen.getByRole('textbox', { name: /Write your notes/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Save/i })).toBeInTheDocument();
+  });
+
+  test('renders a success snackbar upon successfully recording a visit note', async () => {
+    const successPayload = {
+      encounterProviders: expect.arrayContaining([
+        {
+          encounterRole: emrConfigurationMock?.clinicianEncounterRole?.uuid,
+          provider: undefined,
+        },
+      ]),
+      encounterType: emrConfigurationMock?.inpatientNoteEncounterType?.uuid,
+      location: undefined,
+      obs: expect.arrayContaining([
+        {
+          concept: { display: '', uuid: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+          value: 'Sample clinical note',
+        },
+      ]),
+      patient: mockPatientAlice.uuid,
+    };
+
+    mockSavePatientNote.mockResolvedValue({ status: 201, body: 'Condition created' });
+
+    renderWardPatientNotesForm();
+
+    const note = screen.getByRole('textbox', { name: /Write your notes/i });
+    await userEvent.clear(note);
+    await userEvent.type(note, 'Sample clinical note');
+    expect(note).toHaveValue('Sample clinical note');
+
+    const submitButton = screen.getByRole('button', { name: /Save/i });
+    await userEvent.click(submitButton);
+
+    expect(mockSavePatientNote).toHaveBeenCalledTimes(1);
+    expect(mockSavePatientNote).toHaveBeenCalledWith(expect.objectContaining(successPayload), new AbortController());
+  });
+
+  test('renders an error snackbar if there was a problem recording a visit note', async () => {
+    const error = {
+      message: 'Internal Server Error',
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error',
+      },
+    };
+
+    mockSavePatientNote.mockRejectedValueOnce(error);
+    renderWardPatientNotesForm();
+
+    const note = screen.getByRole('textbox', { name: /Write your notes/i });
+    await userEvent.clear(note);
+    await userEvent.type(note, 'Sample clinical note');
+    expect(note).toHaveValue('Sample clinical note');
+
+    const submitButton = screen.getByRole('button', { name: /Save/i });
+
+    await userEvent.click(submitButton);
+
+    expect(mockedShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      subtitle: 'Internal Server Error',
+      title: 'Error saving patient note',
+    });
+  });
+});
+
+function renderWardPatientNotesForm() {
+  render(<WardPatientNotesWorkspace {...testProps} />);
+}

package/src/ward-workspace/ward-patient-notes/notes.workspace.tsx

@@ -1,24 +1,185 @@
-import React from 'react';
-import { type WardPatientWorkspaceProps } from '../../types';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { Button, Column, Form, InlineLoading, InlineNotification, Row, Stack, TextArea } from '@carbon/react';
+import {
+  closeWorkspaceGroup2,
+  ResponsiveWrapper,
+  showSnackbar,
+  translateFrom,
+  useSession,
+  Workspace2,
+} from '@openmrs/esm-framework';
+import { moduleName } from '../../constant';
+import { savePatientNote } from './notes.resource';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import styles from './notes.scss';
+import { type WardPatientWorkspaceDefinition, type EncounterPayload } from '../../types';
 import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
-import PatientNotesForm from './form/notes-form.component';
 import PatientNotesHistory from './history/notes-container.component';
 
-const WardPatientNotesWorkspace: React.FC<WardPatientWorkspaceProps> = (props) => {
-  const { wardPatient, ...restWorkspaceProps } = props;
-  const patientUuid = wardPatient?.patient?.uuid;
+type NotesFormData = z.infer<typeof noteFormSchema>;
 
-  const notesFormState = {
-    patientUuid,
-    ...restWorkspaceProps,
-  };
+const noteFormSchema = z.object({
+  wardClinicalNote: z.string().refine((val) => val.trim().length > 0, {
+    //t('clinicalNoteErrorMessage','Clinical note is required')
+    message: translateFrom(moduleName, 'clinicalNoteErrorMessage', 'Clinical note is required'),
+  }),
+});
+
+const WardPatientNotesWorkspace: React.FC<WardPatientWorkspaceDefinition> = ({
+  groupProps: { wardPatient },
+  closeWorkspace,
+}) => {
+  const patientUuid = wardPatient.patient.uuid;
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const { t } = useTranslation();
+  const session = useSession();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [rows, setRows] = useState(0);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isDirty },
+  } = useForm<NotesFormData>({
+    mode: 'onSubmit',
+    resolver: zodResolver(noteFormSchema),
+    defaultValues: {
+      wardClinicalNote: '',
+    },
+  });
+
+  const locationUuid = session?.sessionLocation?.uuid;
+  const providerUuid = session?.currentProvider?.uuid;
+
+  const onSubmit = useCallback(
+    (data: NotesFormData) => {
+      const { wardClinicalNote } = data;
+      setIsSubmitting(true);
+
+      const notePayload: EncounterPayload = {
+        patient: patientUuid,
+        location: locationUuid,
+        encounterType: emrConfiguration?.inpatientNoteEncounterType?.uuid,
+        encounterProviders: [
+          {
+            encounterRole: emrConfiguration?.clinicianEncounterRole?.uuid,
+            provider: providerUuid,
+          },
+        ],
+        obs: wardClinicalNote
+          ? [
+              {
+                concept: { uuid: emrConfiguration?.consultFreeTextCommentsConcept.uuid, display: '' },
+                value: wardClinicalNote,
+              },
+            ]
+          : [],
+      };
+
+      const abortController = new AbortController();
+
+      savePatientNote(notePayload, abortController)
+        .then(async () => {
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            subtitle: t('patientNoteNowVisible', 'It should be now visible in the notes history'),
+            title: t('visitNoteSaved', 'Patient note saved'),
+          });
+          await closeWorkspace({ discardUnsavedChanges: true });
+          closeWorkspaceGroup2();
+        })
+        .catch((err) => {
+          showSnackbar({
+            isLowContrast: false,
+            kind: 'error',
+            subtitle: err?.message,
+            title: t('patientNoteSaveError', 'Error saving patient note'),
+          });
+        })
+        .finally(() => setIsSubmitting(false));
+    },
+    [
+      emrConfiguration?.clinicianEncounterRole?.uuid,
+      emrConfiguration?.consultFreeTextCommentsConcept?.uuid,
+      emrConfiguration?.inpatientNoteEncounterType?.uuid,
+      locationUuid,
+      patientUuid,
+      providerUuid,
+      t,
+      closeWorkspace,
+    ],
+  );
+
+  const onError = (errors) => console.error(errors);
 
   return (
-    <div>
+    <Workspace2 hasUnsavedChanges={isDirty} title={t('inpatientNotesWorkspaceTitle', 'In-patient notes')}>
       <WardPatientWorkspaceBanner {...{ wardPatient }} />
-      <PatientNotesForm {...notesFormState} />
+      <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+        {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>
+        )}
+        <Stack className={styles.formContainer} gap={2}>
+          <Row className={styles.row}>
+            <Column sm={1}>
+              <span className={styles.columnLabel}>{t('note', 'Note')}</span>
+            </Column>
+            <Column sm={3}>
+              <Controller
+                name="wardClinicalNote"
+                control={control}
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <ResponsiveWrapper>
+                    <TextArea
+                      id="additionalNote"
+                      invalid={!!errors.wardClinicalNote}
+                      invalidText={errors.wardClinicalNote?.message}
+                      labelText={t('clinicalNoteLabel', 'Write your notes')}
+                      onBlur={onBlur}
+                      onChange={(event) => {
+                        onChange(event);
+                        const textAreaLineHeight = 24; // This is the default line height for Carbon's TextArea component
+                        const newRows = Math.ceil(event.target.scrollHeight / textAreaLineHeight);
+                        setRows(newRows);
+                      }}
+                      placeholder={t('wardClinicalNotePlaceholder', 'Write any notes here')}
+                      rows={rows}
+                      value={value}
+                    />
+                  </ResponsiveWrapper>
+                )}
+              />
+            </Column>
+          </Row>
+        </Stack>
+        <Button
+          className={styles.saveButton}
+          disabled={isSubmitting || isLoadingEmrConfiguration || errorFetchingEmrConfiguration}
+          kind="primary"
+          type="submit">
+          {isSubmitting ? <InlineLoading description={t('saving', 'Saving...')} /> : <span>{t('save', 'Save')}</span>}
+        </Button>
+      </Form>
+
       <PatientNotesHistory patientUuid={patientUuid} visitUuid={wardPatient?.visit?.uuid} />
-    </div>
+    </Workspace2>
   );
 };