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

package/src/add-drug-order/drug-order-form.resource.ts

@@ -0,0 +1,213 @@
+import { useMemo } from 'react';
+import { useForm, type UseFormReturn } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { parseDate, useConfig } from '@openmrs/esm-framework';
+import { careSettingUuid, useRequireOutpatientQuantity } from '../api';
+import { type ConfigObject } from '../config-schema';
+import { type DrugOrderBasketItem } from '../types';
+import { type Drug } from '@openmrs/esm-patient-common-lib';
+
+export function useDrugOrderForm(initialOrderBasketItem: DrugOrderBasketItem, defaultPrescribingProviderUuid: string) {
+  const medicationOrderFormSchema = useCreateMedicationOrderFormSchema();
+
+  const defaultValues = useMemo(() => {
+    const defaultStartDate =
+      typeof initialOrderBasketItem?.startDate === 'string'
+        ? parseDate(initialOrderBasketItem?.startDate)
+        : (initialOrderBasketItem?.startDate as Date) ?? new Date();
+
+    return drugOrderBasketItemToFormValue(initialOrderBasketItem, defaultStartDate, defaultPrescribingProviderUuid);
+  }, [initialOrderBasketItem, defaultPrescribingProviderUuid]);
+
+  const drugOrderForm: UseFormReturn<MedicationOrderFormData> = useForm<MedicationOrderFormData>({
+    mode: 'all',
+    resolver: zodResolver(medicationOrderFormSchema),
+    defaultValues,
+  });
+
+  return drugOrderForm;
+}
+
+export function drugOrderBasketItemToFormValue(
+  item: DrugOrderBasketItem,
+  startDate: Date,
+  providerUuid: string,
+): MedicationOrderFormData {
+  return {
+    orderer: {
+      uuid: providerUuid,
+    },
+    drug: item?.drug as Partial<Drug>,
+    careSetting: careSettingUuid,
+    isFreeTextDosage: item?.isFreeTextDosage ?? false,
+    freeTextDosage: item?.freeTextDosage,
+    dosage: item?.dosage ?? null,
+    unit: item?.unit,
+    route: item?.route,
+    patientInstructions: item?.patientInstructions ?? '',
+    asNeeded: item?.asNeeded ?? false,
+    asNeededCondition: item?.asNeededCondition ?? '',
+    duration: item?.duration,
+    durationUnit: item?.durationUnit,
+    pillsDispensed: item?.pillsDispensed ?? null,
+    quantityUnits: item?.quantityUnits,
+    numRefills: item?.numRefills ?? null,
+    indication: item?.indication,
+    frequency: item?.frequency,
+    startDate,
+  };
+}
+
+function useCreateMedicationOrderFormSchema() {
+  const { t } = useTranslation();
+  const { requireOutpatientQuantity } = useRequireOutpatientQuantity();
+  const { requireIndication } = useConfig<ConfigObject>();
+
+  const schema = useMemo(() => {
+    const comboSchema = {
+      default: z.boolean().optional(),
+      value: z.string(),
+      valueCoded: z.string(),
+    };
+
+    const baseSchemaFields = {
+      drug: z
+        .object(
+          {
+            uuid: z.string(),
+            concept: z
+              .object({
+                uuid: z.string(),
+              })
+              .passthrough(),
+            dosageForm: z
+              .object({
+                uuid: z.string(),
+              })
+              .passthrough()
+              .nullable(),
+            strength: z.string().nullable(),
+            display: z.string().nullable(),
+          },
+          {
+            message: t('drugRequiredErrorMessage', 'Drug is required'),
+          },
+        )
+        .passthrough(),
+      orderer: z.object(
+        {
+          uuid: z.string(),
+        },
+        {
+          message: t('prescribingClinicianRequiredErrorMessage', 'Prescribing clinician is required'),
+        },
+      ),
+      careSetting: z.string(),
+      freeTextDosage: z.string().refine((value) => !!value, {
+        message: t('freeDosageErrorMessage', 'Add free dosage note'),
+      }),
+      dosage: z.number({
+        invalid_type_error: t('dosageRequiredErrorMessage', 'Dosage is required'),
+      }),
+      unit: z.object(
+        { ...comboSchema },
+        {
+          invalid_type_error: t('selectUnitErrorMessage', 'Dose unit is required'),
+        },
+      ),
+      route: z.object(
+        { ...comboSchema },
+        {
+          invalid_type_error: t('selectRouteErrorMessage', 'Route is required'),
+        },
+      ),
+      patientInstructions: z.string().nullable(),
+      asNeeded: z.boolean(),
+      asNeededCondition: z.string().nullable(),
+      duration: z.number().nullable(),
+      durationUnit: z.object({ ...comboSchema }).nullable(),
+      indication: requireIndication
+        ? z.string().refine((value) => value !== '', {
+            message: t('indicationErrorMessage', 'Indication is required'),
+          })
+        : z.string().nullish(),
+      startDate: z.date(),
+      frequency: z.object(
+        { ...comboSchema },
+        {
+          invalid_type_error: t('selectFrequencyErrorMessage', 'Frequency is required'),
+        },
+      ),
+    };
+
+    const outpatientDrugOrderFields = {
+      pillsDispensed: z
+        .number()
+        .nullable()
+        .refine(
+          (value) => {
+            if (requireOutpatientQuantity && (typeof value !== 'number' || value < 1)) {
+              return false;
+            }
+            return true;
+          },
+          {
+            message: t('pillDispensedErrorMessage', 'Quantity to dispense is required'),
+          },
+        ),
+      quantityUnits: z
+        .object(comboSchema)
+        .nullable()
+        .refine(
+          (value) => {
+            if (requireOutpatientQuantity && !value) {
+              return false;
+            }
+            return true;
+          },
+          {
+            message: t('selectQuantityUnitsErrorMessage', 'Quantity unit is required'),
+          },
+        ),
+      numRefills: z
+        .number()
+        .nullable()
+        .refine(
+          (value) => {
+            if (requireOutpatientQuantity && (typeof value !== 'number' || value < 0)) {
+              return false;
+            }
+            return true;
+          },
+          {
+            message: t('numRefillsErrorMessage', 'Number of refills is required'),
+          },
+        ),
+    };
+
+    const nonFreeTextDosageSchema = z.object({
+      ...baseSchemaFields,
+      ...outpatientDrugOrderFields,
+      isFreeTextDosage: z.literal(false),
+      freeTextDosage: z.string().nullable(),
+    });
+
+    const freeTextDosageSchema = z.object({
+      ...baseSchemaFields,
+      ...outpatientDrugOrderFields,
+      isFreeTextDosage: z.literal(true),
+      dosage: z.number().nullable(),
+      unit: z.object(comboSchema).nullable(),
+      route: z.object(comboSchema).nullable(),
+      frequency: z.object(comboSchema).nullable(),
+    });
+
+    return z.discriminatedUnion('isFreeTextDosage', [nonFreeTextDosageSchema, freeTextDosageSchema]);
+  }, [requireIndication, requireOutpatientQuantity, t]);
+
+  return schema;
+}
+
+export type MedicationOrderFormData = z.infer<ReturnType<typeof useCreateMedicationOrderFormSchema>>;

