@openmrs/esm-patient-medications-app 11.3.1-patch.9064 → 11.3.1-patch.9310

package/src/add-drug-order/drug-search/order-basket-search-results.component.tsx

@@ -3,15 +3,15 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSkeleton, SkeletonText, Tile } from '@carbon/react';
 import { ShoppingCartArrowUp } from '@carbon/react/icons';
-import { useOrderBasket, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { type DrugOrderBasketItem, useOrderBasket } from '@openmrs/esm-patient-common-lib';
 import {
   ArrowRightIcon,
-  closeWorkspace,
   ShoppingCartArrowDownIcon,
   useConfig,
   useLayoutType,
   UserHasAccess,
-  launchWorkspace,
+  type Visit,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../config-schema';
 import { prepMedicationOrderPostData, useActivePatientOrders } from '../../api/api';
@@ -22,24 +22,32 @@ import {
   useDrugSearch,
   useDrugTemplate,
 } from './drug-search.resource';
-import type { DrugOrderBasketItem } from '../../types';
 import styles from './order-basket-search-results.scss';
 
 export interface OrderBasketSearchResultsProps {
+  patient: fhir.Patient;
   searchTerm: string;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
   focusAndClearSearchInput: () => void;
+  visit: Visit;
 }
 
 interface DrugSearchResultItemProps {
+  patient: fhir.Patient;
   drug: DrugSearchResult;
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
+  visit: Visit;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
 }
 
 export default function OrderBasketSearchResults({
   searchTerm,
   openOrderForm,
   focusAndClearSearchInput,
+  patient,
+  visit,
+  closeWorkspace,
 }: OrderBasketSearchResultsProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -105,24 +113,45 @@ export default function OrderBasketSearchResults({
         </Button>
       </div>
       <div className={styles.resultsContainer}>
-        {drugs?.map((drug) => <DrugSearchResultItem key={drug.uuid} drug={drug} openOrderForm={openOrderForm} />)}
+        {drugs?.map((drug) => (
+          <DrugSearchResultItem
+            key={drug.uuid}
+            patient={patient}
+            drug={drug}
+            openOrderForm={openOrderForm}
+            visit={visit}
+            closeWorkspace={closeWorkspace}
+          />
+        ))}
       </div>
     </div>
   );
 }
 
-const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ drug, openOrderForm }) => {
+const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({
+  patient,
+  drug,
+  openOrderForm,
+  visit,
+  closeWorkspace,
+}) => {
   const isTablet = useLayoutType() === 'tablet';
-  const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>('medications', prepMedicationOrderPostData);
-  const { patientUuid } = usePatientChartStore();
+  const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>(
+    patient,
+    'medications',
+    prepMedicationOrderPostData,
+  );
+  const patientUuid = patient.id;
   const { data: activeOrders, isLoading: isLoadingActiveOrders } = useActivePatientOrders(patientUuid);
   const drugAlreadyInBasket = useMemo(
-    () => orders?.some((order) => ordersEqual(order, getTemplateOrderBasketItem(drug))),
-    [orders, drug],
+    () => orders?.some((order) => ordersEqual(order, getTemplateOrderBasketItem(drug, visit))),
+    [orders, drug, visit],
   );
+  // TODO: use the backend instead of this to determine whether the drug formulation can be ordered
+  // See: https://openmrs.atlassian.net/browse/RESTWS-1003
   const drugAlreadyPrescribed = useMemo(
     () => activeOrders?.some((order) => order?.drug?.uuid === drug?.uuid),
-    [activeOrders, drug],
+    [activeOrders, drug?.uuid],
   );
 
   const { templates, error: fetchingDrugOrderTemplatesError } = useDrugTemplate(drug?.uuid);
@@ -131,9 +160,9 @@ const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ drug, openO
   const drugItemTemplateOptions: Array<DrugOrderBasketItem> = useMemo(
     () =>
       templates?.length
-        ? templates.map((template) => getTemplateOrderBasketItem(drug, config?.daysDurationUnit, template))
-        : [getTemplateOrderBasketItem(drug, config?.daysDurationUnit)],
-    [templates, drug, config?.daysDurationUnit],
+        ? templates.map((template) => getTemplateOrderBasketItem(drug, visit, config?.daysDurationUnit, template))
+        : [getTemplateOrderBasketItem(drug, visit, config?.daysDurationUnit)],
+    [templates, drug, config?.daysDurationUnit, visit],
   );
 
   const addToBasket = useCallback(
@@ -141,12 +170,9 @@ const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ drug, openO
       // Directly adding the order to basket should be marked as incomplete
       searchResult.isOrderIncomplete = true;
       setOrders([...orders, searchResult]);
-      closeWorkspace('add-drug-order', {
-        ignoreChanges: true,
-        onWorkspaceClose: () => launchWorkspace('order-basket'),
-      });
+      closeWorkspace();
     },
-    [orders, setOrders],
+    [orders, setOrders, closeWorkspace],
   );
 
   const removeFromBasket = useCallback(

package/src/add-drug-order/exported-add-drug-order.workspace.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { type ExportedOrderBasketWindowProps, type DrugOrderBasketItem } from '@openmrs/esm-patient-common-lib';
+import AddDrugOrder from './add-drug-order.component';
+
+export interface AddDrugOrderWorkspaceAdditionalProps {
+  order: DrugOrderBasketItem;
+}
+
+/**
+ * This workspace displays the drug order form for adding or editing a drug order.
+ * On form submission, it saves the drug order to the (frontend) order basket.
+ * For a form that submits the drug order directly on submit,
+ * see fill-prescription-form.workspace.tsx
+ */
+export default function ExportedAddDrugOrderWorkspace({
+  workspaceProps: { order: initialOrder },
+  windowProps: { patient, patientUuid, visitContext },
+  closeWorkspace,
+}: Workspace2DefinitionProps<AddDrugOrderWorkspaceAdditionalProps, ExportedOrderBasketWindowProps, {}>) {
+  return (
+    <AddDrugOrder
+      initialOrder={initialOrder}
+      patient={patient}
+      patientUuid={patientUuid}
+      visitContext={visitContext}
+      closeWorkspace={closeWorkspace}
+    />
+  );
+}

package/src/add-drug-order/fill-prescription-form.workspace.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback } from 'react';
+import {
+  type ConfigObject,
+  type DefaultWorkspaceProps,
+  showSnackbar,
+  useConfig,
+  useSession,
+  useVisit,
+} from '@openmrs/esm-framework';
+import { type DrugOrderBasketItem, type EncounterPost, postEncounter } from '@openmrs/esm-patient-common-lib';
+import { prepMedicationOrderPostData } from '../api';
+import DrugOrderForm from './drug-order-form.component';
+import { useTranslation } from 'react-i18next';
+
+export interface FillPrescriptionFormProps extends DefaultWorkspaceProps {
+  patient: fhir.Patient;
+  onAfterSave?(patient: fhir.Patient, encounterUuid: string);
+}
+
+/**
+ * This form is meant for backfilling prescriptions from paper forms, and is similar to the drug order form in the
+ * order basket, except:
+ * - it contains additional fields select the drug (inline), the prescribing clinician and the prescribing date.
+ * - when submitting the form, it directly submits the order instead of saving to the order basket
+ *
+ * This component is not used in the medications app itself, but is intended to be used in other apps
+ * (like dispensing).
+ */
+const FillPrescriptionForm: React.FC<FillPrescriptionFormProps> = ({
+  patient,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+  onAfterSave,
+}) => {
+  const { sessionLocation } = useSession();
+  const { t } = useTranslation();
+  const { drugOrderEncounterType } = useConfig<ConfigObject>();
+  const patientUuid = patient.id;
+  const { activeVisit, isLoading: isLoadingVisit } = useVisit(patientUuid);
+
+  const submitDrugOrder = useCallback(
+    async (finalizedOrder: DrugOrderBasketItem) => {
+      const drugOrderPost = prepMedicationOrderPostData(finalizedOrder, patientUuid, null);
+      const encounter: EncounterPost = {
+        patient: patientUuid,
+        location: sessionLocation.uuid,
+        encounterType: drugOrderEncounterType,
+        encounterDatetime: new Date(),
+        visit: null, // let the server's logic associate the encounter with a visit
+        obs: [],
+        orders: [drugOrderPost],
+      };
+      try {
+        const encounterUuid = await postEncounter(encounter);
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          title: t('orderCompleted', 'Placed orders'),
+          subtitle: t('ordered', 'Placed order for {{order}}', {
+            order: finalizedOrder.drug.display,
+          }),
+        });
+        closeWorkspaceWithSavedChanges();
+        onAfterSave?.(patient, encounterUuid);
+      } catch (e) {
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'error',
+          title: t('saveDrugOrderFailed', 'Error ordering {{orderName}}', {
+            orderName: finalizedOrder.drug.display,
+          }),
+          subtitle: e?.responseBody?.error?.translatedMessage ?? e?.responseBody?.error?.message,
+        });
+      }
+    },
+    [
+      patientUuid,
+      closeWorkspaceWithSavedChanges,
+      sessionLocation.uuid,
+      t,
+      drugOrderEncounterType,
+      onAfterSave,
+      patient,
+    ],
+  );
+
+  if (!isLoadingVisit && !activeVisit) {
+    return (
+      <div>
+        {t('visitRequiredForFillingPrescription', 'Patient is required to have an active visit to fill prescription')}
+      </div>
+    );
+  }
+  return (
+    <DrugOrderForm
+      initialOrderBasketItem={{ action: 'NEW' } as DrugOrderBasketItem}
+      patient={patient}
+      onSave={submitDrugOrder}
+      saveButtonText={t('fillPrescription', 'Fill prescription')}
+      onCancel={closeWorkspace}
+      allowSelectingPrescribingClinician={true}
+      visitContext={activeVisit}
+      allowSelectingDrug={true}
+      setHasUnsavedChanges={function (hasUnsavedChanges: boolean): void {
+        throw new Error('Function not implemented.');
+      }}
+    />
+  );
+};
+
+export default FillPrescriptionForm;

