@ampath/esm-dispensing-app 1.10.0-next.1

package/src/forms/close-dispense-form.workspace.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ComboBox, Form, InlineLoading } from '@carbon/react';
+import {
+  ExtensionSlot,
+  getCoreTranslation,
+  ResponsiveWrapper,
+  showSnackbar,
+  useConfig,
+  usePatient,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { saveMedicationDispense, useReasonForCloseValueSet } from '../medication-dispense/medication-dispense.resource';
+import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+import { getUuidFromReference, markEncounterAsStale, revalidate } from '../utils';
+import styles from './forms.scss';
+
+type CloseDispenseFormProps = {
+  medicationDispense: MedicationDispense;
+  mode: 'enter' | 'edit';
+  patientUuid?: string;
+  encounterUuid: string;
+  customWorkspaceTitle?: string;
+};
+
+const CloseDispenseForm: React.FC<Workspace2DefinitionProps<CloseDispenseFormProps, {}, {}>> = ({
+  workspaceProps: { medicationDispense, mode, patientUuid, encounterUuid, customWorkspaceTitle },
+  closeWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  // Keep track of medication dispense payload
+  const [medicationDispensePayload, setMedicationDispensePayload] = useState<MedicationDispense>();
+
+  // whether or not the form is valid and ready to submit
+  const [isValid, setIsValid] = useState(false);
+
+  // to prevent duplicate submits
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reasonsForClose, setReasonsForClose] = useState([]);
+  const { reasonForCloseValueSet } = useReasonForCloseValueSet(config.valueSets.reasonForClose.uuid);
+
+  useEffect(() => {
+    const reasonForCloseOptions = [];
+
+    if (reasonForCloseValueSet?.compose?.include) {
+      const uuidValueSet = reasonForCloseValueSet.compose.include.find((include) => !include.system);
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          reasonForCloseOptions.push({
+            id: concept.code,
+            text: concept.display,
+          }),
+        );
+        reasonForCloseOptions.sort((a, b) => a.text.localeCompare(b.text));
+      }
+    }
+    setReasonsForClose(reasonForCloseOptions);
+  }, [reasonForCloseValueSet]);
+
+  const handleSubmit = () => {
+    if (!isSubmitting) {
+      setIsSubmitting(true);
+      const abortController = new AbortController();
+      markEncounterAsStale(encounterUuid);
+      saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.declined, abortController)
+        .then((response) => {
+          // only update request status when added a new dispense event, not updating
+          if (response.ok && !medicationDispense.id) {
+            return updateMedicationRequestFulfillerStatus(
+              getUuidFromReference(
+                medicationDispensePayload.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+              ),
+              MedicationRequestFulfillerStatus.declined,
+            );
+          } else {
+            return response;
+          }
+        })
+        .then((response) => {
+          if (response.ok) {
+            revalidate(encounterUuid);
+            showSnackbar({
+              kind: 'success',
+              title: t(
+                mode === 'enter' ? 'medicationDispenseClosed' : 'medicationDispenseUpdated',
+                mode === 'enter' ? 'Medication dispense closed.' : 'Dispense record successfully updated.',
+              ),
+            });
+            closeWorkspace({ discardUnsavedChanges: true });
+          }
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t(
+              mode === 'enter' ? 'medicationDispenseCloseError' : 'medicationDispenseUpdatedError',
+              mode === 'enter' ? 'Error closing medication dispense.' : 'Error updating dispense record',
+            ),
+            kind: 'error',
+            subtitle: error?.message,
+          });
+          setIsSubmitting(false);
+        });
+    }
+  };
+
+  const checkIsValid = () => {
+    if (medicationDispensePayload && medicationDispensePayload.statusReasonCodeableConcept?.coding[0].code) {
+      setIsValid(true);
+    } else {
+      setIsValid(false);
+    }
+  };
+
+  // initialize the internal dispense payload with the dispenses passed in as props
+  useEffect(() => setMedicationDispensePayload(medicationDispense), [medicationDispense]);
+
+  // check is valid on any changes
+  useEffect(checkIsValid, [medicationDispensePayload]);
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  return (
+    <Workspace2 title={customWorkspaceTitle ?? t('closePrescription', 'Close prescription')}>
+      <Form className={styles.formWrapper}>
+        <div>
+          {isLoading && (
+            <InlineLoading
+              className={styles.bannerLoading}
+              iconDescription="Loading"
+              description="Loading banner"
+              status="active"
+            />
+          )}
+          {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
+          <section className={styles.formGroup}>
+            <ResponsiveWrapper>
+              <ComboBox
+                id="reasonForPause"
+                items={reasonsForClose}
+                titleText={t('reasonForClose', 'Reason for close')}
+                itemToString={(item) => item?.text}
+                initialSelectedItem={{
+                  id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
+                  text: medicationDispense.statusReasonCodeableConcept?.text,
+                }}
+                onChange={({ selectedItem }) => {
+                  setMedicationDispensePayload({
+                    ...medicationDispensePayload,
+                    statusReasonCodeableConcept: {
+                      coding: [
+                        {
+                          code: selectedItem?.id,
+                        },
+                      ],
+                    },
+                  });
+                }}
+              />
+            </ResponsiveWrapper>
+          </section>
+        </div>
+        <section className={styles.buttonGroup}>
+          <Button
+            disabled={isSubmitting}
+            onClick={() => {
+              closeWorkspace();
+            }}
+            kind="secondary">
+            {getCoreTranslation('cancel', 'Cancel')}
+          </Button>
+          <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
+            {t(mode === 'enter' ? 'close' : 'saveChanges', mode === 'enter' ? 'Close' : 'Save changes')}
+          </Button>
+        </section>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default CloseDispenseForm;

package/src/forms/dispense-form.workspace.test.tsx

@@ -0,0 +1,334 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useConfig, usePatient } from '@openmrs/esm-framework';
+import { type MedicationDispense, type MedicationRequestBundle, MedicationDispenseStatus } from '../types';
+import DispenseForm from './dispense-form.workspace';
+
+const mockUseConfig = jest.mocked(useConfig);
+const mockUsePatient = jest.mocked(usePatient);
+const mockCloseWorkspace = jest.fn();
+const mockLaunchChildWorkspace = jest.fn();
+
+// Mock workspace props required by Workspace2DefinitionProps
+const mockWorkspaceProps = {
+  launchChildWorkspace: mockLaunchChildWorkspace,
+  windowProps: {},
+  groupProps: {},
+  workspaceName: 'dispense-form',
+  windowName: 'dispense-form-window',
+  isRootWorkspace: true,
+  promptBeforeClosing: jest.fn(),
+  setTitle: jest.fn(),
+  showActionMenu: true,
+};
+
+// Mock the child components
+jest.mock('./medication-dispense-review.component', () => ({
+  __esModule: true,
+  default: () => <div>Medication Dispense Review</div>,
+}));
+
+jest.mock('./stock-dispense/stock-dispense.component', () => ({
+  __esModule: true,
+  default: () => <div>Stock Dispense</div>,
+}));
+
+const mockPatient = {
+  uuid: 'patient-uuid',
+  display: 'Test Patient',
+  identifiers: [],
+  person: {
+    age: 30,
+    attributes: [],
+    birthDate: '1990-01-01',
+    gender: 'M',
+    display: 'Test Patient',
+    preferredAddress: {},
+    uuid: 'patient-uuid',
+  },
+};
+
+const createMockMedicationDispense = (): MedicationDispense => ({
+  resourceType: 'MedicationDispense',
+  status: MedicationDispenseStatus.completed,
+  medicationReference: {
+    reference: 'Medication/med-uuid',
+    display: 'Test Medication',
+  },
+  subject: {
+    reference: 'Patient/patient-uuid',
+    display: 'Test Patient',
+  },
+  performer: [
+    {
+      actor: {
+        reference: 'Practitioner/prac-uuid',
+        display: 'Test Practitioner',
+      },
+    },
+  ],
+  location: {
+    reference: 'Location/loc-uuid',
+    display: 'Test Location',
+  },
+  quantity: {
+    value: 30,
+    code: '385055001',
+  },
+  dosageInstruction: [
+    {
+      timing: {
+        code: {
+          coding: [
+            {
+              code: 'timing-code',
+              display: 'Once daily',
+            },
+          ],
+        },
+      },
+      asNeededBoolean: false,
+      route: {
+        coding: [
+          {
+            code: 'route-code',
+            display: 'Oral',
+          },
+        ],
+      },
+      doseAndRate: [
+        {
+          doseQuantity: {
+            value: 1,
+            code: '385055001',
+          },
+        },
+      ],
+    },
+  ],
+  substitution: {
+    wasSubstituted: false,
+  },
+});
+
+const createMockMedicationRequestBundle = (numberOfRepeatsAllowed: number | null): MedicationRequestBundle => ({
+  request: {
+    resourceType: 'MedicationRequest',
+    id: 'request-uuid',
+    meta: {
+      lastUpdated: '2023-01-01T00:00:00.000Z',
+    },
+    status: 'active' as any,
+    intent: 'order',
+    priority: 'routine',
+    medicationReference: {
+      reference: 'Medication/med-uuid',
+      display: 'Test Medication',
+    },
+    subject: {
+      reference: 'Patient/patient-uuid',
+      display: 'Test Patient',
+    },
+    encounter: {
+      reference: 'Encounter/enc-uuid',
+      type: 'Encounter',
+    },
+    requester: {
+      reference: 'Practitioner/prac-uuid',
+      type: 'Practitioner',
+      identifier: {
+        value: 'PRAC123',
+      },
+      display: 'Test Practitioner',
+    },
+    dosageInstruction: [
+      {
+        timing: {
+          code: {
+            coding: [
+              {
+                code: 'timing-code',
+                display: 'Once daily',
+              },
+            ],
+          },
+        },
+        asNeededBoolean: false,
+        route: {
+          coding: [
+            {
+              code: 'route-code',
+              display: 'Oral',
+            },
+          ],
+        },
+        doseAndRate: [
+          {
+            doseQuantity: {
+              value: 1,
+              code: '385055001',
+            },
+          },
+        ],
+      },
+    ],
+    dispenseRequest: {
+      numberOfRepeatsAllowed: numberOfRepeatsAllowed,
+      quantity: {
+        value: 30,
+        code: '385055001',
+      },
+      validityPeriod: {
+        start: '2023-01-01',
+      },
+    },
+  },
+  dispenses: [],
+});
+
+beforeEach(() => {
+  mockUseConfig.mockReturnValue({
+    dispenseBehavior: {
+      allowModifyingPrescription: false,
+      restrictTotalQuantityDispensed: false,
+    },
+    completeOrderWithThisDispense: true,
+    enableStockDispense: false,
+  });
+  mockUsePatient.mockReturnValue({
+    patient: mockPatient,
+    isLoading: false,
+    error: null,
+    patientUuid: 'patient-uuid',
+  } as any);
+});
+
+describe('DispenseForm - Complete Order Checkbox Auto-Default', () => {
+  test('should default checkbox to true when numberOfRepeatsAllowed is 0', () => {
+    const medicationDispense = createMockMedicationDispense();
+    const medicationRequestBundle = createMockMedicationRequestBundle(0);
+
+    render(
+      <DispenseForm
+        {...mockWorkspaceProps}
+        workspaceProps={{
+          medicationDispense,
+          medicationRequestBundle,
+          mode: 'enter',
+          patientUuid: 'patient-uuid',
+          encounterUuid: 'encounter-uuid',
+          quantityRemaining: 30,
+          quantityDispensed: 0,
+        }}
+        closeWorkspace={mockCloseWorkspace}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: /complete order with this dispense/i });
+    expect(checkbox).toBeChecked();
+  });
+
+  test('should default checkbox to true when numberOfRepeatsAllowed is null', () => {
+    const medicationDispense = createMockMedicationDispense();
+    const medicationRequestBundle = createMockMedicationRequestBundle(null);
+
+    render(
+      <DispenseForm
+        {...mockWorkspaceProps}
+        workspaceProps={{
+          medicationDispense,
+          medicationRequestBundle,
+          mode: 'enter',
+          patientUuid: 'patient-uuid',
+          encounterUuid: 'encounter-uuid',
+          quantityRemaining: 30,
+          quantityDispensed: 0,
+        }}
+        closeWorkspace={mockCloseWorkspace}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: /complete order with this dispense/i });
+    expect(checkbox).toBeChecked();
+  });
+
+  test('should default checkbox to false when numberOfRepeatsAllowed is greater than 0', () => {
+    const medicationDispense = createMockMedicationDispense();
+    const medicationRequestBundle = createMockMedicationRequestBundle(2);
+
+    render(
+      <DispenseForm
+        {...mockWorkspaceProps}
+        workspaceProps={{
+          medicationDispense,
+          medicationRequestBundle,
+          mode: 'enter',
+          patientUuid: 'patient-uuid',
+          encounterUuid: 'encounter-uuid',
+          quantityRemaining: 30,
+          quantityDispensed: 0,
+        }}
+        closeWorkspace={mockCloseWorkspace}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: /complete order with this dispense/i });
+    expect(checkbox).not.toBeChecked();
+  });
+
+  test('should allow user to manually uncheck the checkbox even when auto-defaulted to true', async () => {
+    const user = userEvent.setup();
+    const medicationDispense = createMockMedicationDispense();
+    const medicationRequestBundle = createMockMedicationRequestBundle(0);
+
+    render(
+      <DispenseForm
+        {...mockWorkspaceProps}
+        workspaceProps={{
+          medicationDispense,
+          medicationRequestBundle,
+          mode: 'enter',
+          patientUuid: 'patient-uuid',
+          encounterUuid: 'encounter-uuid',
+          quantityRemaining: 30,
+          quantityDispensed: 0,
+        }}
+        closeWorkspace={mockCloseWorkspace}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: /complete order with this dispense/i });
+    expect(checkbox).toBeChecked();
+
+    // User manually unchecks the checkbox
+    await user.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  test('should not auto-default checkbox in edit mode', () => {
+    const medicationDispense = createMockMedicationDispense();
+    medicationDispense.id = 'existing-dispense-id'; // Existing dispense
+    const medicationRequestBundle = createMockMedicationRequestBundle(0);
+
+    render(
+      <DispenseForm
+        {...mockWorkspaceProps}
+        workspaceProps={{
+          medicationDispense,
+          medicationRequestBundle,
+          mode: 'edit',
+          patientUuid: 'patient-uuid',
+          encounterUuid: 'encounter-uuid',
+          quantityRemaining: 30,
+          quantityDispensed: 30,
+        }}
+        closeWorkspace={mockCloseWorkspace}
+      />,
+    );
+
+    // In edit mode, the checkbox should not be rendered at all
+    const checkbox = screen.queryByRole('checkbox', { name: /complete order with this dispense/i });
+    expect(checkbox).not.toBeInTheDocument();
+  });
+});