@openmrs/esm-dispensing-app 1.0.1-pre.99 → 1.1.0

package/src/forms/medication-dispense-review.component.test.tsx

@@ -0,0 +1,142 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { MedicationDispense, MedicationDispenseStatus } from "../types";
+import MedicationDispenseReview from "./medication-dispense-review.component";
+
+jest.mock("@openmrs/esm-framework", () => {
+  const originalModule = jest.requireActual("@openmrs/esm-framework");
+  return {
+    __esModule: true,
+    ...originalModule,
+    useConfig: jest.fn(() => ({
+      dispenseBehavior: {
+        allowModifyingPrescription: false,
+        restrictTotalQuantityDispensed: false,
+      },
+      valueSets: {
+        substitutionType: { uuid: "123" },
+        substitutionReason: { uuid: "abc" },
+      },
+    })),
+  };
+});
+
+describe("Medication Dispense Review Component tests", () => {
+  test("component should render medication dispense review", () => {
+    const medicationDispense: MedicationDispense = {
+      resourceType: "MedicationDispense",
+      id: "ff2fa24c-b0d4-457c-bbdf-7d6512b8b746",
+      type: {
+        coding: [
+          {
+            code: "123",
+          },
+        ],
+      },
+      meta: {
+        lastUpdated: "2023-01-10T10:52:36.000-05:00",
+      },
+      status: MedicationDispenseStatus.completed,
+      medicationReference: {
+        reference: "Medication/78f96684-dfbe-11e9-8a34-2a2ae2dbcce4",
+        type: "Medication",
+        display: "Lamivudine (3TC), Oral solution, 10mg/mL, 240mL bottle",
+      },
+      subject: {
+        reference: "Patient/b36dbb26-8309-4d51-80ed-07bbb63ab928",
+        type: "Patient",
+        display: "Test, Fiona (ZL EMR ID: Y480K4)",
+      },
+      performer: [
+        {
+          actor: {
+            reference: "Practitioner/6558dfef-bfe1-488e-b048-ed286aded924",
+            type: "Practitioner",
+            identifier: {
+              value: "LADAL",
+            },
+            display: "Dylan, Bob (Identifier: LADAL)",
+          },
+        },
+      ],
+      location: {
+        reference: "Location/47521fa1-ac7f-4fdb-b167-a86fe223a3d9",
+        type: "Location",
+        display: "Klinik MNT",
+      },
+      authorizingPrescription: [
+        {
+          reference: "MedicationRequest/9e416e5f-a435-433c-99d3-8b2fd1e8a421",
+          type: "MedicationRequest",
+        },
+      ],
+      quantity: {
+        value: 30.0,
+        unit: "Tablet",
+        system: "http://snomed.info/sct",
+        code: "385055001",
+      },
+      whenPrepared: "2023-01-10T10:52:22-05:00",
+      whenHandedOver: "2023-01-10T10:52:22-05:00",
+      dosageInstruction: [
+        {
+          timing: {
+            code: {
+              coding: [
+                {
+                  code: "023bee9c-2dbb-483c-8401-46f0ccf6b333",
+                  display: "ON (night)",
+                },
+              ],
+              text: "ON (night)",
+            },
+          },
+          asNeededBoolean: false,
+          route: {
+            coding: [
+              {
+                code: "46aaaca8-1f21-410a-aac9-67bfcc1fd577",
+                display: "Oral",
+              },
+              {
+                system: "https://openconceptlab.org/orgs/CIEL/sources/CIEL",
+                code: "160240",
+                display: "Oral",
+              },
+              {
+                system: "http://snomed.info/sct",
+                code: "26643006",
+                display: "Oral",
+              },
+            ],
+            text: "Oral",
+          },
+          doseAndRate: [
+            {
+              doseQuantity: {
+                value: 1.0,
+                unit: "Tablet",
+                system: "http://snomed.info/sct",
+                code: "385055001",
+              },
+            },
+          ],
+        },
+      ],
+      substitution: {
+        wasSubstituted: false,
+      },
+    };
+
+    const mockUpdate: Function = jest.fn();
+    const { getByText, container } = render(
+      <MedicationDispenseReview
+        medicationDispense={medicationDispense}
+        updateMedicationDispense={mockUpdate}
+        quantityRemaining={30}
+      />
+    );
+
+    // TODO test expected views and various interactions
+  });
+});

package/src/forms/medication-dispense-review.component.tsx