package/src/api/api.ts

@@ -1,17 +1,21 @@
 import { useCallback, useMemo } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import useSWRImmutable from 'swr/immutable';
-import { openmrsFetch, restBaseUrl, useConfig, type FetchResponse } from '@openmrs/esm-framework';
-import type { DrugOrderPost, PatientOrderFetchResponse, Order } from '@openmrs/esm-patient-common-lib';
+import { openmrsFetch, restBaseUrl, useConfig, useOpenmrsFetchAll, type FetchResponse } from '@openmrs/esm-framework';
+import type {
+  DrugOrderBasketItem,
+  DrugOrderPost,
+  PatientOrderFetchResponse,
+  Order,
+} from '@openmrs/esm-patient-common-lib';
 import { type ConfigObject } from '../config-schema';
-import { type DrugOrderBasketItem } from '../types';
 
 export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0';
 
 const customRepresentation =
   'custom:(uuid,dosingType,orderNumber,accessionNumber,' +
   'patient:ref,action,careSetting:ref,previousOrder:ref,dateActivated,scheduledDate,dateStopped,autoExpireDate,' +
-  'orderType:ref,encounter:ref,orderer:(uuid,display,person:(display)),orderReason,orderReasonNonCoded,orderType,urgency,instructions,' +
+  'orderType:ref,encounter:(uuid,display,visit),orderer:(uuid,display,person:(display)),orderReason,orderReasonNonCoded,orderType,urgency,instructions,' +
   'commentToFulfiller,fulfillerStatus,drug:(uuid,display,strength,dosageForm:(display,uuid),concept),dose,doseUnits:ref,' +
   'frequency:ref,asNeeded,asNeededCondition,quantity,quantityUnits:ref,numRefills,dosingInstructions,' +
   'duration,durationUnits:ref,route:ref,brandName,dispenseAsWritten)';
