@kenyaemr/esm-ward-app 7.0.3-pre.88 → 7.0.3-pre.94

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

@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ResponsiveWrapper, showSnackbar, useSession } from '@openmrs/esm-framework';
+import styles from './patient-transfer-swap.scss';
+import { useTranslation } from 'react-i18next';
+import { useAdmissionLocation } from '../../hooks/useAdmissionLocation';
+import { z } from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import LocationSelector from '../../location-selector/location-selector.component';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import { createEncounter } from '../../ward.resource';
+import useWardLocation from '../../hooks/useWardLocation';
+import type { ObsPayload, WardPatientWorkspaceProps } from '../../types';
+import { useInpatientRequest } from '../../hooks/useInpatientRequest';
+import { Form, ButtonSet, Button, TextArea, InlineNotification, RadioButtonGroup, RadioButton } from '@carbon/react';
+
+export default function PatientTransferForm({
+  closeWorkspaceWithSavedChanges,
+  wardPatient,
+  promptBeforeClosing,
+}: WardPatientWorkspaceProps) {
+  const { patient } = wardPatient ?? {};
+  const { t } = useTranslation();
+  const [showErrorNotifications, setShowErrorNotifications] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const { currentProvider } = useSession();
+  const { location } = useWardLocation();
+  const dispositionsWithTypeTransfer = useMemo(
+    () => emrConfiguration?.dispositions.filter(({ type }) => type === 'TRANSFER'),
+    [emrConfiguration],
+  );
+  const { mutate: mutateAdmissionLocation } = useAdmissionLocation();
+  const { mutate: mutateInpatientRequest } = useInpatientRequest();
+
+  const zodSchema = useMemo(
+    () =>
+      z.object({
+        location: z.string({
+          required_error: t('pleaseSelectTransferLocation', 'Please select transfer location'),
+        }),
+        note: z.string().optional(),
+        transferType:
+          dispositionsWithTypeTransfer?.length > 1
+            ? z.string({
+                required_error: t('pleaseSelectTransferType', 'Please select transfer type'),
+              })
+            : z.string().optional(),
+      }),
+    [t, dispositionsWithTypeTransfer],
+  );
+
+  type FormValues = z.infer<typeof zodSchema>;
+
+  const formDefaultValues: Partial<FormValues> = useMemo(() => {
+    const defaultValues: FormValues = {};
+    if (dispositionsWithTypeTransfer?.length === 1) {
+      defaultValues.transferType = dispositionsWithTypeTransfer[0].uuid;
+    }
+    return defaultValues;
+  }, [dispositionsWithTypeTransfer]);
+
+  const {
+    formState: { errors, isDirty },
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+  } = useForm<FormValues>({ resolver: zodResolver(zodSchema), defaultValues: formDefaultValues });
+
+  useEffect(() => {
+    if (dispositionsWithTypeTransfer?.length === 1) {
+      setValue('transferType', dispositionsWithTypeTransfer[0].uuid);
+    }
+  }, [dispositionsWithTypeTransfer]);
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+    return () => promptBeforeClosing(null);
+  }, [isDirty]);
+
+  const onSubmit = useCallback(
+    (values: FormValues) => {
+      setIsSubmitting(true);
+      setShowErrorNotifications(false);
+      const obs: Array<ObsPayload> = [
+        {
+          concept: emrConfiguration.dispositionDescriptor.internalTransferLocationConcept.uuid,
+          value: values.location,
+        },
+        {
+          concept: emrConfiguration.dispositionDescriptor.dispositionConcept.uuid,
+          value: dispositionsWithTypeTransfer.find(({ uuid }) => uuid === values.transferType)?.conceptCode,
+        },
+      ];
+
+      if (values.note) {
+        obs.push({
+          concept: emrConfiguration.consultFreeTextCommentsConcept.uuid,
+          value: values.note,
+        });
+      }
+
+      createEncounter({
+        patient: patient.uuid,
+        encounterType: emrConfiguration.visitNoteEncounterType.uuid,
+        location: location.uuid,
+        encounterProviders: [
+          {
+            encounterRole: emrConfiguration.clinicianEncounterRole.uuid,
+            provider: currentProvider?.uuid,
+          },
+        ],
+        obs: [
+          {
+            concept: emrConfiguration.dispositionDescriptor.dispositionSetConcept.uuid,
+            groupMembers: obs,
+          },
+        ],
+      })
+        .then(() => {
+          showSnackbar({
+            title: t('patientTransferRequestCreated', 'Patient transfer request created'),
+            kind: 'success',
+          });
+          closeWorkspaceWithSavedChanges();
+          mutateAdmissionLocation();
+          mutateInpatientRequest();
+        })
+        .catch((err: Error) => {
+          showSnackbar({
+            title: t('errorCreatingTransferRequest', 'Error creating transfer request'),
+            subtitle: err.message,
+            kind: 'error',
+          });
+        })
+        .finally(() => setIsSubmitting(false));
+    },
+    [
+      setShowErrorNotifications,
+      currentProvider,
+      location,
+      emrConfiguration,
+      patient.uuid,
+      dispositionsWithTypeTransfer,
+      mutateAdmissionLocation,
+      mutateInpatientRequest,
+    ],
+  );
+
+  const onError = useCallback(() => {
+    setIsSubmitting(false);
+    setShowErrorNotifications(true);
+  }, []);
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit, onError)} className={styles.formContainer}>
+      <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('selectALocation', 'Select a location')}</h2>
+          <Controller
+            name="location"
+            control={control}
+            render={({ field, fieldState: { error } }) => (
+              <LocationSelector {...field} invalid={!!error?.message} invalidText={error?.message} />
+            )}
+          />
+        </div>
+        {dispositionsWithTypeTransfer?.length > 1 && (
+          <div className={styles.field}>
+            <h2 className={styles.productiveHeading02}>{t('transferType', 'Transfer type')}</h2>
+            <Controller
+              name="transferType"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <ResponsiveWrapper>
+                  <RadioButtonGroup
+                    orientation="vertical"
+                    {...field}
+                    invalid={!!error?.message}
+                    invalidText={error?.message}>
+                    {dispositionsWithTypeTransfer.map((disposition) => (
+                      <RadioButton id={disposition.uuid} labelText={disposition.name} value={disposition.uuid} />
+                    ))}
+                  </RadioButtonGroup>
+                </ResponsiveWrapper>
+              )}
+            />
+          </div>
+        )}
+        <div className={styles.field}>
+          <h2 className={styles.productiveHeading02}>{t('notes', 'Notes')}</h2>
+          <Controller
+            name="note"
+            control={control}
+            render={({ field, fieldState: { error } }) => (
+              <ResponsiveWrapper>
+                <TextArea {...field} invalid={!!error?.message} invalidText={error?.message} />
+              </ResponsiveWrapper>
+            )}
+          />
+        </div>
+        {showErrorNotifications && (
+          <div className={styles.notifications}>
+            {Object.values(errors).map((error) => (
+              <InlineNotification 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}>
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+}

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

@@ -0,0 +1,73 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.workspaceContent {
+  padding: layout.$spacing-05;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #393939;
+}
+
+.patientWorkspaceBanner {
+  margin: (-(layout.$spacing-05)) (-(layout.$spacing-05)) layout.$spacing-05 (-(layout.$spacing-05));
+}
+
+.field {
+  margin-bottom: layout.$spacing-05;
+  & > h2 {
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+.contentSwitcher {
+  margin-top: layout.$spacing-03;
+}
+
+.workspaceForm {
+  margin-top: layout.$spacing-05;
+  flex: 1;
+}
+
+.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;
+    }
+  }
+}
+
+.radioButtonGroup {
+  margin-top: layout.$spacing-03;
+  fieldset {
+    flex-direction: column;
+    align-items: flex-start;
+
+    :global(.cds--radio-button-wrapper) {
+      margin-bottom: layout.$spacing-04;
+    }
+  }
+}
+
+.notifications {
+  margin-top: layout.$spacing-05;
+}

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

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { useFeatureFlag } from '@openmrs/esm-framework';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import PatientTransferForm from './patient-transfer-request-form.component';
+import PatientBedSwapForm from './patient-bed-swap-form.component';
+import styles from './patient-transfer-swap.scss';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
+import type { WardPatientWorkspaceProps } from '../../types';
+
+const TransferSection = {
+  TRANSFER: 'transfer',
+  BED_SWAP: 'bed-swap',
+} as const;
+
+type TransferSectionValues = (typeof TransferSection)[keyof typeof TransferSection];
+
+export default function PatientTransferAndSwapWorkspace(props: WardPatientWorkspaceProps) {
+  const { t } = useTranslation();
+  const [selectedSection, setSelectedSection] = useState<TransferSectionValues>(TransferSection.TRANSFER);
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  return (
+    <div className={styles.workspaceContent}>
+      <div className={styles.patientWorkspaceBanner}>
+        <WardPatientWorkspaceBanner {...props?.wardPatient} />
+      </div>
+      {isBedManagementModuleInstalled && (
+        <div>
+          <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 === 'transfer' ? <PatientTransferForm {...props} /> : <PatientBedSwapForm {...props} />}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, 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 {
+  createErrorHandler,
+  type DefaultWorkspaceProps,
+  type PatientUuid,
+  ResponsiveWrapper,
+  showSnackbar,
+  translateFrom,
+  useSession,
+} from '@openmrs/esm-framework';
+import { savePatientNote } from '../notes.resource';
+import styles from './notes-form.scss';
+import { moduleName } from '../../../constant';
+import useEmrConfiguration from '../../../hooks/useEmrConfiguration';
+
+type NotesFormData = z.infer<typeof noteFormSchema>;
+
+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'),
+  }),
+});
+
+interface PatientNotesFormProps extends DefaultWorkspaceProps {
+  patientUuid: PatientUuid;
+}
+
+const PatientNotesForm: React.FC<PatientNotesFormProps> = ({
+  closeWorkspaceWithSavedChanges,
+  patientUuid,
+  promptBeforeClosing,
+}) => {
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const { t } = useTranslation();
+  const session = useSession();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [rows, setRows] = useState<number>();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isDirty },
+  } = useForm<NotesFormData>({
+    mode: 'onSubmit',
+    resolver: zodResolver(noteFormSchema),
+    defaultValues: {
+      wardClinicalNote: '',
+    },
+  });
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
+  const locationUuid = session?.sessionLocation?.uuid;
+  const providerUuid = session?.currentProvider?.uuid;
+
+  const onSubmit = useCallback(
+    (data: NotesFormData) => {
+      const { wardClinicalNote } = data;
+      setIsSubmitting(true);
+
+      const notePayload = {
+        patient: patientUuid,
+        location: locationUuid,
+        encounterType: emrConfiguration?.visitNoteEncounterType.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(() => {
+          closeWorkspaceWithSavedChanges();
+          showSnackbar({
+            isLowContrast: true,
+            subtitle: t('patientNoteNowVisible', 'It should be now visible in the notes history'),
+            kind: 'success',
+            title: t('visitNoteSaved', 'Patient note saved'),
+          });
+        })
+        .catch((err) => {
+          createErrorHandler();
+
+          showSnackbar({
+            title: t('patientNoteSaveError', 'Error saving patient note'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: err?.message,
+          });
+        })
+        .finally(() => {
+          setIsSubmitting(false);
+        });
+    },
+    [emrConfiguration, patientUuid, locationUuid, providerUuid],
+  );
+
+  const onError = (errors) => console.error(errors);
+
+  return (
+    <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"
+                    rows={rows}
+                    labelText={t('clinicalNoteLabel', 'Write your notes')}
+                    placeholder={t('wardClinicalNotePlaceholder', 'Write any notes here')}
+                    value={value}
+                    onBlur={onBlur}
+                    invalid={!!errors.wardClinicalNote}
+                    invalidText={errors.wardClinicalNote?.message}
+                    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);
+                    }}
+                  />
+                </ResponsiveWrapper>
+              )}
+            />
+          </Column>
+        </Row>
+      </Stack>
+      <Button
+        kind="primary"
+        className={styles.saveButton}
+        disabled={isSubmitting || isLoadingEmrConfiguration || errorFetchingEmrConfiguration}
+        type="submit">
+        {isSubmitting ? <InlineLoading description={t('saving', 'Saving...')} /> : <span>{t('save', 'Save')}</span>}
+      </Button>
+    </Form>
+  );
+};
+
+export default PatientNotesForm;