package/src/add-drug-order/drug-order-form.scss

@@ -2,12 +2,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .orderForm {
   flex-grow: 1;
   display: flex;
@@ -43,6 +37,16 @@
   :global(.cds--number__control-btn) {
     border: 0;
   }
+
+  counter-reset: section;
+
+  h3 {
+    counter-increment: section;
+
+    &::before {
+      content: counter(section) '. ';
+    }
+  }
 }
 
 .medicationInfo {
@@ -90,7 +94,7 @@
 .orderFormHeading {
   @include type.type-style('heading-03');
   margin-bottom: 0;
-  margin-top: 1.25rem;
+  margin-top: layout.$spacing-03;
 }
 
 .formSection {

package/src/add-drug-order/drug-search/drug-search-combobox.component.tsx

@@ -0,0 +1,54 @@
+import { ComboBox } from '@carbon/react';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
+import React, { useMemo, useState } from 'react';
+import { getTemplateOrderBasketItem, useDrugSearch, useDrugTemplates } from './drug-search.resource';
+import { type DrugOrderBasketItem } from '../../types';
+import { type ConfigObject } from '../../config-schema';
+import { useTranslation } from 'react-i18next';
+
+interface DrugSearchComboBoxProps {
+  setSelectedDrugItem(drug: DrugOrderBasketItem);
+}
+
+/**
+ * This component is a ComboBox for searching for drugs. Similar to drug-search.component.tsx,
+ * but allows for custom behavior when a drug is selected.
+ * This extension is currently not used anywhere in the patient-medications-app, but
+ * is used by other apps (ex: dispensing) for selecting drugs.
+ */
+const DrugSearchComboBox: React.FC<DrugSearchComboBoxProps> = ({ setSelectedDrugItem }) => {
+  const { daysDurationUnit } = useConfig<ConfigObject>();
+  const { t } = useTranslation();
+  const [drugSearchTerm, setDrugSearchTerm] = useState('');
+  const debouncedDrugSearchTerm = useDebounce(drugSearchTerm);
+  const { drugs } = useDrugSearch(debouncedDrugSearchTerm);
+  const { templateByDrugUuid } = useDrugTemplates(drugs);
+  const drugItemTemplateOptions: Array<DrugOrderBasketItem> = useMemo(() => {
+    return drugs?.flatMap((drug) => {
+      const templates = templateByDrugUuid.get(drug.uuid);
+      if (templates?.length > 0) {
+        return templates.map((template) => getTemplateOrderBasketItem(drug, daysDurationUnit, template));
+      } else {
+        return [getTemplateOrderBasketItem(drug, daysDurationUnit)];
+      }
+    });
+  }, [drugs, templateByDrugUuid, daysDurationUnit]);
+
+  return (
+    <ComboBox
+      id="drug-search-combobox"
+      items={drugItemTemplateOptions ?? []}
+      onChange={({ selectedItem }) => {
+        setSelectedDrugItem(selectedItem);
+      }}
+      onInputChange={(inputText) => {
+        setDrugSearchTerm(inputText);
+      }}
+      itemToString={(item: DrugOrderBasketItem) => item?.display ?? ''}
+      placeholder={t('searchFieldPlaceholder', 'Search for a drug or orderset (e.g. "Aspirin")')}
+      titleText={t('drugName', 'Drug name')}
+    />
+  );
+};
+
+export default DrugSearchComboBox;

package/src/add-drug-order/drug-search/drug-search-combobox.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DrugSearchComboBox from './drug-search-combobox.component';
+import { useDrugSearch, useDrugTemplates } from './drug-search.resource';
+import React from 'react';
+import { mockDrugSearchResultApiData } from '__mocks__';
+
+const mockUseDrugSearch = jest.mocked(useDrugSearch);
+const mockUseDrugTemplates = jest.mocked(useDrugTemplates);
+
+jest.mock('./drug-search.resource', () => ({
+  ...jest.requireActual('./drug-search.resource'),
+  useDrugSearch: jest.fn(),
+  useDrugTemplates: jest.fn(),
+}));
+
+const mockSetSelectedDrugItem = jest.fn();
+
+describe('DrugSearchComboBox', () => {
+  beforeEach(() => {
+    mockUseDrugSearch.mockImplementation(() => ({
+      isLoading: false,
+      drugs: mockDrugSearchResultApiData,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    }));
+
+    mockUseDrugTemplates.mockImplementation(() => ({
+      isLoading: false,
+      error: null,
+      templateByDrugUuid: new Map(),
+      isValidating: false,
+      mutate: jest.fn(),
+    }));
+  });
+
+  it('renders DrugSearchComboBox', async () => {
+    const user = userEvent.setup();
+    renderDrugSearchComboBox();
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    await user.type(screen.getByRole('combobox'), 'Aspirin');
+    const aspirin81 = screen.getByText(/Aspirin 81mg/i);
+    expect(aspirin81).toBeInTheDocument();
+    await aspirin81.click();
+    expect(mockSetSelectedDrugItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        display: 'Aspirin 81mg',
+      }),
+    );
+  });
+});
+
+function renderDrugSearchComboBox() {
+  render(<DrugSearchComboBox setSelectedDrugItem={mockSetSelectedDrugItem} />);
+}

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

