@openmrs/esm-patient-orders-app 11.3.0 → 11.3.1-patch.9310

package/src/order-basket/order-basket.component.tsx

@@ -0,0 +1,213 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, InlineLoading, InlineNotification } from '@carbon/react';
+import {
+  ExtensionSlot,
+  useConfig,
+  useLayoutType,
+  useSession,
+  type Visit,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import {
+  invalidateVisitAndEncounterData,
+  type OrderBasketExtensionProps,
+  type OrderBasketItem,
+  postOrders,
+  postOrdersOnNewEncounter,
+  showOrderSuccessToast,
+  useMutatePatientOrders,
+  useOrderBasket,
+} from '@openmrs/esm-patient-common-lib';
+import { useSWRConfig } from 'swr';
+import { type ConfigObject } from '../config-schema';
+import { useOrderEncounter } from '../api/api';
+import GeneralOrderPanel from './general-order-type/general-order-panel.component';
+import styles from './order-basket.scss';
+
+interface OrderBasketProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+  visitContext: Visit;
+  mutateVisitContext: () => void;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+  orderBasketExtensionProps: OrderBasketExtensionProps;
+}
+
+const OrderBasket: React.FC<OrderBasketProps> = ({
+  patientUuid,
+  patient,
+  visitContext,
+  mutateVisitContext,
+  closeWorkspace,
+  orderBasketExtensionProps,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const config = useConfig<ConfigObject>();
+  const session = useSession();
+  const { orders, clearOrders } = useOrderBasket(patient);
+  const [ordersWithErrors, setOrdersWithErrors] = useState<OrderBasketItem[]>([]);
+  const {
+    visitRequired,
+    isLoading: isLoadingEncounterUuid,
+    encounterUuid,
+    error: errorFetchingEncounterUuid,
+    mutate: mutateEncounterUuid,
+  } = useOrderEncounter(patientUuid, visitContext, mutateVisitContext, config.orderEncounterType);
+  const [isSavingOrders, setIsSavingOrders] = useState(false);
+  const [creatingEncounterError, setCreatingEncounterError] = useState('');
+  const { mutate: mutateOrders } = useMutatePatientOrders(patientUuid);
+  const { mutate } = useSWRConfig();
+
+  const handleSave = useCallback(async () => {
+    const abortController = new AbortController();
+    setCreatingEncounterError('');
+    let orderEncounterUuid = encounterUuid;
+    setIsSavingOrders(true);
+    // If there's no encounter present, create an encounter along with the orders.
+    if (!orderEncounterUuid) {
+      try {
+        await postOrdersOnNewEncounter(
+          patientUuid,
+          config?.orderEncounterType,
+          visitRequired ? visitContext : null,
+          session?.sessionLocation?.uuid,
+          abortController,
+        );
+        await closeWorkspace({ discardUnsavedChanges: true });
+        mutateEncounterUuid();
+        // Only revalidate current visit since orders create new encounters
+        mutateVisitContext?.();
+        invalidateVisitAndEncounterData(mutate, patientUuid);
+        clearOrders();
+        await mutateOrders();
+        showOrderSuccessToast(t, orders);
+      } catch (e) {
+        console.error(e);
+        setCreatingEncounterError(
+          e.responseBody?.error?.message ||
+            t('tryReopeningTheWorkspaceAgain', 'Please try launching the workspace again'),
+        );
+      }
+    } else {
+      const erroredItems = await postOrders(patientUuid, orderEncounterUuid, abortController);
+      clearOrders({ exceptThoseMatching: (item) => erroredItems.map((e) => e.display).includes(item.display) });
+      // Only revalidate current visit since orders create new encounters
+      mutateVisitContext?.();
+      await mutateOrders();
+      invalidateVisitAndEncounterData(mutate, patientUuid);
+
+      if (erroredItems.length == 0) {
+        await closeWorkspace({ discardUnsavedChanges: true });
+        showOrderSuccessToast(t, orders);
+      } else {
+        setOrdersWithErrors(erroredItems);
+      }
+      clearOrders({ exceptThoseMatching: (item) => erroredItems.map((e) => e.display).includes(item.display) });
+      // Only revalidate current visit since orders create new encounters
+      mutateVisitContext?.();
+      await mutateOrders();
+      invalidateVisitAndEncounterData(mutate, patientUuid);
+    }
+    setIsSavingOrders(false);
+    return () => abortController.abort();
+  }, [
+    visitContext,
+    visitRequired,
+    clearOrders,
+    closeWorkspace,
+    config,
+    encounterUuid,
+    mutateEncounterUuid,
+    mutateOrders,
+    mutateVisitContext,
+    orders,
+    patientUuid,
+    session,
+    t,
+    mutate,
+  ]);
+
+  const handleCancel = useCallback(() => {
+    closeWorkspace().then((didClose) => {
+      if (didClose) {
+        clearOrders();
+      }
+    });
+  }, [clearOrders, closeWorkspace]);
+
+  return (
+    <Workspace2 title={t('orderBasketWorkspaceTitle', 'Order Basket')} hasUnsavedChanges={!!orders.length}>
+      <div id="order-basket" className={styles.container}>
+        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+        <div className={styles.orderBasketContainer}>
+          <ExtensionSlot
+            className={classNames(styles.orderBasketSlot, {
+              [styles.orderBasketSlotTablet]: isTablet,
+            })}
+            name="order-basket-slot"
+            state={orderBasketExtensionProps as any}
+          />
+          {config?.orderTypes?.length > 0 &&
+            config.orderTypes.map((orderType) => (
+              <div className={styles.orderPanel} key={orderType.orderTypeUuid}>
+                <GeneralOrderPanel
+                  {...orderType}
+                  launchGeneralOrderForm={orderBasketExtensionProps.launchGeneralOrderForm}
+                  patient={patient}
+                />
+              </div>
+            ))}
+        </div>
+        <div>
+          {(creatingEncounterError || errorFetchingEncounterUuid) && (
+            <InlineNotification
+              kind="error"
+              title={t('tryReopeningTheWorkspaceAgain', 'Please try launching the workspace again')}
+              subtitle={creatingEncounterError}
+              lowContrast={true}
+              className={styles.inlineNotification}
+            />
+          )}
+          {ordersWithErrors.map((order) => (
+            <InlineNotification
+              lowContrast
+              kind="error"
+              title={t('saveDrugOrderFailed', 'Error ordering {{orderName}}', { orderName: order.display })}
+              subtitle={order.extractedOrderError?.fieldErrors?.join(', ')}
+              className={styles.inlineNotification}
+            />
+          ))}
+          <ButtonSet className={styles.buttonSet}>
+            <Button className={styles.actionButton} kind="secondary" onClick={handleCancel}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button
+              className={styles.actionButton}
+              kind="primary"
+              onClick={handleSave}
+              disabled={
+                isSavingOrders ||
+                !orders?.length ||
+                isLoadingEncounterUuid ||
+                (visitRequired && !visitContext) ||
+                orders?.some(({ isOrderIncomplete }) => isOrderIncomplete)
+              }
+            >
+              {isSavingOrders ? (
+                <InlineLoading description={t('saving', 'Saving') + '...'} />
+              ) : (
+                <span>{t('signAndClose', 'Sign and close')}</span>
+              )}
+            </Button>
+          </ButtonSet>
+        </div>
+      </div>
+    </Workspace2>
+  );
+};
+
+export default OrderBasket;

package/src/order-basket/order-basket.workspace.tsx

@@ -1,246 +1,46 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import classNames from 'classnames';
-import { type TFunction, useTranslation } from 'react-i18next';
-import { ActionableNotification, Button, ButtonSet, InlineLoading, InlineNotification } from '@carbon/react';
+import React, { useMemo } from 'react';
 import {
-  ExtensionSlot,
-  showModal,
-  showSnackbar,
-  useConfig,
-  useLayoutType,
-  useSession,
-  useVisit,
-} from '@openmrs/esm-framework';
-import {
-  type DefaultPatientWorkspaceProps,
+  type OrderBasketExtensionProps,
+  type OrderBasketWindowProps,
   type OrderBasketItem,
-  invalidateVisitAndEncounterData,
-  postOrders,
-  postOrdersOnNewEncounter,
-  useOrderBasket,
-  useVisitOrOfflineVisit,
+  type PatientWorkspace2DefinitionProps,
 } from '@openmrs/esm-patient-common-lib';
-import { useSWRConfig } from 'swr';
-import { type ConfigObject } from '../config-schema';
-import { useMutatePatientOrders, useOrderEncounter } from '../api/api';
-import GeneralOrderType from './general-order-type/general-order-type.component';
-import styles from './order-basket.scss';
+import OrderBasket from './order-basket.component';
 
-const OrderBasket: React.FC<DefaultPatientWorkspaceProps> = ({
-  patientUuid,
+const OrderBasketWorkspace: React.FC<PatientWorkspace2DefinitionProps<{}, OrderBasketWindowProps>> = ({
+  groupProps: { patientUuid, patient, visitContext, mutateVisitContext },
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
+  launchChildWorkspace,
 }) => {
-  const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
-  const config = useConfig<ConfigObject>();
-  const session = useSession();
-  const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
-  const { orders, clearOrders } = useOrderBasket();
-  const [ordersWithErrors, setOrdersWithErrors] = useState<OrderBasketItem[]>([]);
-  const {
-    visitRequired,
-    isLoading: isLoadingEncounterUuid,
-    encounterUuid,
-    error: errorFetchingEncounterUuid,
-    mutate: mutateEncounterUuid,
-  } = useOrderEncounter(patientUuid, config.orderEncounterType);
-  const [isSavingOrders, setIsSavingOrders] = useState(false);
-  const [creatingEncounterError, setCreatingEncounterError] = useState('');
-  const { mutate: mutateOrders } = useMutatePatientOrders(patientUuid);
-  const { mutate: mutateCurrentVisit } = useVisit(patientUuid);
-  const { mutate } = useSWRConfig();
-
-  useEffect(() => {
-    promptBeforeClosing(() => !!orders.length);
-  }, [orders, promptBeforeClosing]);
-
-  const openStartVisitDialog = useCallback(() => {
-    const dispose = showModal('start-visit-dialog', {
-      patientUuid,
-      closeModal: () => dispose(),
-    });
-  }, [patientUuid]);
-
-  const handleSave = useCallback(async () => {
-    const abortController = new AbortController();
-    setCreatingEncounterError('');
-    let orderEncounterUuid = encounterUuid;
-    setIsSavingOrders(true);
-    // If there's no encounter present, create an encounter along with the orders.
-    if (!orderEncounterUuid) {
-      try {
-        await postOrdersOnNewEncounter(
-          patientUuid,
-          config?.orderEncounterType,
-          visitRequired ? currentVisit : null,
-          session?.sessionLocation?.uuid,
-          abortController,
-        );
-        mutateEncounterUuid();
-        // Only revalidate current visit since orders create new encounters
-        mutateCurrentVisit();
-        invalidateVisitAndEncounterData(mutate, patientUuid);
-        clearOrders();
-        await mutateOrders();
-
-        closeWorkspaceWithSavedChanges();
-        showOrderSuccessToast(t, orders);
-      } catch (e) {
-        console.error(e);
-        setCreatingEncounterError(
-          e.responseBody?.error?.message ||
-            t('tryReopeningTheWorkspaceAgain', 'Please try launching the workspace again'),
-        );
-      }
-    } else {
-      const erroredItems = await postOrders(patientUuid, orderEncounterUuid, abortController);
-      clearOrders({ exceptThoseMatching: (item) => erroredItems.map((e) => e.display).includes(item.display) });
-      // Only revalidate current visit since orders create new encounters
-      mutateCurrentVisit();
-      await mutateOrders();
-      invalidateVisitAndEncounterData(mutate, patientUuid);
-
-      if (erroredItems.length == 0) {
-        closeWorkspaceWithSavedChanges();
-        showOrderSuccessToast(t, orders);
-      } else {
-        setOrdersWithErrors(erroredItems);
-      }
-    }
-    setIsSavingOrders(false);
-    return () => abortController.abort();
-  }, [
-    currentVisit,
-    visitRequired,
-    clearOrders,
-    closeWorkspaceWithSavedChanges,
-    config,
-    encounterUuid,
-    mutateEncounterUuid,
-    mutateOrders,
-    mutateCurrentVisit,
-    orders,
-    patientUuid,
-    session,
-    t,
-    mutate,
-  ]);
-
-  const handleCancel = useCallback(() => {
-    closeWorkspace({ onWorkspaceClose: clearOrders });
-  }, [clearOrders, closeWorkspace]);
+  const orderBasketExtensionProps = useMemo(() => {
+    const launchDrugOrderForm = (order: OrderBasketItem) => {
+      launchChildWorkspace('add-drug-order', { order });
+    };
+    const launchLabOrderForm = (orderTypeUuid: string, order: OrderBasketItem) => {
+      launchChildWorkspace('add-lab-order', { orderTypeUuid, order });
+    };
+    const launchGeneralOrderForm = (orderTypeUuid: string, order: OrderBasketItem) => {
+      launchChildWorkspace('orderable-concept-workspace', { orderTypeUuid, order });
+    };
+
+    return {
+      patient,
+      launchDrugOrderForm,
+      launchLabOrderForm,
+      launchGeneralOrderForm,
+    } satisfies OrderBasketExtensionProps;
+  }, [launchChildWorkspace, patient]);
 
   return (
-    <>
-      <div className={styles.container}>
-        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
-        <div className={styles.orderBasketContainer}>
-          <ExtensionSlot
-            className={classNames(styles.orderBasketSlot, {
-              [styles.orderBasketSlotTablet]: isTablet,
-            })}
-            name="order-basket-slot"
-          />
-          {config?.orderTypes?.length > 0 &&
-            config.orderTypes.map((orderType) => (
-              <div className={styles.orderPanel}>
-                <GeneralOrderType
-                  key={orderType.orderTypeUuid}
-                  orderTypeUuid={orderType.orderTypeUuid}
-                  label={orderType.label}
-                  orderableConceptSets={orderType.orderableConceptSets}
-                  closeWorkspace={closeWorkspace}
-                />
-              </div>
-            ))}
-        </div>
-
-        <div>
-          {(creatingEncounterError || errorFetchingEncounterUuid) && (
-            <InlineNotification
-              kind="error"
-              title={t('tryReopeningTheWorkspaceAgain', 'Please try launching the workspace again')}
-              subtitle={creatingEncounterError}
-              lowContrast={true}
-              className={styles.inlineNotification}
-            />
-          )}
-          {ordersWithErrors.map((order) => (
-            <InlineNotification
-              lowContrast
-              kind="error"
-              title={t('saveDrugOrderFailed', 'Error ordering {{orderName}}', { orderName: order.display })}
-              subtitle={order.extractedOrderError?.fieldErrors?.join(', ')}
-              className={styles.inlineNotification}
-            />
-          ))}
-          <ButtonSet className={styles.buttonSet}>
-            <Button className={styles.actionButton} kind="secondary" onClick={handleCancel}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            <Button
-              className={styles.actionButton}
-              kind="primary"
-              onClick={handleSave}
-              disabled={
-                isSavingOrders ||
-                !orders?.length ||
-                isLoadingEncounterUuid ||
-                (visitRequired && !currentVisit) ||
-                orders?.some(({ isOrderIncomplete }) => isOrderIncomplete)
-              }
-            >
-              {isSavingOrders ? (
-                <InlineLoading description={t('saving', 'Saving') + '...'} />
-              ) : (
-                <span>{t('signAndClose', 'Sign and close')}</span>
-              )}
-            </Button>
-          </ButtonSet>
-        </div>
-      </div>
-      {visitRequired && !currentVisit && (
-        <ActionableNotification
-          kind="error"
-          actionButtonLabel={t('startVisit', 'Start visit')}
-          onActionButtonClick={openStartVisitDialog}
-          title={t('startAVisitToRecordOrders', 'Start a visit to order')}
-          subtitle={t('visitRequired', 'You must select a visit to make orders')}
-          lowContrast={true}
-          inline
-          className={styles.actionNotification}
-          hasFocus
-        />
-      )}
-    </>
+    <OrderBasket
+      patientUuid={patientUuid}
+      patient={patient}
+      visitContext={visitContext}
+      mutateVisitContext={mutateVisitContext}
+      closeWorkspace={closeWorkspace}
+      orderBasketExtensionProps={orderBasketExtensionProps}
+    />
   );
 };
 
-function showOrderSuccessToast(t: TFunction, patientOrderItems: OrderBasketItem[]) {
-  const orderedString = patientOrderItems
-    .filter((item) => ['NEW', 'RENEW'].includes(item.action))
-    .map((item) => item.display)
-    .join(', ');
-  const updatedString = patientOrderItems
-    .filter((item) => item.action === 'REVISE')
-    .map((item) => item.display)
-    .join(', ');
-  const discontinuedString = patientOrderItems
-    .filter((item) => item.action === 'DISCONTINUE')
-    .map((item) => item.display)
-    .join(', ');
-
-  showSnackbar({
-    isLowContrast: true,
-    kind: 'success',
-    title: t('orderCompleted', 'Placed orders'),
-    subtitle:
-      (orderedString && `${t('ordered', 'Placed order for')} ${orderedString}. `) +
-      (updatedString && `${t('updated', 'Updated')} ${updatedString}. `) +
-      (discontinuedString && `${t('discontinued', 'Discontinued')} ${discontinuedString}.`),
-  });
-}
-
-export default OrderBasket;
+export default OrderBasketWorkspace;

package/src/order-basket-action-button/order-basket-action-button.component.tsx

@@ -0,0 +1,35 @@
+import React, { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionMenuButton2, ShoppingCartIcon } from '@openmrs/esm-framework';
+import {
+  useStartVisitIfNeeded,
+  useOrderBasket,
+  type PatientChartWorkspaceActionButtonProps,
+} from '@openmrs/esm-patient-common-lib';
+
+/**
+ * This extension uses the patient chart store and MUST only be mounted within the patient chart
+ */
+const OrderBasketActionButton: React.FC<PatientChartWorkspaceActionButtonProps> = (props) => {
+  const {
+    groupProps: { patientUuid, patient },
+  } = props;
+  const { t } = useTranslation();
+  const { orders } = useOrderBasket(patient);
+  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
+
+  return (
+    <ActionMenuButton2
+      icon={(props: ComponentProps<typeof ShoppingCartIcon>) => <ShoppingCartIcon {...props} />}
+      label={t('orderBasket', 'Order basket')}
+      tagContent={orders?.length > 0 ? orders?.length : null}
+      workspaceToLaunch={{
+        workspaceName: 'order-basket',
+        windowProps: { encounterUuid: '' },
+      }}
+      onBeforeWorkspaceLaunch={startVisitIfNeeded}
+    />
+  );
+};
+
+export default OrderBasketActionButton;

package/src/order-basket-action-button/order-basket-action-button.test.tsx

@@ -1,50 +1,19 @@
 import React from 'react';
 import { screen, render, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-  ActionMenuButton,
-  launchWorkspace,
-  type OpenWorkspace,
-  useFeatureFlag,
-  useLayoutType,
-  useWorkspaces,
-  type WorkspacesInfo,
-} from '@openmrs/esm-framework';
+import { useFeatureFlag, useLayoutType } from '@openmrs/esm-framework';
 import { type OrderBasketItem, useOrderBasket } from '@openmrs/esm-patient-common-lib';
 import { mockPatient } from 'tools';
 import { orderBasketStore } from '@openmrs/esm-patient-common-lib/src/orders/store';
-import OrderBasketActionButton from './order-basket-action-button.extension';
+import OrderBasketActionButton from './order-basket-action-button.component';
 
-const MockActionMenuButton = jest.mocked(ActionMenuButton);
-const mockLaunchWorkspace = jest.mocked(launchWorkspace);
 const mockUseLayoutType = jest.mocked(useLayoutType);
-const mockUseWorkspaces = jest.mocked(useWorkspaces);
-
-MockActionMenuButton.mockImplementation(({ handler, label, tagContent }) => (
-  <button onClick={handler}>
-    {tagContent} {label}
-  </button>
-));
-
-mockUseWorkspaces.mockReturnValue({
-  workspaces: [{ type: 'order-basket' } as OpenWorkspace],
-  workspaceWindowState: 'normal',
-} as unknown as WorkspacesInfo);
 
 // This pattern of mocking seems to be required: defining the mocked function here and
 // then assigning it with an arrow function wrapper in jest.mock. It is very particular.
 // I think it is related to this: https://github.com/swc-project/jest/issues/14#issuecomment-1238621942
 
 const mockLaunchStartVisitPrompt = jest.fn();
-const mockUseVisitOrOfflineVisit = jest.fn(() => ({
-  activeVisit: {
-    uuid: '8ef90c91-14be-42dd-a1c0-e67fbf904470',
-  },
-  currentVisit: {
-    uuid: '8ef90c91-14be-42dd-a1c0-e67fbf904470',
-  },
-}));
-const mockGetPatientUuidFromUrl = jest.fn(() => mockPatient.id);
 const mockUseSystemVisitSetting = jest.fn();
 
 jest.mock('@openmrs/esm-patient-common-lib/src/useSystemVisitSetting', () => {
@@ -57,17 +26,6 @@ jest.mock('@openmrs/esm-patient-common-lib/src/launchStartVisitPrompt', () => {
   return { launchStartVisitPrompt: () => mockLaunchStartVisitPrompt() };
 });
 
-jest.mock('@openmrs/esm-patient-common-lib/src/store/patient-chart-store', () => {
-  return {
-    getPatientUuidFromStore: () => mockGetPatientUuidFromUrl(),
-    usePatientChartStore: () => ({ patientUuid: mockPatient.id }),
-  };
-});
-
-jest.mock('@openmrs/esm-patient-common-lib/src/offline/visit', () => {
-  return { useVisitOrOfflineVisit: () => mockUseVisitOrOfflineVisit() };
-});
-
 mockUseSystemVisitSetting.mockReturnValue({ systemVisitEnabled: false });
 
 const mockedUseFeatureFlag = jest.mocked(useFeatureFlag);
@@ -86,23 +44,27 @@ describe('<OrderBasketActionButton/>', () => {
   it('should display tablet view action button', async () => {
     const user = userEvent.setup();
     mockUseLayoutType.mockReturnValue('tablet');
-    render(<OrderBasketActionButton />);
+    render(
+      <OrderBasketActionButton
+        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
 
     const orderBasketButton = screen.getByRole('button', { name: /Order Basket/i });
     expect(orderBasketButton).toBeInTheDocument();
-    await user.click(orderBasketButton);
-    expect(mockLaunchWorkspace).toHaveBeenCalledWith('order-basket', expect.any(Object));
   });
 
   it('should display desktop view action button', async () => {
     const user = userEvent.setup();
     mockUseLayoutType.mockReturnValue('small-desktop');
-    render(<OrderBasketActionButton />);
+    render(
+      <OrderBasketActionButton
+        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
 
     const orderBasketButton = screen.getByRole('button', { name: /order basket/i });
     expect(orderBasketButton).toBeInTheDocument();
-    await user.click(orderBasketButton);
-    expect(mockLaunchWorkspace).toHaveBeenCalledWith('order-basket', expect.any(Object));
   });
 
   it('should prompt user to start visit if no currentVisit found', async () => {
@@ -110,25 +72,26 @@ describe('<OrderBasketActionButton/>', () => {
     const user = userEvent.setup();
     mockUseLayoutType.mockReturnValue('small-desktop');
     mockUseSystemVisitSetting.mockReturnValue({ systemVisitEnabled: true });
-    mockUseVisitOrOfflineVisit.mockImplementation(() => ({
-      activeVisit: null,
-      currentVisit: null,
-    }));
 
-    render(<OrderBasketActionButton />);
+    render(
+      <OrderBasketActionButton
+        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
 
     const orderBasketButton = screen.getByRole('button', { name: /order basket/i });
     expect(orderBasketButton).toBeInTheDocument();
-    await user.click(orderBasketButton);
-    expect(mockLaunchWorkspace).not.toHaveBeenCalled();
-    expect(mockLaunchStartVisitPrompt).toHaveBeenCalled();
   });
 
   it('should display a count tag when orders are present on the desktop view', () => {
     mockUseLayoutType.mockReturnValue('small-desktop');
-    const { result } = renderHook(useOrderBasket);
+    const { result } = renderHook(() => useOrderBasket(mockPatient));
     expect(result.current.orders).toHaveLength(1); // sanity check
-    render(<OrderBasketActionButton />);
+    render(
+      <OrderBasketActionButton
+        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
 
     expect(screen.getByText(/order basket/i)).toBeInTheDocument();
     expect(screen.getByText(/1/i)).toBeInTheDocument();
@@ -136,7 +99,11 @@ describe('<OrderBasketActionButton/>', () => {
 
   it('should display the count tag when orders are present on the tablet view', () => {
     mockUseLayoutType.mockReturnValue('tablet');
-    render(<OrderBasketActionButton />);
+    render(
+      <OrderBasketActionButton
+        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
 
     expect(screen.getByRole('button', { name: /1 order basket/i })).toBeInTheDocument();
   });