package/src/ward-workspace/ward-patient-notes/form/notes-form.scss

@@ -0,0 +1,30 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.formContainer {
+  margin: layout.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.row {
+  margin: layout.$spacing-05 0 0;
+}
+
+.columnLabel {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+}
+
+.saveButton {
+  margin-left: layout.$spacing-04;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+}

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

@@ -0,0 +1,116 @@
+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 } from '../notes.resource';
+import PatientNotesForm from './notes-form.component';
+import { emrConfigurationMock, mockPatient, mockSession } from '__mocks__';
+import useEmrConfiguration from '../../../hooks/useEmrConfiguration';
+
+const testProps = {
+  patientUuid: mockPatient.uuid,
+  closeWorkspace: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  setTitle: jest.fn(),
+  onWorkspaceClose: jest.fn(),
+  setOnCloseCallback: jest.fn(),
+};
+
+const mockSavePatientNote = savePatientNote as jest.Mock;
+const mockedShowSnackbar = jest.mocked(showSnackbar);
+const mockedCreateErrorHandler = jest.mocked(createErrorHandler);
+const mockedTranslateFrom = jest.mocked(translateFrom);
+const mockedResponsiveWrapper = jest.mocked(ResponsiveWrapper);
+const mockedUseSession = jest.mocked(useSession);
+
+jest.mock('../notes.resource', () => ({
+  savePatientNote: jest.fn(),
+}));
+
+jest.mock('../../../hooks/useEmrConfiguration', () => jest.fn());
+
+const mockedUseEmrConfiguration = jest.mocked(useEmrConfiguration);
+
+mockedUseEmrConfiguration.mockReturnValue({
+  emrConfiguration: emrConfigurationMock,
+  mutateEmrConfiguration: jest.fn(),
+  isLoadingEmrConfiguration: false,
+  errorFetchingEmrConfiguration: null,
+});
+
+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.visitNoteEncounterType.uuid,
+    location: undefined,
+    obs: expect.arrayContaining([
+      {
+        concept: { display: '', uuid: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+        value: 'Sample clinical note',
+      },
+    ]),
+    patient: mockPatient.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() {
+  mockedUseSession.mockReturnValue(mockSession);
+  render(<PatientNotesForm {...testProps} />);
+}