@@ -0,0 +1,562 @@
+import React, { useEffect, useState } from "react";
+import { Medication, MedicationDispense } from "../types";
+import MedicationCard from "../components/medication-card.component";
+import { TextArea, ComboBox, Dropdown, NumberInput } from "@carbon/react";
+import {
+  useLayoutType,
+  useConfig,
+  useSession,
+  userHasAccess,
+} from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import {
+  getConceptCodingUuid,
+  getMedicationReferenceOrCodeableConcept,
+  getOpenMRSMedicineDrugName,
+} from "../utils";
+import styles from "../components/medication-dispense-review.scss";
+import {
+  useMedicationCodeableConcept,
+  useMedicationFormulations,
+} from "../medication/medication.resource";
+import { useMedicationRequest } from "../medication-request/medication-request.resource";
+import { PharmacyConfig } from "../config-schema";
+import {
+  useOrderConfig,
+  useSubstitutionReasonValueSet,
+  useSubstitutionTypeValueSet,
+} from "../medication-dispense/medication-dispense.resource";
+import { PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS } from "../constants";
+
+interface MedicationDispenseReviewProps {
+  medicationDispense: MedicationDispense;
+  updateMedicationDispense: Function;
+  quantityRemaining: number;
+}
+
+const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
+  medicationDispense,
+  updateMedicationDispense,
+  quantityRemaining,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig() as PharmacyConfig;
+  const session = useSession();
+  const [isEditingFormulation, setIsEditingFormulation] = useState(false);
+  const [isSubstitution, setIsSubstitution] = useState(false);
+  // Dosing Unit eg Tablets
+  const [drugDosingUnits, setDrugDosingUnits] = useState([]);
+  // Dispensing Unit eg Tablets
+  const [drugDispensingUnits, setDrugDispensingUnits] = useState([]);
+  // Route eg Oral
+  const [drugRoutes, setDrugRoutes] = useState([]);
+  // Frequency eg Twice daily
+  const [orderFrequencies, setOrderFrequencies] = useState([]);
+  // type of substitution question
+  const [substitutionTypes, setSubstitutionTypes] = useState([]);
+  // reason for substitution question
+  const [substitutionReasons, setSubstitutionReasons] = useState([]);
+  const [userCanModify, setUserCanModify] = useState(false);
+
+  const isTablet = useLayoutType() === "tablet";
+
+  const { orderConfigObject } = useOrderConfig();
+  const { substitutionTypeValueSet } = useSubstitutionTypeValueSet(
+    config.valueSets.substitutionType.uuid
+  );
+  const { substitutionReasonValueSet } = useSubstitutionReasonValueSet(
+    config.valueSets.substitutionReason.uuid
+  );
+
+  const allowEditing = config.dispenseBehavior.allowModifyingPrescription;
+
+  useEffect(() => {
+    if (orderConfigObject) {
+      // sync drug route options order config
+      const availableRoutes = drugRoutes.map((x) => x.id);
+      const otherRouteOptions = [];
+      orderConfigObject.drugRoutes.forEach(
+        (x) =>
+          availableRoutes.includes(x.uuid) ||
+          otherRouteOptions.push({ id: x.uuid, text: x.display })
+      );
+      setDrugRoutes([...drugRoutes, ...otherRouteOptions]);
+
+      // sync dosage.unit options with what's defined in the order config
+      const availableDosingUnits = drugDosingUnits.map((x) => x.id);
+      const otherDosingUnits = [];
+      orderConfigObject.drugDosingUnits.forEach(
+        (x) =>
+          availableDosingUnits.includes(x.uuid) ||
+          otherDosingUnits.push({ id: x.uuid, text: x.display })
+      );
+      setDrugDosingUnits([...drugDosingUnits, ...otherDosingUnits]);
+
+      // sync dispensing unit options with what's defined in the order config
+      const availableDispensingUnits = drugDispensingUnits.map((x) => x.id);
+      const otherDispensingUnits = [];
+      orderConfigObject.drugDispensingUnits.forEach(
+        (x) =>
+          availableDispensingUnits.includes(x.uuid) ||
+          otherDispensingUnits.push({ id: x.uuid, text: x.display })
+      );
+      setDrugDispensingUnits([...drugDispensingUnits, ...otherDispensingUnits]);
+
+      // sync order frequency options with order config
+      const availableFrequencies = orderFrequencies.map((x) => x.id);
+      const otherFrequencyOptions = [];
+      orderConfigObject.orderFrequencies.forEach(
+        (x) =>
+          availableFrequencies.includes(x.uuid) ||
+          otherFrequencyOptions.push({ id: x.uuid, text: x.display })
+      );
+      setOrderFrequencies([...orderFrequencies, ...otherFrequencyOptions]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orderConfigObject]);
+
+  useEffect(() => {
+    const substitutionTypeOptions = [];
+
+    if (substitutionTypeValueSet?.compose?.include) {
+      const uuidValueSet = substitutionTypeValueSet.compose.include.find(
+        (include) => !include.system
+      );
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          substitutionTypeOptions.push({
+            id: concept.code,
+            text: concept.display,
+          })
+        );
+      }
+      substitutionTypeOptions.sort((a, b) => a.text.localeCompare(b.text));
+    }
+    setSubstitutionTypes(substitutionTypeOptions);
+  }, [substitutionTypeValueSet]);
+
+  useEffect(() => {
+    const substitutionReasonOptions = [];
+
+    if (substitutionReasonValueSet?.compose?.include) {
+      const uuidValueSet = substitutionReasonValueSet.compose.include.find(
+        (include) => !include.system
+      );
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          substitutionReasonOptions.push({
+            id: concept.code,
+            text: concept.display,
+          })
+        );
+      }
+      substitutionReasonOptions.sort((a, b) => a.text.localeCompare(b.text));
+    }
+    setSubstitutionReasons(substitutionReasonOptions);
+  }, [substitutionReasonValueSet]);
+
+  // if this an order for a drug by concept, but not a particular formulation, we already have access to concept uuid
+  const existingMedicationCodeableConceptUuid = getConceptCodingUuid(
+    getMedicationReferenceOrCodeableConcept(medicationDispense)
+      ?.medicationCodeableConcept?.coding
+  );
+  // otherwise we need to fetch the medication details to get the codeable concept
+  // (note that React Hooks should not be called conditionally, so we *always* call this hook, but it will return null if existingMedicationCodeableConcept is defined
+  const { medicationCodeableConceptUuid } = useMedicationCodeableConcept(
+    existingMedicationCodeableConceptUuid,
+    getMedicationReferenceOrCodeableConcept(medicationDispense)
+      .medicationReference?.reference
+  );
+  // get the formulations
+  const { medicationFormulations } = useMedicationFormulations(
+    existingMedicationCodeableConceptUuid
+      ? existingMedicationCodeableConceptUuid
+      : medicationCodeableConceptUuid
+      ? medicationCodeableConceptUuid
+      : null
+  );
+
+  // get the medication request associated with this dispense event
+  // (we fetch this so that we can use it below to determine if the formulation dispensed varies from what was
+  // ordered; it's slightly inefficient/awkward to fetch it from the server here because we *have* fetched it earlier,
+  // it just seems cleaner to fetch it here rather than to make sure we pass it down through various components; with
+  // SWR handling caching, we may want to consider pulling more down into this)
+  const { medicationRequest } = useMedicationRequest(
+    medicationDispense.authorizingPrescription
+      ? medicationDispense.authorizingPrescription[0].reference
+      : null,
+    config.refreshInterval
+  );
+
+  // check to see if the current dispense would be a substitution, and update accordingly
+  useEffect(() => {
+    if (
+      medicationRequest?.medicationReference?.reference &&
+      medicationDispense?.medicationReference?.reference &&
+      medicationRequest.medicationReference.reference !=
+        medicationDispense.medicationReference.reference
+    ) {
+      setIsSubstitution(true);
+      updateMedicationDispense({
+        ...medicationDispense,
+        substitution: {
+          ...medicationDispense.substitution,
+          wasSubstituted: true,
+        },
+      });
+    } else {
+      setIsSubstitution(false);
+      updateMedicationDispense({
+        ...medicationDispense,
+        substitution: {
+          wasSubstituted: false,
+          reason: [
+            {
+              coding: [{ code: null }],
+            },
+          ],
+          type: { coding: [{ code: null }] },
+        },
+      });
+    }
+  }, [
+    medicationDispense.medicationReference,
+    medicationRequest?.medicationReference,
+  ]);
+
+  useEffect(() => {
+    setUserCanModify(
+      session?.user &&
+        userHasAccess(PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS, session.user)
+    );
+  }, [session]);
+
+  return (
+    <div className={styles.medicationDispenseReviewContainer}>
+      {!isEditingFormulation ? (
+        <MedicationCard
+          medication={getMedicationReferenceOrCodeableConcept(
+            medicationDispense
+          )}
+          editAction={
+            userCanModify && allowEditing
+              ? () => setIsEditingFormulation(true)
+              : null
+          }
+        />
+      ) : (
+        <Dropdown
+          id="medicationFormulation"
+          light={isTablet}
+          items={medicationFormulations}
+          itemToString={(item: Medication) => getOpenMRSMedicineDrugName(item)}
+          initialSelectedItem={{
+            ...medicationFormulations?.find(
+              (formulation) =>
+                formulation.id ===
+                medicationDispense.medicationReference?.reference.split("/")[1]
+            ),
+          }}
+          onChange={({ selectedItem }) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              medicationCodeableConcept: undefined,
+              medicationReference: {
+                reference: "Medication/" + selectedItem?.id,
+                display: getOpenMRSMedicineDrugName(selectedItem),
+              },
+            });
+            setIsEditingFormulation(false);
+          }}
+          required
+        />
+      )}
+
+      {isSubstitution && (
+        <div className={styles.dispenseDetailsContainer}>
+          <ComboBox
+            className={styles.substitutionType}
+            id="substitutionType"
+            light={isTablet}
+            items={substitutionTypes}
+            titleText={t("substitutionType", "Type of substitution")}
+            itemToString={(item) => item?.text}
+            initialSelectedItem={{
+              id: medicationDispense.substitution.type?.coding[0]?.code,
+              text: medicationDispense.substitution.type?.text,
+            }}
+            onChange={({ selectedItem }) => {
+              updateMedicationDispense({
+                ...medicationDispense,
+                substitution: {
+                  ...medicationDispense.substitution,
+                  type: {
+                    coding: [
+                      {
+                        code: selectedItem?.id,
+                      },
+                    ],
+                  },
+                },
+              });
+            }}
+          />
+        </div>
+      )}
+
+      {isSubstitution && (
+        <div className={styles.dispenseDetailsContainer}>
+          <ComboBox
+            className={styles.substitutionReason}
+            id="substitutionReason"
+            light={isTablet}
+            items={substitutionReasons}
+            titleText={t("substitutionReason", "Reason for substitution")}
+            itemToString={(item) => item?.text}
+            initialSelectedItem={{
+              id: medicationDispense.substitution.reason[0]?.coding[0]?.code,
+              text: medicationDispense.substitution.reason[0]?.text,
+            }}
+            onChange={({ selectedItem }) => {
+              updateMedicationDispense({
+                ...medicationDispense,
+                substitution: {
+                  ...medicationDispense.substitution,
+                  reason: [
+                    {
+                      coding: [
+                        {
+                          code: selectedItem?.id,
+                        },
+                      ],
+                    },
+                  ],
+                },
+              });
+            }}
+          />
+        </div>
+      )}
+
+      <div className={styles.dispenseDetailsContainer}>
+        <NumberInput
+          allowEmpty={false}
+          disabled={!userCanModify}
+          hideSteppers={true}
+          id="quantity"
+          invalidText={t("numberIsNotValid", "Number is not valid")}
+          label={
+            t("quantity", "Quantity") +
+            (config.dispenseBehavior.restrictTotalQuantityDispensed
+              ? " (" +
+                t("maxQuantityRemaining", "Maximum quantity remaining:") +
+                " " +
+                quantityRemaining +
+                ")"
+              : "")
+          }
+          min={0}
+          max={
+            config.dispenseBehavior.restrictTotalQuantityDispensed
+              ? quantityRemaining
+              : undefined
+          }
+          value={medicationDispense.quantity.value}
+          onChange={(e) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              quantity: {
+                ...medicationDispense.quantity,
+                value: e.target?.value ? parseFloat(e.target.value) : "",
+              },
+            });
+          }}
+        />
+
+        <ComboBox
+          id="quantityUnits"
+          disabled={!userCanModify || !allowEditing}
+          light={isTablet}
+          items={drugDispensingUnits}
+          titleText={t("drugDispensingUnit", "Dispensing unit")}
+          itemToString={(item) => item?.text}
+          initialSelectedItem={{
+            id: medicationDispense.quantity.code,
+            text: medicationDispense.quantity.unit,
+          }}
+          onChange={({ selectedItem }) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+              quantity: {
+                value: medicationDispense.quantity.value,
+                code: selectedItem?.id,
+              },
+            });
+          }}
+          required
+        />
+      </div>
+
+      <div className={styles.dispenseDetailsContainer}>
+        <NumberInput
+          allowEmpty={false}
+          disabled={!userCanModify || !allowEditing}
+          hideSteppers={true}
+          id="dosingQuanity"
+          invalidText={t("numberIsNotValid", "Number is not valid")}
+          min={0}
+          label={t("dose", "Dose")}
+          value={
+            medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity
+              .value
+          }
+          onChange={(e) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              dosageInstruction: [
+                {
+                  ...medicationDispense.dosageInstruction[0],
+                  doseAndRate: [
+                    {
+                      ...medicationDispense.dosageInstruction[0].doseAndRate[0],
+                      doseQuantity: {
+                        ...medicationDispense.dosageInstruction[0]
+                          .doseAndRate[0].doseQuantity,
+                        value: e.target?.value
+                          ? parseFloat(e.target.value)
+                          : "",
+                      },
+                    },
+                  ],
+                },
+              ],
+            });
+          }}
+        />
+
+        <ComboBox
+          id="dosingUnits"
+          disabled={!userCanModify || !allowEditing}
+          light={isTablet}
+          items={drugDosingUnits}
+          titleText={t("doseUnit", "Dose unit")}
+          itemToString={(item) => item?.text}
+          initialSelectedItem={{
+            id: medicationDispense.dosageInstruction[0].doseAndRate[0]
+              .doseQuantity?.code,
+            text: medicationDispense.dosageInstruction[0].doseAndRate[0]
+              .doseQuantity?.unit,
+          }}
+          onChange={({ selectedItem }) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              dosageInstruction: [
+                {
+                  ...medicationDispense.dosageInstruction[0],
+                  doseAndRate: [
+                    {
+                      doseQuantity: {
+                        // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+                        value:
+                          medicationDispense.dosageInstruction[0].doseAndRate[0]
+                            .doseQuantity?.value,
+                        code: selectedItem?.id,
+                      },
+                    },
+                  ],
+                },
+              ],
+            });
+          }}
+          required
+        />
+
+        <ComboBox
+          id="editRoute"
+          disabled={!userCanModify || !allowEditing}
+          light={isTablet}
+          items={drugRoutes}
+          initialSelectedItem={{
+            id: medicationDispense.dosageInstruction[0].route?.coding[0]?.code,
+            text: medicationDispense.dosageInstruction[0].route?.text,
+          }}
+          titleText={t("route", "Route")}
+          itemToString={(item) => item?.text}
+          onChange={({ selectedItem }) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              dosageInstruction: [
+                {
+                  ...medicationDispense.dosageInstruction[0],
+                  route: {
+                    coding: [
+                      {
+                        code: selectedItem?.id,
+                      },
+                    ],
+                  },
+                },
+              ],
+            });
+          }}
+          required
+        />
+      </div>
+
+      <ComboBox
+        id="frequency"
+        disabled={!userCanModify || !allowEditing}
+        light={isTablet}
+        items={orderFrequencies}
+        initialSelectedItem={{
+          id: medicationDispense.dosageInstruction[0].timing?.code?.coding[0]
+            ?.code,
+          text: medicationDispense.dosageInstruction[0].timing?.code?.text,
+        }}
+        titleText={t("frequency", "Frequency")}
+        itemToString={(item) => item?.text}
+        onChange={({ selectedItem }) => {
+          updateMedicationDispense({
+            ...medicationDispense,
+            dosageInstruction: [
+              {
+                ...medicationDispense.dosageInstruction[0],
+                timing: {
+                  ...medicationDispense.dosageInstruction[0].timing,
+                  code: {
+                    coding: [
+                      {
+                        code: selectedItem?.id,
+                      },
+                    ],
+                  },
+                },
+              },
+            ],
+          });
+        }}
+        required
+      />
+
+      <TextArea
+        labelText={t("patientInstructions", "Patient instructions")}
+        value={medicationDispense.dosageInstruction[0].text}
+        maxLength={65535}
+        onChange={(e) => {
+          updateMedicationDispense({
+            ...medicationDispense,
+            dosageInstruction: [
+              {
+                ...medicationDispense.dosageInstruction[0],
+                text: e.target.value,
+              },
+            ],
+          });
+        }}
+      />
+    </div>
+  );
+};
+
+export default MedicationDispenseReview;