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

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

@@ -0,0 +1,31 @@
+import React, { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionMenuButton, ShoppingCartIcon } from '@openmrs/esm-framework';
+import { useLaunchWorkspaceRequiringVisit, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+
+interface OrderBasketActionButtonProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+/**
+ * This extension uses the patient chart store and MUST only be mounted within the patient chart
+ */
+const OrderBasketActionButton: React.FC<OrderBasketActionButtonProps> = ({ patientUuid, patient }) => {
+  const { t } = useTranslation();
+  const { orders } = useOrderBasket(patient);
+  const launchOrderBasket = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
+
+  return (
+    <ActionMenuButton
+      getIcon={(props: ComponentProps<typeof ShoppingCartIcon>) => <ShoppingCartIcon {...props} />}
+      label={t('orderBasket', 'Order basket')}
+      iconDescription={t('medications', 'Medications')}
+      handler={launchOrderBasket}
+      type={'order'}
+      tagContent={orders?.length > 0 ? orders?.length : null}
+    />
+  );
+};
+
+export default OrderBasketActionButton;

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

@@ -1,13 +1,35 @@
 import React from 'react';
 import { screen, render, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useFeatureFlag, useLayoutType } from '@openmrs/esm-framework';
+import {
+  ActionMenuButton,
+  launchWorkspace,
+  type OpenWorkspace,
+  useFeatureFlag,
+  useLayoutType,
+  useWorkspaces,
+  type WorkspacesInfo,
+} 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.component';
+import OrderBasketActionButton from './order-basket-action-button.extension';
 
+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.
@@ -44,27 +66,23 @@ describe('<OrderBasketActionButton/>', () => {
   it('should display tablet view action button', async () => {
     const user = userEvent.setup();
     mockUseLayoutType.mockReturnValue('tablet');
-    render(
-      <OrderBasketActionButton
-        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<OrderBasketActionButton patient={mockPatient} patientUuid={mockPatient.id} />);
 
     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
-        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<OrderBasketActionButton patient={mockPatient} patientUuid={mockPatient.id} />);
 
     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 () => {
@@ -73,25 +91,20 @@ describe('<OrderBasketActionButton/>', () => {
     mockUseLayoutType.mockReturnValue('small-desktop');
     mockUseSystemVisitSetting.mockReturnValue({ systemVisitEnabled: true });
 
-    render(
-      <OrderBasketActionButton
-        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<OrderBasketActionButton patient={mockPatient} patientUuid={mockPatient.id} />);
 
     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(mockPatient));
     expect(result.current.orders).toHaveLength(1); // sanity check
-    render(
-      <OrderBasketActionButton
-        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<OrderBasketActionButton patient={mockPatient} patientUuid={mockPatient.id} />);
 
     expect(screen.getByText(/order basket/i)).toBeInTheDocument();
     expect(screen.getByText(/1/i)).toBeInTheDocument();
@@ -99,11 +112,7 @@ describe('<OrderBasketActionButton/>', () => {
 
   it('should display the count tag when orders are present on the tablet view', () => {
     mockUseLayoutType.mockReturnValue('tablet');
-    render(
-      <OrderBasketActionButton
-        groupProps={{ patient: mockPatient, patientUuid: mockPatient.id, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<OrderBasketActionButton patient={mockPatient} patientUuid={mockPatient.id} />);
 
     expect(screen.getByRole('button', { name: /1 order basket/i })).toBeInTheDocument();
   });

package/src/order-cancellation-form/cancel-order-form.component.tsx

@@ -5,19 +5,20 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button, TextArea, ButtonSet, Column, Form, InlineNotification, Stack, InlineLoading } from '@carbon/react';
-import { OpenmrsDatePicker, showSnackbar, useLayoutType, Workspace2 } from '@openmrs/esm-framework';
-import { type Order, type PatientWorkspace2DefinitionProps, usePatientOrders } from '@openmrs/esm-patient-common-lib';
+import { OpenmrsDatePicker, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { type DefaultPatientWorkspaceProps, usePatientOrders, type Order } from '@openmrs/esm-patient-common-lib';
 import { cancelOrder } from './cancel-order.resource';
 import styles from './cancel-order-form.scss';
 
-interface OrderCancellationFormProps {
+interface OrderCancellationFormProps extends DefaultPatientWorkspaceProps {
   order: Order;
 }
 
-const OrderCancellationForm: React.FC<PatientWorkspace2DefinitionProps<OrderCancellationFormProps, {}>> = ({
-  workspaceProps: { order },
-  groupProps: { patientUuid },
+const OrderCancellationForm: React.FC<OrderCancellationFormProps> = ({
+  order,
+  patientUuid,
   closeWorkspace,
+  promptBeforeClosing,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -56,6 +57,10 @@ const OrderCancellationForm: React.FC<PatientWorkspace2DefinitionProps<OrderCanc
     }
   }
 
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
   const cancelOrderRequest = useCallback(
     (data: CancelOrderFormData) => {
       const formData = data;
@@ -93,84 +98,82 @@ const OrderCancellationForm: React.FC<PatientWorkspace2DefinitionProps<OrderCanc
   );
 
   return (
-    <Workspace2 title={t('orderCancellation', 'Order cancellation')} hasUnsavedChanges={isDirty}>
-      <Form className={styles.form}>
-        <div className={styles.grid}>
-          <Stack>
-            <section>
-              <h4 className={styles.orderDisplay}>{order?.display}</h4>
-            </section>
-            <section>
-              <Controller
-                name="cancellationDate"
-                control={control}
-                render={({ field, fieldState }) => (
-                  <div className={styles.row}>
-                    <OpenmrsDatePicker
-                      {...field}
-                      id="cancellationDate"
-                      minDate={dayjs().startOf('day')}
-                      labelText={t('cancellationDate', 'Cancellation date')}
-                      invalid={Boolean(fieldState?.error?.message)}
-                      invalidText={fieldState?.error?.message}
-                    />
-                  </div>
-                )}
-              />
-            </section>
-            <section>
-              <Controller
-                name="reasonForCancellation"
-                control={control}
-                render={({ field: { onChange, value } }) => (
-                  <div className={styles.row}>
-                    <TextArea
-                      type="text"
-                      id="reasonForCancellation"
-                      labelText={t('reasonForCancellation', 'Reason for cancellation')}
-                      value={value}
-                      onChange={(evt) => onChange(evt.target.value)}
-                      invalid={!!errors['reasonForCancellation']}
-                      invalidText={!!errors['reasonForCancellation'] && errors['reasonForCancellation'].message}
-                    />
-                  </div>
-                )}
-              />
-            </section>
-          </Stack>
-        </div>
-
-        {showErrorNotification && (
-          <Column className={styles.errorContainer}>
-            <InlineNotification
-              lowContrast
-              title={t('error', 'Error')}
-              subtitle={t('pleaseFillRequiredFields', 'Please fill all the required fields') + '.'}
-              onClose={() => setShowErrorNotification(false)}
+    <Form className={styles.form}>
+      <div className={styles.grid}>
+        <Stack>
+          <section>
+            <h4 className={styles.orderDisplay}>{order?.display}</h4>
+          </section>
+          <section>
+            <Controller
+              name="cancellationDate"
+              control={control}
+              render={({ field, fieldState }) => (
+                <div className={styles.row}>
+                  <OpenmrsDatePicker
+                    {...field}
+                    id="cancellationDate"
+                    minDate={dayjs().startOf('day')}
+                    labelText={t('cancellationDate', 'Cancellation date')}
+                    invalid={Boolean(fieldState?.error?.message)}
+                    invalidText={fieldState?.error?.message}
+                  />
+                </div>
+              )}
             />
-          </Column>
-        )}
+          </section>
+          <section>
+            <Controller
+              name="reasonForCancellation"
+              control={control}
+              render={({ field: { onChange, value } }) => (
+                <div className={styles.row}>
+                  <TextArea
+                    type="text"
+                    id="reasonForCancellation"
+                    labelText={t('reasonForCancellation', 'Reason for cancellation')}
+                    value={value}
+                    onChange={(evt) => onChange(evt.target.value)}
+                    invalid={!!errors['reasonForCancellation']}
+                    invalidText={!!errors['reasonForCancellation'] && errors['reasonForCancellation'].message}
+                  />
+                </div>
+              )}
+            />
+          </section>
+        </Stack>
+      </div>
+
+      {showErrorNotification && (
+        <Column className={styles.errorContainer}>
+          <InlineNotification
+            lowContrast
+            title={t('error', 'Error')}
+            subtitle={t('pleaseFillRequiredFields', 'Please fill all the required fields') + '.'}
+            onClose={() => setShowErrorNotification(false)}
+          />
+        </Column>
+      )}
 
-        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-            {t('discard', 'Discard')}
-          </Button>
-          <Button
-            className={styles.button}
-            kind="primary"
-            onClick={handleSubmit(cancelOrderRequest, onError)}
-            disabled={isSubmitting}
-            type="submit"
-          >
-            {isSubmitting ? (
-              <InlineLoading description={t('saving', 'Saving') + '...'} />
-            ) : (
-              t('saveAndClose', 'Save and close')
-            )}
-          </Button>
-        </ButtonSet>
-      </Form>
-    </Workspace2>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button
+          className={styles.button}
+          kind="primary"
+          onClick={handleSubmit(cancelOrderRequest, onError)}
+          disabled={isSubmitting}
+          type="submit"
+        >
+          {isSubmitting ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} />
+          ) : (
+            t('saveAndClose', 'Save and close')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
   );
 };
 

package/src/routes.json

@@ -21,6 +21,14 @@
       "slot": "order-item-additional-info-slot",
       "order": 1
     },
+    {
+      "name": "order-basket-action-menu",
+      "component": "orderBasketActionMenu",
+      "slots": [
+        "action-menu-patient-chart-items-slot",
+        "action-menu-ward-patient-items-slot"
+      ]
+    },
     {
       "name": "lab-result",
       "component": "labResult",
@@ -55,33 +63,33 @@
       }
     }
   ],
-  "workspaces2": [
+  "workspaces": [
     {
       "name": "order-basket",
+      "title": "orderBasketWorkspaceTitle",
       "component": "orderBasketWorkspace",
-      "window": "patient-chart-order-basket"
+      "type": "order",
+      "canHide": true
+    },
+    {
+      "name": "patient-orders-form-workspace",
+      "title": "orderCancellation",
+      "component": "patientOrdersFormWorkspace",
+      "type": "order",
+      "canHide": false
     },
     {
       "name": "test-results-form-workspace",
+      "title": "enterTestResults",
       "component": "testResultsFormWorkspace",
-      "window": "lab-results"
+      "type": "lab-results",
+      "canHide": false
     },
     {
       "name": "orderable-concept-workspace",
-      "component": "addGeneralOrderWorkspace",
-      "window": "patient-chart-order-basket"
-    }
-  ],
-  "workspaceWindows2": [
-    {
-      "name": "patient-chart-order-basket",
-      "icon": "ShoppingCartIcon",
-      "group": "patient-chart",
-      "order": 1
-    },
-    {
-      "name": "lab-results",
-      "group": "patient-chart"
+      "title": "searchOrderables",
+      "component": "orderableConceptSearch",
+      "type": "order"
     }
   ],
   "modals": [

package/src/utils/index.ts

@@ -1,10 +1,4 @@
-import {
-  type DrugOrderBasketItem,
-  type TestOrderBasketItem,
-  type Order,
-  type OrderAction,
-  type OrderBasketItem,
-} from '@openmrs/esm-patient-common-lib';
+import { type Order, type OrderAction, type OrderBasketItem } from '@openmrs/esm-patient-common-lib';
 import { type ObservationValue } from '../types/encounter';
 
 /**
@@ -30,7 +24,7 @@ export function compare<T>(x?: T, y?: T) {
 /**
  * Builds medication order object from the given order object
  */
-export function buildMedicationOrder(order: Order, action?: OrderAction): DrugOrderBasketItem {
+export function buildMedicationOrder(order: Order, action?: OrderAction) {
   return {
     display: order.drug?.display,
     previousOrder: action !== 'NEW' ? order.uuid : null,
@@ -70,15 +64,13 @@ export function buildMedicationOrder(order: Order, action?: OrderAction): DrugOr
       value: order.quantityUnits?.display,
       valueCoded: order.quantityUnits?.uuid,
     },
-    encounterUuid: order.encounter?.uuid,
-    visit: order.encounter.visit,
   };
 }
 
 /**
  * Builds lab order object from the given order object
  */
-export function buildLabOrder(order: Order, action?: OrderAction): TestOrderBasketItem {
+export function buildLabOrder(order: Order, action?: OrderAction) {
   return {
     action: action,
     display: order.display,
@@ -97,8 +89,6 @@ export function buildLabOrder(order: Order, action?: OrderAction): TestOrderBask
     orderType: order.orderType.uuid,
     specimenSource: null,
     scheduledDate: order.scheduledDate ? new Date(order.scheduledDate) : null,
-    encounterUuid: order.encounter?.uuid,
-    visit: order.encounter.visit,
   };
 }
 
@@ -119,8 +109,6 @@ export function buildGeneralOrder(order: Order, action?: OrderAction): OrderBask
     orderNumber: order.orderNumber,
     orderType: order.orderType.uuid,
     scheduledDate: order.scheduledDate ? new Date(order.scheduledDate) : null,
-    encounterUuid: order.encounter?.uuid,
-    visit: order.encounter.visit,
   };
 }
 

package/translations/am.json

@@ -4,31 +4,29 @@
   "additionalInstructions": "Additional instructions",
   "addMedication": "Add medication",
   "addOrderableForOrderType": "Add {{orderTypeDisplay}}",
+  "addOrderTests": "Add Tests to this order",
   "addResults": "Add results",
   "allOrders": "All orders",
   "backToOrderBasket": "Back to order basket",
   "cancel": "Cancel",
-  "cancellationDate": "Cancellation date",
-  "cancellationDateRequired": "Cancellation date is required",
   "cancelOrder": "Cancel order",
   "checkFilters": "Check the filters above",
   "chooseAnOption": "Choose an option",
   "clearSearchResults": "Clear results",
-  "dateCannotBeBeforeToday": "Date cannot be before today",
   "dateOfOrder": "Date of order",
   "dateRange": "Date range",
   "directlyAddToBasket": "Add to basket",
   "discard": "Discard",
-  "discontinued": "Discontinued",
   "dosage": "Dosage",
   "dose": "Dose",
   "drugOrders": "drug orders",
+  "editOrderableForOrderType": "Edit {{orderTypeDisplay}}",
   "editResults": "Edit results",
   "endDate": "End date",
   "enterTestResults": "Enter test results",
   "error": "Error",
-  "errorCancellingOrder": "Error cancelling order",
   "errorFetchingTestTypes": "Error fetching results for \"{{searchTerm}}\"",
+  "errorSavingDrugOrder": "Error saving order",
   "errorSavingLabResults": "Error saving lab results",
   "goToDrugOrderForm": "Order form",
   "indication": "Indication",
@@ -44,7 +42,6 @@
   "loadingTestDetails": "Loading test details",
   "medicationDurationAndUnit": "for {{duration}} {{durationUnit}}",
   "medicationIndefiniteDuration": "Indefinite duration",
-  "medications": "Medications",
   "modifyOrder": "Modify order",
   "noIndicationProvided": "No indication provided",
   "noMatchingOrdersToDisplay": "No matching orders to display",
@@ -63,11 +60,7 @@
   "orderActionRevise": "Modify",
   "orderBasket": "Order basket",
   "orderBasketWorkspaceTitle": "Order basket",
-  "orderCancellation": "Order cancellation",
-  "orderCancelled": "Order cancelled",
-  "orderCompleted": "Placed orders",
   "orderDetails": "Order details",
-  "ordered": "Placed order for",
   "orderedBy": "Ordered by",
   "ordererInformation": "Orderer information",
   "orderNumber": "Order number",
@@ -77,7 +70,6 @@
   "orderType": "Order type",
   "outOfStock": "Out of stock",
   "pleaseFillField": "Please fill at least one field",
-  "pleaseFillRequiredFields": "Please fill all the required fields",
   "pleaseRequiredFields": "Please fill all required fields",
   "price": "Price",
   "priceDisclaimer": "This price is indicative and may not reflect final costs, which could vary due to discounts, insurance coverage, or other pricing rules",
@@ -87,8 +79,6 @@
   "priority": "Priority",
   "priorityRequired": "Priority is required",
   "quantity": "Quantity",
-  "reasonForCancellation": "Reason for cancellation",
-  "reasonForCancellationRequired": "Reason for cancellation is required",
   "referenceNumber": "Reference number",
   "referenceNumberTableHeader": "{{orderType}} reference number",
   "refills": "Refills",
@@ -99,30 +89,26 @@
   "saveDrugOrderFailed": "Error ordering {{orderName}}",
   "saveLabResults": "Save lab results",
   "saveOrder": "Save order",
+  "saveTests": "Save tests",
   "saving": "Saving",
   "scheduledDate": "Scheduled date",
   "scheduledDateRequired": "Scheduled date is required",
   "searchAgain": "search again",
   "searchFieldOrder": "Search for {{orderType}} order",
-  "searchOrderables": "Search orderables",
   "searchResultsMatchesForTerm_one": "{{count}} results for \"{{searchTerm}}\"",
   "searchResultsMatchesForTerm_other": "{{count}} results for \"{{searchTerm}}\"",
   "searchTable": "Search table",
   "selectOrderType": "Select order type",
   "signAndClose": "Sign and close",
-  "startAVisitToRecordOrders": "Start a visit to order",
-  "startVisit": "Start visit",
   "status": "Status",
-  "successfullyCancelledOrder": "Order {{orderNumber}} has been cancelled successfully",
   "successfullySavedLabResults": "Lab results for {{orderNumber}} have been successfully updated",
+  "successSavingDrugOrder": "Order saved",
   "test": "Test",
   "testOrders": "test orders",
   "testType": "Test type",
   "tryReopeningTheWorkspaceAgain": "Please try launching the workspace again",
   "trySearchingAgain": "Please try searching again",
   "tryTo": "Try to",
-  "updated": "Updated",
   "usingADifferentTerm": "using a different term",
-  "view": "View",
-  "visitRequired": "A visit is required to make orders"
+  "view": "View"
 }