@@ -229,3 +233,20 @@ export function useRequireOutpatientQuantity(): {
 
   return results;
 }
+
+export interface Provider {
+  uuid: string;
+  person: {
+    display?: string;
+  };
+}
+
+export function useProviders(providerRoles: Array<string>) {
+  const rep = 'custom:(uuid,person:(display)';
+  const ret = useOpenmrsFetchAll<Provider>(
+    providerRoles != null ? `${restBaseUrl}/provider?providerRoles=${providerRoles.join(',')}&v=${rep})` : null,
+  );
+
+  ret.data?.sort((a, b) => (a.person?.display ?? '').localeCompare(b.person?.display ?? ''));
+  return ret;
+}

package/src/api/order-config.ts

@@ -1,13 +1,13 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { useMemo } from 'react';
-import useSWRImmutable from 'swr/immutable';
 import {
   type DosingUnit,
   type DurationUnit,
   type MedicationFrequency,
   type MedicationRoute,
   type QuantityUnit,
-} from '../types';
+} from '@openmrs/esm-patient-common-lib';
+import { useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
 
 export interface ConceptName {
   uuid: string;

package/src/components/medications-details-table.component.tsx

@@ -21,10 +21,15 @@ import {
 import {
   CardHeader,
   compare,
+  type DrugOrderBasketItem,
   PatientChartPagination,
   type Order,
   useLaunchWorkspaceRequiringVisit,
   useOrderBasket,
+  type PatientWorkspaceGroupProps,
+  invalidateVisitByUuid,
+  invalidateVisitAndEncounterData,
+  type OrderBasketWindowProps,
 } from '@openmrs/esm-patient-common-lib';
 import {
   AddIcon,
@@ -36,14 +41,16 @@ import {
   useLayoutType,
   usePagination,
   UserIcon,
+  launchWorkspace2,
+  type Encounter,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { useReactToPrint } from 'react-to-print';
-import { type AddDrugOrderWorkspaceAdditionalProps } from '../add-drug-order/add-drug-order.workspace';
-import { type DrugOrderBasketItem } from '../types';
 import { type ConfigObject } from '../config-schema';
 import PrintComponent from '../print/print.component';
 import styles from './medications-details-table.scss';
+import { useSWRConfig } from 'swr';
+import { type AddDrugOrderWorkspaceProps } from '../add-drug-order/add-drug-order.workspace';
 
 export interface MedicationsDetailsTableProps {
   isValidating?: boolean;
@@ -68,15 +75,14 @@ const MedicationsDetailsTable: React.FC<MedicationsDetailsTableProps> = ({
 }) => {
   const pageSize = 5;
   const { t } = useTranslation();
-  const launchOrderBasket = useLaunchWorkspaceRequiringVisit('order-basket');
-  const launchAddDrugOrder = useLaunchWorkspaceRequiringVisit('add-drug-order');
+  const launchOrderBasket = useLaunchWorkspaceRequiringVisit(patient.id, 'order-basket');
   const config = useConfig<ConfigObject>();
   const showPrintButton = config.showPrintButton;
   const contentToPrintRef = useRef(null);
   const { excludePatientIdentifierCodeTypes } = useConfig();
   const [isPrinting, setIsPrinting] = useState(false);
 
-  const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>('medications');
+  const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>(patient, 'medications');
   const { results, goTo, currentPage } = usePagination(medications, pageSize);
 
   const tableHeaders = [
@@ -251,7 +257,7 @@ const MedicationsDetailsTable: React.FC<MedicationsDetailsTableProps> = ({
               kind="ghost"
               renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
               iconDescription="Launch order basket"
-              onClick={launchAddDrugOrder}
+              onClick={() => launchOrderBasket({}, { encounterUuid: '' })}
             >
               {t('add', 'Add')}
             </Button>
@@ -298,14 +304,13 @@ const MedicationsDetailsTable: React.FC<MedicationsDetailsTableProps> = ({
                       {!isPrinting && (
                         <TableCell className="cds--table-column-menu">
                           <OrderBasketItemActions
+                            patient={patient}
                             showDiscontinueButton={showDiscontinueButton}
                             showModifyButton={showModifyButton}
                             showReorderButton={showReorderButton}
                             medication={medications[rowIndex]}
                             items={orders}
                             setItems={setOrders}
-                            openOrderBasket={launchOrderBasket}
-                            openDrugOrderForm={launchAddDrugOrder}
                           />
                         </TableCell>
                       )}
@@ -337,27 +342,39 @@ function InfoTooltip({ orderer }: { orderer: string }) {
 }
 
 function OrderBasketItemActions({
+  patient,
   showDiscontinueButton,
   showModifyButton,
   showReorderButton,
   medication,
   items,
   setItems,
-  openOrderBasket,
-  openDrugOrderForm,
 }: {
+  patient: fhir.Patient;
   showDiscontinueButton: boolean;
   showModifyButton: boolean;
   showReorderButton: boolean;
   medication: Order;
   items: Array<DrugOrderBasketItem>;
   setItems: (items: Array<DrugOrderBasketItem>) => void;
-  openOrderBasket: () => void;
-  openDrugOrderForm: (additionalProps?: AddDrugOrderWorkspaceAdditionalProps) => void;
 }) {
+  const { mutate: globalMutate } = useSWRConfig();
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const alreadyInBasket = items.some((x) => x.uuid === medication.uuid);
+
+  const workspaceGroupProps: PatientWorkspaceGroupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid: patient.id,
+      visitContext: medication.encounter.visit,
+      mutateVisitContext: () => {
+        invalidateVisitByUuid(globalMutate, medication.encounter.visit?.uuid);
+        invalidateVisitAndEncounterData(globalMutate, patient.id);
+      },
+    }),
+    [patient, medication, globalMutate],
+  );
   const handleDiscontinueClick = useCallback(() => {
     setItems([
       ...items,
@@ -403,10 +420,17 @@ function OrderBasketItemActions({
           value: medication.quantityUnits?.display,
           valueCoded: medication.quantityUnits?.uuid,
         },
+        encounterUuid: medication.encounter?.uuid,
+        visit: medication.encounter?.visit,
       },
     ]);
-    openOrderBasket();
-  }, [items, setItems, medication, openOrderBasket]);
+    launchWorkspace2<{}, OrderBasketWindowProps, PatientWorkspaceGroupProps>(
+      'order-basket',
+      {},
+      { encounterUuid: medication.encounter.uuid },
+      workspaceGroupProps,
+    );
+  }, [items, setItems, medication, workspaceGroupProps]);
 
   const handleModifyClick = useCallback(() => {
     const newItem: DrugOrderBasketItem = {
@@ -451,10 +475,18 @@ function OrderBasketItemActions({
         value: medication.quantityUnits?.display,
         valueCoded: medication.quantityUnits?.uuid,
       },
+      encounterUuid: medication.encounter?.uuid,
+      visit: medication.encounter?.visit,
     };
     setItems([...items, newItem]);
-    openDrugOrderForm({ order: newItem });
-  }, [items, setItems, medication, openDrugOrderForm]);
+
+    launchWorkspace2<AddDrugOrderWorkspaceProps, OrderBasketWindowProps, PatientWorkspaceGroupProps>(
+      'add-drug-order',
+      { order: newItem },
+      { encounterUuid: medication.encounter.uuid },
+      workspaceGroupProps,
+    );
+  }, [items, setItems, medication, workspaceGroupProps]);
 
   const handleReorderClick = useCallback(() => {
     setItems([
@@ -501,10 +533,17 @@ function OrderBasketItemActions({
           value: medication.quantityUnits?.display,
           valueCoded: medication.quantityUnits?.uuid,
         },
+        encounterUuid: medication.encounter?.uuid,
+        visit: medication.encounter?.visit,
       },
     ]);
-    openOrderBasket();
-  }, [items, setItems, medication, openOrderBasket]);
+    launchWorkspace2<{}, OrderBasketWindowProps, PatientWorkspaceGroupProps>(
+      'order-basket',
+      {},
+      { encounterUuid: medication.encounter.uuid },
+      workspaceGroupProps,
+    );
+  }, [items, setItems, medication, workspaceGroupProps]);
 
   return (
     <OverflowMenu aria-label="Actions menu" selectorPrimaryFocus={'#modify'} flipped size={isTablet ? 'lg' : 'md'}>

package/src/config-schema.ts

@@ -2,11 +2,10 @@ import { Type, validator } from '@openmrs/esm-framework';
 
 export const configSchema = {
   daysDurationUnit: {
-    _description:
-      'The default medication duration unit is days. The concept for that medication duration unit is specified here.',
     uuid: {
       _type: Type.ConceptUuid,
       _default: '1072AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'The uuid of the concept of medication duration unit in days',
     },
     display: {
       _type: Type.String,
@@ -37,6 +36,18 @@ export const configSchema = {
     _description: 'Whether to require an indication when placing a medication order',
     _default: true,
   },
+  prescriberProviderRoles: {
+    _type: Type.Array,
+    _description:
+      'Array of provider roles uuids. If specified, the drug order form shows the "Prescribing Clinician" dropdown listing all providers with one of the specified roles. (The dropdown is hidden if no providers match the role criteria.) This feature requires the providermanagement backend module. Note that, in any case, any user who can submit the drug order form may still do so with themselves as the prescriber.',
+    _default: [],
+  },
+  drugOrderEncounterType: {
+    _type: Type.UUID,
+    _description:
+      'The encounter type of the encounter for the Fill Prescription form. Defaults to the "Order" encounter type.',
+    _default: '39da3525-afe4-45ff-8977-c53b7b359158',
+  },
 };
 
 export interface ConfigObject {
@@ -48,4 +59,6 @@ export interface ConfigObject {
   showPrintButton: boolean;
   debounceDelayInMs: number;
   requireIndication: boolean;
+  prescriberProviderRoles: Array<string>;
+  drugOrderEncounterType: string;
 }

package/src/drug-order-basket-panel/drug-order-basket-panel.extension.tsx

@@ -2,28 +2,31 @@ import React, { type ComponentProps, useCallback, useEffect, useMemo, useState }
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { Button, Tile } from '@carbon/react';
+import { AddIcon, ChevronDownIcon, ChevronUpIcon, useLayoutType } from '@openmrs/esm-framework';
 import {
-  AddIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  closeWorkspace,
-  launchWorkspace,
-  useLayoutType,
-} from '@openmrs/esm-framework';
-import { useOrderBasket } from '@openmrs/esm-patient-common-lib';
+  type OrderBasketExtensionProps,
+  useOrderBasket,
+  type DrugOrderBasketItem,
+} from '@openmrs/esm-patient-common-lib';
 import { prepMedicationOrderPostData } from '../api/api';
-import type { DrugOrderBasketItem } from '../types';
 import OrderBasketItemTile from './order-basket-item-tile.component';
 import RxIcon from './rx-icon.component';
 import styles from './drug-order-basket-panel.scss';
 
 /**
+ * The extension is slotted into order-basket-slot in the main Order Basket workspace by default.
+ * It renders the "Add +" button for drug orders, and lists pending drug orders in the order basket.
+ *
  * Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/62c6bb9500e7671a618efa56
  */
-export default function DrugOrderBasketPanelExtension() {
+function DrugOrderBasketPanelExtension({ patient, launchDrugOrderForm }: OrderBasketExtensionProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
-  const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>('medications', prepMedicationOrderPostData);
+  const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>(
+    patient,
+    'medications',
+    prepMedicationOrderPostData,
+  );
   const [isExpanded, setIsExpanded] = useState(orders.length > 0);
   const {
     incompleteOrderBasketItems,
@@ -61,22 +64,6 @@ export default function DrugOrderBasketPanelExtension() {
     };
   }, [orders]);
 
-  const openDrugSearch = () => {
-    closeWorkspace('order-basket', {
-      ignoreChanges: true,
-      onWorkspaceClose: () => launchWorkspace('add-drug-order'),
-      closeWorkspaceGroup: false,
-    });
-  };
-
-  const openDrugForm = (order: DrugOrderBasketItem) => {
-    closeWorkspace('order-basket', {
-      ignoreChanges: true,
-      onWorkspaceClose: () => launchWorkspace('add-drug-order', { order }),
-      closeWorkspaceGroup: false,
-    });
-  };
-
   const removeMedication = useCallback(
     (order: DrugOrderBasketItem) => {
       const newOrders = [...orders];
@@ -105,7 +92,7 @@ export default function DrugOrderBasketPanelExtension() {
             kind="ghost"
             renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
             iconDescription="Add medication"
-            onClick={openDrugSearch}
+            onClick={() => launchDrugOrderForm()}
             size={isTablet ? 'md' : 'sm'}
           >
             {t('add', 'Add')}
@@ -133,7 +120,7 @@ export default function DrugOrderBasketPanelExtension() {
                 <OrderBasketItemTile
                   key={index}
                   orderBasketItem={order}
-                  onItemClick={() => openDrugForm(order)}
+                  onItemClick={() => launchDrugOrderForm(order)}
                   onRemoveClick={() => removeMedication(order)}
                 />
               ))}
@@ -145,7 +132,7 @@ export default function DrugOrderBasketPanelExtension() {
                 <OrderBasketItemTile
                   key={index}
                   orderBasketItem={order}
-                  onItemClick={() => openDrugForm(order)}
+                  onItemClick={() => launchDrugOrderForm(order)}
                   onRemoveClick={() => removeMedication(order)}
                 />
               ))}
@@ -158,7 +145,7 @@ export default function DrugOrderBasketPanelExtension() {
                 <OrderBasketItemTile
                   key={index}
                   orderBasketItem={item}
-                  onItemClick={() => openDrugForm(item)}
+                  onItemClick={() => launchDrugOrderForm(item)}
                   onRemoveClick={() => removeMedication(item)}
                 />
               ))}
@@ -171,7 +158,7 @@ export default function DrugOrderBasketPanelExtension() {
                 <OrderBasketItemTile
                   key={index}
                   orderBasketItem={item}
-                  onItemClick={() => openDrugForm(item)}
+                  onItemClick={() => launchDrugOrderForm(item)}
                   onRemoveClick={() => removeMedication(item)}
                 />
               ))}
@@ -184,7 +171,7 @@ export default function DrugOrderBasketPanelExtension() {
                 <OrderBasketItemTile
                   key={index}
                   orderBasketItem={item}
-                  onItemClick={() => openDrugForm(item)}
+                  onItemClick={() => launchDrugOrderForm(item)}
                   onRemoveClick={() => removeMedication(item)}
                 />
               ))}
@@ -195,3 +182,5 @@ export default function DrugOrderBasketPanelExtension() {
     </Tile>
   );
 }
+
+export default DrugOrderBasketPanelExtension;