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

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

@@ -1,5 +1,4 @@
 import React, { type ChangeEvent, type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import {
   Button,
@@ -7,36 +6,38 @@ import {
   Checkbox,
   Column,
   ComboBox,
-  IconButton,
   Form,
   FormGroup,
   FormLabel,
   Grid,
+  IconButton,
   InlineNotification,
   Layer,
   NumberInput,
+  Stack,
   TextArea,
   TextInput,
   Toggle,
 } from '@carbon/react';
 import { Subtract } from '@carbon/react/icons';
 import { capitalize } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { type Control, Controller, type FieldErrors, useController } from 'react-hook-form';
 import {
   AddIcon,
   age,
-  ArrowLeftIcon,
   ExtensionSlot,
   formatDate,
   getPatientName,
   OpenmrsDatePicker,
   parseDate,
+  showSnackbar,
   useConfig,
+  useFeatureFlag,
   useLayoutType,
+  useSession,
 } from '@openmrs/esm-framework';
-import { type Control, Controller, useController, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
-import { z } from 'zod';
+import { type Drug } from '@openmrs/esm-patient-common-lib';
 import { useOrderConfig } from '../api/order-config';
 import { type ConfigObject } from '../config-schema';
 import type {
@@ -48,143 +49,40 @@ import type {
   MedicationRoute,
   QuantityUnit,
 } from '../types';
-import { useRequireOutpatientQuantity } from '../api';
+import { type Provider, useActivePatientOrders, useProviders } from '../api';
+import {
+  drugOrderBasketItemToFormValue,
+  type MedicationOrderFormData,
+  useDrugOrderForm,
+} from './drug-order-form.resource';
+import DrugSearchComboBox from './drug-search/drug-search-combobox.component';
 import styles from './drug-order-form.scss';
 
 export interface DrugOrderFormProps {
+  patientUuid: string;
   initialOrderBasketItem: DrugOrderBasketItem;
-  onSave: (finalizedOrder: DrugOrderBasketItem) => void;
+  patient: fhir.Patient;
+  onSave: (finalizedOrder: DrugOrderBasketItem) => Promise<void>;
+  saveButtonText: string;
   onCancel: () => void;
   promptBeforeClosing: (testFcn: () => boolean) => void;
-}
 
-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 = {
-      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().optional(),
-    });
-
-    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;
+  /**
+   * If true, allows user to select the prescribing provider when ordering medications from the order basket.
+   * (Otherwise, the prescribing provider always defaults to the current user.)
+   * The `prescriberProviderRoles` config must be set for this to work properly.
+   */
+  allowSelectingPrescribingClinician: boolean;
+  allowSelectingDrug: boolean;
 }
 
-type MedicationOrderFormData = z.infer<ReturnType<typeof useCreateMedicationOrderFormSchema>>;
-
 function MedicationInfoHeader({
-  orderBasketItem,
+  drug,
   routeValue,
   unitValue,
   dosage,
 }: {
-  orderBasketItem: DrugOrderBasketItem;
+  drug: Drug;
   routeValue: string;
   unitValue: string;
   dosage: number | null;
@@ -194,11 +92,11 @@ function MedicationInfoHeader({
   return (
     <div className={styles.medicationInfo} id="medicationInfo">
       <strong className={styles.productiveHeading02}>
-        {orderBasketItem?.drug?.display} {orderBasketItem?.drug?.strength && `(${orderBasketItem.drug?.strength})`}
+        {drug?.display} {drug?.strength && `(${drug?.strength})`}
       </strong>{' '}
       <span className={styles.bodyLong01}>
         {routeValue && <>&mdash; {routeValue}</>}{' '}
-        {orderBasketItem?.drug?.dosageForm?.display && <>&mdash; {orderBasketItem?.drug?.dosageForm?.display}</>}{' '}
+        {drug?.dosageForm?.display && <>&mdash; {drug?.dosageForm?.display}</>}{' '}
       </span>
       {dosage && unitValue ? (
         <>
@@ -210,7 +108,7 @@ function MedicationInfoHeader({
           </strong>
         </>
       ) : null}{' '}
-      <ExtensionSlot name="medication-info-slot" state={{ order: orderBasketItem }} />
+      <ExtensionSlot name="medication-info-slot" state={{ order: { drug } as DrugOrderBasketItem }} />
     </div>
   );
 }
@@ -224,54 +122,67 @@ function InputWrapper({ children }) {
   );
 }
 
-export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, promptBeforeClosing }: DrugOrderFormProps) {
+export function DrugOrderForm({
+  initialOrderBasketItem,
+  patient,
+  onSave,
+  saveButtonText,
+  onCancel,
+  promptBeforeClosing,
+  allowSelectingPrescribingClinician,
+  allowSelectingDrug,
+}: DrugOrderFormProps) {
   const { t } = useTranslation();
-  const config = useConfig<ConfigObject>();
+  const { daysDurationUnit, prescriberProviderRoles } = useConfig<ConfigObject>();
   const isTablet = useLayoutType() === 'tablet';
   const { orderConfigObject, error: errorFetchingOrderConfig } = useOrderConfig();
 
-  const defaultStartDate = useMemo(() => {
-    if (typeof initialOrderBasketItem?.startDate === 'string') parseDate(initialOrderBasketItem?.startDate);
-
-    return initialOrderBasketItem?.startDate as Date;
-  }, [initialOrderBasketItem?.startDate]);
-
-  const medicationOrderFormSchema = useCreateMedicationOrderFormSchema();
+  const isProviderManagementModuleInstalled = useFeatureFlag('providermanagement-module');
+  const allowAndSupportSelectingPrescribingClinician =
+    isProviderManagementModuleInstalled && allowSelectingPrescribingClinician;
 
+  const {
+    data: providers,
+    isLoading: isLoadingProviders,
+    error: errorLoadingProviders,
+  } = useProviders(allowAndSupportSelectingPrescribingClinician ? prescriberProviderRoles : null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const { currentProvider } = useSession();
+  const defaultPrescribingProvider = allowAndSupportSelectingPrescribingClinician
+    ? providers?.find((p) => p.uuid === currentProvider.uuid)
+    : currentProvider;
+  const drugOrderForm = useDrugOrderForm(initialOrderBasketItem, defaultPrescribingProvider?.uuid);
   const {
     control,
     formState: { isDirty },
     getValues,
+    reset,
     handleSubmit,
     setValue,
     watch,
-  } = useForm<MedicationOrderFormData>({
-    mode: 'all',
-    resolver: zodResolver(medicationOrderFormSchema),
-    defaultValues: {
-      isFreeTextDosage: initialOrderBasketItem?.isFreeTextDosage,
-      freeTextDosage: initialOrderBasketItem?.freeTextDosage,
-      dosage: initialOrderBasketItem?.dosage ?? null,
-      unit: initialOrderBasketItem?.unit,
-      route: initialOrderBasketItem?.route,
-      patientInstructions: initialOrderBasketItem?.patientInstructions,
-      asNeeded: initialOrderBasketItem?.asNeeded,
-      asNeededCondition: initialOrderBasketItem?.asNeededCondition,
-      duration: initialOrderBasketItem?.duration,
-      durationUnit: initialOrderBasketItem?.durationUnit,
-      pillsDispensed: initialOrderBasketItem?.pillsDispensed ?? null,
-      quantityUnits: initialOrderBasketItem?.quantityUnits,
-      numRefills: initialOrderBasketItem?.numRefills ?? null,
-      indication: initialOrderBasketItem?.indication,
-      frequency: initialOrderBasketItem?.frequency,
-      startDate: defaultStartDate,
-    },
-  });
+  } = drugOrderForm;
 
   useEffect(() => {
     promptBeforeClosing(() => isDirty);
   }, [isDirty, promptBeforeClosing]);
 
+  // reset the dosage information if set to free text dosage
+  const handleIsFreeTextDosageAfterChange = useCallback(
+    (newValue: MedicationOrderFormData['isFreeTextDosage']) => {
+      if (newValue) {
+        setValue('dosage', null, { shouldValidate: true });
+        setValue('unit', null, { shouldValidate: true });
+        setValue('route', null, { shouldValidate: true });
+        setValue('frequency', null, { shouldValidate: true });
+        setValue('patientInstructions', null, { shouldValidate: true });
+      } else {
+        setValue('freeTextDosage', null, { shouldValidate: true });
+      }
+    },
+    [setValue],
+  );
+
   const handleUnitAfterChange = useCallback(
     (newValue: MedicationOrderFormData['unit'], prevValue: MedicationOrderFormData['unit']) => {
       if (prevValue?.valueCoded === getValues('quantityUnits')?.valueCoded) {
@@ -281,13 +192,18 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
     [setValue, getValues],
   );
 
+  const drug = watch('drug') as Drug;
   const routeValue = watch('route')?.value;
   const unitValue = watch('unit')?.value;
   const dosage = watch('dosage');
+  const startDate = watch('startDate');
 
-  const handleFormSubmission = (data: MedicationOrderFormData) => {
+  const handleFormSubmission = async (data: MedicationOrderFormData) => {
     const newBasketItems = {
       ...initialOrderBasketItem,
+      drug: data.drug,
+      orderer: data.orderer.uuid,
+      careSetting: data.careSetting,
       isFreeTextDosage: data.isFreeTextDosage,
       freeTextDosage: data.freeTextDosage,
       dosage: data.dosage,
@@ -304,8 +220,23 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
       indication: data.indication,
       frequency: data.frequency,
       startDate: data.startDate,
-    };
-    onSave(newBasketItems as DrugOrderBasketItem);
+    } as DrugOrderBasketItem;
+    setIsSaving(true);
+    await onSave(newBasketItems);
+    setIsSaving(false);
+  };
+
+  const handleFormSubmissionError = (errors: FieldErrors<MedicationOrderFormData>) => {
+    if (errors) {
+      console.error('Error in drug order form', errors);
+      showSnackbar({
+        title: t('drugOrderValidationFailed', 'Validation failed'),
+        subtitle: t('drugOrderValidationFailedDescription', 'Please check the form for errors and try again.'),
+        kind: 'error',
+        timeoutInMs: 5000,
+        isLowContrast: true,
+      });
+    }
   };
 
   const drugDosingUnits: Array<DosingUnit> = useMemo(
@@ -336,11 +267,11 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
     () =>
       orderConfigObject?.durationUnits ?? [
         {
-          valueCoded: config?.daysDurationUnit?.uuid,
-          value: config?.daysDurationUnit?.display,
+          valueCoded: daysDurationUnit?.uuid,
+          value: daysDurationUnit?.display,
         },
       ],
-    [orderConfigObject, config?.daysDurationUnit],
+    [orderConfigObject, daysDurationUnit],
   );
 
   const orderFrequencies: Array<MedicationFrequency> = useMemo(() => {
@@ -351,6 +282,10 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
     return menu?.item?.value?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
   }, []);
 
+  const filterItemsByProviderName = useCallback((menu) => {
+    return menu?.item?.person?.display?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
+  }, []);
+
   const filterItemsBySynonymNames = useCallback((menu) => {
     if (menu?.inputValue?.length) {
       return menu.item?.names?.some((abbr: string) => abbr.toLowerCase().includes(menu.inputValue.toLowerCase()));
@@ -359,7 +294,6 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
   }, []);
 
   const [showStickyMedicationHeader, setShowMedicationHeader] = useState(false);
-  const { patient } = usePatientChartStore();
   const patientName = patient ? getPatientName(patient) : '';
 
   const observer = useRef(null);
@@ -384,30 +318,38 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
     },
     [setShowMedicationHeader],
   );
+  const {
+    fieldState: { error: drugFieldError },
+  } = useController<MedicationOrderFormData>({ name: 'drug', control });
+
+  // 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 { data: activeOrders } = useActivePatientOrders(patient.id);
+  const drugAlreadyPrescribedForNewOrder = useMemo(
+    () => initialOrderBasketItem.action == 'NEW' && activeOrders?.some((order) => order?.drug?.uuid === drug?.uuid),
+    [activeOrders, drug, initialOrderBasketItem.action],
+  );
 
   return (
     <div className={styles.container}>
       {showStickyMedicationHeader && (
         <div className={styles.stickyMedicationInfo}>
-          <MedicationInfoHeader
-            dosage={dosage}
-            orderBasketItem={initialOrderBasketItem}
-            routeValue={routeValue}
-            unitValue={unitValue}
-          />
+          <MedicationInfoHeader dosage={dosage} drug={drug} routeValue={routeValue} unitValue={unitValue} />
         </div>
       )}
-      {isTablet && (
-        <div className={styles.patientHeader}>
-          <span className={styles.bodyShort02}>{patientName}</span>
-          <span className={classNames(styles.text02, styles.bodyShort01)}>
-            {capitalize(patient?.gender)} &middot; {age(patient?.birthDate)} &middot;{' '}
-            <span>{formatDate(parseDate(patient?.birthDate), { mode: 'wide', time: false })}</span>
-          </span>
-          <ExtensionSlot name="allergy-list-pills-slot" state={{ patientUuid: patient?.id }} />
-        </div>
-      )}
-      <Form className={styles.orderForm} onSubmit={handleSubmit(handleFormSubmission)} id="drugOrderForm">
+      <div className={styles.patientHeader}>
+        <span className={styles.bodyShort02}>{patientName}</span>
+        <span className={classNames(styles.text02, styles.bodyShort01)}>
+          {capitalize(patient?.gender)} &middot; {age(patient?.birthDate)} &middot;{' '}
+          <span>{formatDate(parseDate(patient?.birthDate), { mode: 'wide', time: false })}</span>
+        </span>
+      </div>
+      <ExtensionSlot name="allergy-list-pills-slot" state={{ patientUuid: patient?.id }} />
+      <Form
+        className={styles.orderForm}
+        onSubmit={handleSubmit(handleFormSubmission, handleFormSubmissionError)}
+        id="drugOrderForm"
+      >
         <div>
           {errorFetchingOrderConfig && (
             <InlineNotification
@@ -418,36 +360,73 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
               subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
             />
           )}
-          {!isTablet && (
-            <div>
-              <div className={styles.backButton}>
-                <Button
-                  kind="ghost"
-                  renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
-                  iconDescription="Return to order basket"
-                  size="sm"
-                  onClick={onCancel}
-                >
-                  <span>{t('backToOrderBasket', 'Back to order basket')}</span>
-                </Button>
-              </div>
-              <ExtensionSlot name="allergy-list-pills-slot" state={{ patientUuid: patient?.id }} />
-            </div>
-          )}
-
           <h1 className={styles.orderFormHeading}>{t('orderForm', 'Order Form')}</h1>
+          {(allowSelectingDrug || allowSelectingPrescribingClinician) && (
+            <section className={styles.formSection}>
+              <h3 className={styles.sectionHeader}>{t('prescriptionInfo', 'Prescription info')}</h3>
+              <Stack gap={5}>
+                {allowSelectingDrug && (
+                  <InputWrapper>
+                    <DrugSearchComboBox
+                      setSelectedDrugItem={(item) => {
+                        // when selecting a new drug, it can have its own order template that populates many fields
+                        // we should just reset the entire form
+                        reset(drugOrderBasketItemToFormValue(item, startDate, currentProvider.uuid));
+                      }}
+                    />
+                    {drugAlreadyPrescribedForNewOrder && (
+                      <FormLabel className={styles.errorLabel}>
+                        {t('activePrescriptionExists', 'Active prescription exists for this drug')}
+                      </FormLabel>
+                    )}
+                    <FormLabel className={styles.errorLabel}>{drugFieldError?.message}</FormLabel>
+                  </InputWrapper>
+                )}
+                {allowAndSupportSelectingPrescribingClinician &&
+                  !isLoadingProviders &&
+                  (providers?.length > 0 ? (
+                    <ControlledFieldInput
+                      control={control}
+                      name="orderer"
+                      type="comboBox"
+                      getValues={getValues}
+                      id="orderer"
+                      shouldFilterItem={filterItemsByProviderName}
+                      placeholder={t('prescribingClinician', 'Prescribing Clinician')}
+                      titleText={t('prescribingClinician', 'Prescribing Clinician')}
+                      items={providers}
+                      itemToString={(item: Provider) => item?.person?.display}
+                    />
+                  ) : errorLoadingProviders ? (
+                    <InlineNotification
+                      kind="warning"
+                      lowContrast
+                      className={styles.inlineNotification}
+                      title={t('errorLoadingClinicians', 'Error loading clinicians')}
+                      subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
+                    />
+                  ) : (
+                    <InlineNotification
+                      kind="warning"
+                      lowContrast
+                      className={styles.inlineNotification}
+                      title={t('noCliniciansFound', 'No clinicians found')}
+                      subtitle={t(
+                        'noCliniciansFoundDescription',
+                        'Cannot select prescribing clinician because no clinicians with appropriate roles are found. Check configuration.',
+                      )}
+                    />
+                  ))}
+              </Stack>
+            </section>
+          )}
           <div ref={medicationInfoHeaderRef}>
-            <MedicationInfoHeader
-              dosage={dosage}
-              orderBasketItem={initialOrderBasketItem}
-              routeValue={routeValue}
-              unitValue={unitValue}
-            />
+            <MedicationInfoHeader dosage={dosage} drug={drug} routeValue={routeValue} unitValue={unitValue} />
           </div>
           <section className={styles.formSection}>
             <Grid className={styles.gridRow}>
               <Column lg={12} md={6} sm={4}>
-                <h3 className={styles.sectionHeader}>{t('dosageInstructions', '1. Dosage instructions')}</h3>
+                <h3 className={styles.sectionHeader}>{t('dosageInstructions', 'Dosage instructions')}</h3>
               </Column>
               <Column className={styles.freeTextDosageToggle} lg={4} md={2} sm={4}>
                 <ControlledFieldInput
@@ -458,6 +437,7 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
                   id="freeTextDosageToggle"
                   aria-label={t('freeTextDosage', 'Free text dosage')}
                   labelText={t('freeTextDosage', 'Free text dosage')}
+                  handleAfterChange={handleIsFreeTextDosageAfterChange}
                 />
               </Column>
             </Grid>
@@ -599,7 +579,7 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
             )}
           </section>
           <section className={styles.formSection}>
-            <h3 className={styles.sectionHeader}>{t('prescriptionDuration', '2. Prescription duration')}</h3>
+            <h3 className={styles.sectionHeader}>{t('prescriptionDuration', 'Prescription duration')}</h3>
             <Grid className={styles.gridRow}>
               {/* TODO: This input does nothing */}
               <Column lg={16} md={4} sm={4}>
@@ -665,7 +645,7 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
             </Grid>
           </section>
           <section className={styles.formSection}>
-            <h3 className={styles.sectionHeader}>{t('dispensingInformation', '3. Dispensing instructions')}</h3>
+            <h3 className={styles.sectionHeader}>{t('dispensingInformation', 'Dispensing instructions')}</h3>
             <Grid className={styles.gridRow}>
               <Column lg={8} md={3} sm={4}>
                 <InputWrapper>
@@ -739,9 +719,7 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
           </section>
         </div>
 
-        <ButtonSet
-          className={classNames(styles.buttonSet, isTablet ? styles.tabletButtonSet : styles.desktopButtonSet)}
-        >
+        <ButtonSet className={styles.buttonSet}>
           <Button className={styles.button} kind="secondary" onClick={onCancel} size="xl">
             {t('discard', 'Discard')}
           </Button>
@@ -750,9 +728,9 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
             kind="primary"
             type="submit"
             size="xl"
-            disabled={!!errorFetchingOrderConfig}
+            disabled={!!errorFetchingOrderConfig || isSaving || drugAlreadyPrescribedForNewOrder}
           >
-            {t('saveOrder', 'Save order')}
+            {saveButtonText}
           </Button>
         </ButtonSet>
       </Form>
@@ -795,7 +773,9 @@ const CustomNumberInput = ({ setValue, control, name, labelText, isTablet, ...in
 
   return (
     <div className={styles.customElement}>
-      <span className="cds--label">{labelText}</span>
+      <span className="cds--label" id={`${name}-label`}>
+        {labelText}
+      </span>
       <div className={styles.customNumberInput}>
         <IconButton onClick={decrement} label={t('decrement', 'Decrement')} size={responsiveSize}>
           <Subtract size={16} />
@@ -809,6 +789,7 @@ const CustomNumberInput = ({ setValue, control, name, labelText, isTablet, ...in
           size={responsiveSize}
           id={name}
           labelText=""
+          aria-labelledby={`${name}-label`}
           {...inputProps}
         />
         <IconButton onClick={increment} label={t('increment', 'Increment')} size={responsiveSize}>
@@ -847,12 +828,12 @@ const ControlledFieldInput = ({
   handleAfterChange,
   ...restProps
 }: ControlledFieldInputProps) => {
+  const { t } = useTranslation();
   const {
     field: { onBlur, onChange, value, ref },
     fieldState: { error },
   } = useController<MedicationOrderFormData>({ name, control });
   const isTablet = useLayoutType() === 'tablet';
-  const responsiveSize = isTablet ? 'md' : 'sm';
 
   const fieldErrorStyles = classNames({
     [styles.fieldError]: error?.message,
@@ -876,6 +857,8 @@ const ControlledFieldInput = ({
           ref={ref}
           // @ts-ignore
           size={isTablet ? 'md' : 'sm'}
+          labelA={t('on', 'On')}
+          labelB={t('off', 'Off')}
           {...restProps}
         />
       );
@@ -953,13 +936,14 @@ const ControlledFieldInput = ({
           ref={ref}
           size={isTablet ? 'md' : 'sm'}
           selectedItem={value}
+          initialSelectedItem={value}
           {...comboBoxProps}
         />
       );
     }
 
     return null;
-  }, [type, value, restProps, handleChange, fieldErrorStyles, onBlur, ref, isTablet]);
+  }, [type, value, restProps, handleChange, fieldErrorStyles, onBlur, ref, isTablet, t]);
 
   return (
     <>
@@ -968,3 +952,5 @@ const ControlledFieldInput = ({
     </>
   );
 };
+
+export default DrugOrderForm;