@@ -16,9 +16,10 @@ import styles from './order-basket-search.scss';
 
 export interface DrugSearchProps {
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
+  patient: fhir.Patient;
 }
 
-export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
+export default function DrugSearch({ openOrderForm, patient }: DrugSearchProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [searchTerm, setSearchTerm] = useState('');
@@ -60,6 +61,7 @@ export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
         searchTerm={debouncedSearchTerm}
         openOrderForm={openOrderForm}
         focusAndClearSearchInput={focusAndClearSearchInput}
+        patient={patient}
       />
       {isTablet && (
         <div className={styles.separatorContainer}>

package/src/add-drug-order/drug-search/drug-search.resource.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import useSWRImmutable from 'swr/immutable';
-import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, useFeatureFlag } from '@openmrs/esm-framework';
 import type { Drug } from '@openmrs/esm-patient-common-lib';
 import { type DrugOrderBasketItem, type DrugOrderTemplate, type OrderTemplate } from '../../types';
 
@@ -19,12 +19,20 @@ export interface DrugSearchResult {
   };
 }
 
-export function useDrugSearch(query: string): {
-  isLoading: boolean;
-  drugs: Array<DrugSearchResult>;
-  error: Error;
-} {
-  const { data, error, isLoading } = useSWRImmutable<FetchResponse<{ results: Array<DrugSearchResult> }>, Error>(
+interface OrderTemplateResource {
+  uuid: string;
+  drug: Drug;
+  name: string;
+  template: string;
+}
+
+/**
+ * Search for a list of drugs based on the given query string
+ * @param query
+ * @returns
+ */
+export function useDrugSearch(query: string) {
+  const { data, ...rest } = useSWRImmutable<FetchResponse<{ results: Array<DrugSearchResult> }>, Error>(
     query
       ? `${restBaseUrl}/drug?q=${query}&v=custom:(uuid,display,name,strength,dosageForm:(display,uuid),concept:(display,uuid))`
       : null,
@@ -33,32 +41,36 @@ export function useDrugSearch(query: string): {
 
   const results = useMemo(
     () => ({
-      isLoading,
       drugs: data?.data?.results,
-      error,
+      ...rest,
     }),
-    [data, error, isLoading],
+    [data, rest],
   );
 
   return results;
 }
 
+/**
+ * Search for a list of order templates associated with the given drug.
+ * Requires the ordertemplates module installed to work properly.
+ * @param drugUuid
+ * @returns
+ */
 export function useDrugTemplate(drugUuid: string): {
   isLoading: boolean;
   templates: Array<DrugOrderTemplate>;
   error: Error;
 } {
+  const isOrderTemplatesModuleInstalled = useFeatureFlag('ordertemplates-module');
   const { data, error, isLoading } = useSWRImmutable<
     FetchResponse<{
-      results: Array<{
-        uuid: string;
-        drug: Drug;
-        name: string;
-        template: string;
-      }>;
+      results: Array<OrderTemplateResource>;
     }>,
     Error
-  >(drugUuid ? `${restBaseUrl}/ordertemplates/orderTemplate?drug=${drugUuid}` : null, openmrsFetch);
+  >(
+    isOrderTemplatesModuleInstalled && drugUuid ? `${restBaseUrl}/ordertemplates/orderTemplate?drug=${drugUuid}` : null,
+    openmrsFetch,
+  );
 
   const results = useMemo(
     () => ({
@@ -74,6 +86,50 @@ export function useDrugTemplate(drugUuid: string): {
   return results;
 }
 
+/**
+ * Search for a list of order templates associated with drugs in the given array
+ * Requires the ordertemplates module installed to work properly.
+ *
+ * Note: This hook is inefficient as it makes a request for each uuid. Having a
+ * backend search handler that supports passing in multiple drug uuids will fix that.
+ * See: https://openmrs.atlassian.net/browse/OEUI-312
+ * @param drugUuids
+ * @returns a Map mapping each drug uuid to a list of associated order templates
+ */
+export function useDrugTemplates(drugs: Drug[]) {
+  const drugUuids = drugs?.map((d) => d.uuid);
+  const isOrderTemplatesModuleInstalled = useFeatureFlag('ordertemplates-module');
+  const { data, ...rest } = useSWRImmutable<FetchResponse<OrderTemplateResource>[], Error>(
+    isOrderTemplatesModuleInstalled ? drugUuids : null,
+    (drugUuids: string[]) => {
+      return Promise.all(
+        drugUuids.map((drugUuid) => {
+          return openmrsFetch<OrderTemplateResource>(`${restBaseUrl}/ordertemplates/orderTemplate?drug=${drugUuid}`);
+        }),
+      );
+    },
+  );
+
+  const templateByDrugUuid = useMemo(() => {
+    const templateByDrugUuid: Map<string, DrugOrderTemplate[]> = new Map();
+    for (const d of data ?? []) {
+      if (d.data?.drug) {
+        const key = d.data.drug.uuid;
+        if (!templateByDrugUuid.has(key)) {
+          templateByDrugUuid.set(key, []);
+        }
+        templateByDrugUuid.get(key).push({
+          ...d.data,
+          template: JSON.parse(d.data.template) as OrderTemplate,
+        });
+      }
+    }
+    return templateByDrugUuid;
+  }, [data]);
+
+  return { templateByDrugUuid, ...rest };
+}
+
 export function getDefault(template: OrderTemplate, prop: string) {
   return template.dosingInstructions[prop]?.find((x) => x.default) || template.dosingInstructions[prop]?.[0];
 }

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

@@ -3,7 +3,7 @@ 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 { useOrderBasket } from '@openmrs/esm-patient-common-lib';
 import {
   ArrowRightIcon,
   closeWorkspace,
@@ -26,12 +26,14 @@ import type { DrugOrderBasketItem } from '../../types';
 import styles from './order-basket-search-results.scss';
 
 export interface OrderBasketSearchResultsProps {
+  patient: fhir.Patient;
   searchTerm: string;
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
   focusAndClearSearchInput: () => void;
 }
 
 interface DrugSearchResultItemProps {
+  patient: fhir.Patient;
   drug: DrugSearchResult;
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
 }
@@ -40,6 +42,7 @@ export default function OrderBasketSearchResults({
   searchTerm,
   openOrderForm,
   focusAndClearSearchInput,
+  patient,
 }: OrderBasketSearchResultsProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -105,21 +108,29 @@ 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 patient={patient} key={drug.uuid} drug={drug} openOrderForm={openOrderForm} />
+        ))}
       </div>
     </div>
   );
 }
 
-const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ drug, openOrderForm }) => {
+const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ patient, drug, openOrderForm }) => {
   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],
   );
+  // 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],

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

@@ -0,0 +1,111 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  type ConfigObject,
+  type DefaultWorkspaceProps,
+  showSnackbar,
+  useConfig,
+  useSession,
+  useVisit,
+} from '@openmrs/esm-framework';
+import { type EncounterPost, postEncounter } from '@openmrs/esm-patient-common-lib';
+import { type DrugOrderBasketItem } from '../types';
+import { prepMedicationOrderPostData } from '../api';
+import DrugOrderForm from './drug-order-form.component';
+
+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
+      patientUuid={patientUuid}
+      initialOrderBasketItem={{ action: 'NEW' } as DrugOrderBasketItem}
+      patient={patient}
+      onSave={submitDrugOrder}
+      saveButtonText={t('fillPrescription', 'Fill prescription')}
+      onCancel={closeWorkspace}
+      promptBeforeClosing={promptBeforeClosing}
+      allowSelectingPrescribingClinician={true}
+      allowSelectingDrug={true}
+    />
+  );
+};
+
+export default FillPrescriptionForm;