(feat) O3-3816 Add tab for rejected orders and prevent further actions on Declined Tests

Author: CynthiaKamau

package.json

@@ -56,7 +56,7 @@
     "react-router-dom": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-framework": "^5.8.2-pre.2512",
     "@openmrs/esm-patient-common-lib": "next",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.62",
@@ -87,7 +87,7 @@
     "jest-cli": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^14.0.1",
-    "openmrs": "next",
+    "openmrs": "^5.8.2-pre.2512",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
     "raw-loader": "^4.0.2",

src/components/orders-table/list-order-details.component.tsx

@@ -31,19 +31,6 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
               <span className={styles.orderDate}>
                 {t('orderDate', 'Order Date:')} {row.dateActivated}
               </span>
-            </div>
-            <div className={styles.orderStatus}>
-              {t('orderStatus', 'Status:')}
-              <Tag size="lg" type={row.fulfillerStatus ? 'green' : 'red'}>
-                {row.fulfillerStatus || t('orderNotPicked', 'Order not picked')}
-              </Tag>
-            </div>
-            <div>
-              <div className={styles.orderUrgency}>
-                <span className={styles.urgencyStatus}>
-                  {t('urgencyStatus', 'Urgency: ')} {capitalize(row.urgency)}
-                </span>
-              </div>
               <StructuredListWrapper>
                 <StructuredListBody>
                   <StructuredListRow>
@@ -86,6 +73,12 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                   </AccordionItem>
                 </Accordion>
               )}
+              {row.fulfillerStatus === 'DECLINED' && (
+                <StructuredListRow>
+                  <StructuredListCell> {t('reasonForDecline', 'Reason for decline:')}</StructuredListCell>
+                  <StructuredListCell>{row.fulfillerComment}</StructuredListCell>
+                </StructuredListRow>
+              )}
               <StructuredListRow>
                 <StructuredListCell>
                   <span className={styles.nameOrder}>

src/components/orders-table/list-order-details.scss

@@ -15,7 +15,6 @@
 .nameOrder {
   // TODO: Prefer type styles over scales as mentioned here: https://carbondesignsystem.com/elements/typography/code/#type-scale
   font-size: type.type-scale(2);
-  margin-left: layout.$spacing-04;
 }
 
 .testOrder {

src/index.ts

@@ -52,6 +52,11 @@ export const completedLabRequestsTable = getAsyncLifecycle(
   options,
 );
 
+export const declinedLabRequestsTable = getAsyncLifecycle(
+  () => import('./lab-tabs/data-table-extensions/declined-lab-requests-table-extension'),
+  options,
+);
+
 export const worklistTile = getAsyncLifecycle(
   () => import('./lab-tiles/in-progress-lab-requests-tile.component'),
   options,

src/lab-tabs/data-table-extensions/declined-lab-requests-table-extension.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import OrdersDataTable from '../../components/orders-table/orders-data-table.component';
+
+const DeclinedLabRequestsTable: React.FC = () => {
+  return (
+    <OrdersDataTable
+      fulfillerStatus="DECLINED"
+      excludeColumns={[]}
+      excludeCanceledAndDiscontinuedOrders={false}
+      actions={[]}
+    />
+  );
+};
+
+export default DeclinedLabRequestsTable;

src/lab-tabs/modals/reject-lab-request-modal.component.tsx

@@ -1,11 +1,18 @@
 import React, { useState } from 'react';
 import { Button, Form, ModalBody, ModalFooter, ModalHeader, TextArea, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { showNotification, showSnackbar, useAbortController } from '@openmrs/esm-framework';
 import { type Order } from '@openmrs/esm-patient-common-lib';
+import {
+  type Config,
+  restBaseUrl,
+  showNotification,
+  showSnackbar,
+  useAbortController,
+  useConfig,
+} from '@openmrs/esm-framework';
 import { rejectLabOrder } from '../../laboratory-resource';
 import styles from './reject-lab-request-modal.scss';
-
+import { mutate } from 'swr';
 interface RejectLabRequestModalProps {
   order: Order;
   closeModal: () => void;
@@ -16,12 +23,19 @@ const RejectLabRequestModal: React.FC<RejectLabRequestModalProps> = ({ order, cl
   const [fulfillerComment, setFulfillerComment] = useState('');
   const abortController = useAbortController();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const { laboratoryOrderTypeUuid } = useConfig<Config>();
 
   const handleRejectOrder = async (event) => {
     event.preventDefault();
     setIsSubmitting(true);
     rejectLabOrder(order.uuid, fulfillerComment, abortController).then(
       () => {
+        mutate(
+          (key) =>
+            typeof key === 'string' && key.startsWith(`${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}`),
+          undefined,
+          { revalidate: true },
+        );
         setIsSubmitting(false);
         closeModal();
         showSnackbar({

src/routes.json

@@ -87,6 +87,15 @@
         "title": "Referred Tests"
       }
     },
+    {
+      "name": "declined-tile-component",
+      "slot": "lab-panels-slot",
+      "component": "declinedLabRequestsTable",
+      "meta": {
+          "name": "declinedPanel",
+          "title": "Declined tests"
+      }
+    },
     {
       "name": "pick-lab-request-action",
       "component": "pickupLabRequestAction",

translations/en.json

@@ -26,18 +26,17 @@
   "orderDate": "Order Date:",
   "ordererName": "Orderer Name: ",
   "orderInStruction": "Instructions: ",
-  "orderNotPicked": "Order not picked",
   "orderNumbers": "Order number:",
   "orderPickedSuccessfully": "You have successfully picked an order",
   "orders": "Orders",
-  "orderStatus": "Status:",
   "patient": "Patient",
   "pickedAnOrder": "Picked an order",
   "pickLabRequest": "Pick Lab Request",
   "pickRequest": "Pick lab request",
   "pickRequestConfirmationText": "Continuing will update the request status to \"In Progress\" and advance it to the next stage. Are you sure you want to proceed?",
   "pickupLabRequest": "Pick up lab request",
   "previousPage": "Previous page",
+  "reasonForDecline": "Reason for decline",
   "receivedStatus": "RECEIVED",
   "reject": "Reject",
   "rejectLabRequest": "Reject lab request",
@@ -50,7 +49,6 @@
   "testsOrdered": "Tests ordered",
   "testType": "Test type",
   "totalOrders": "Total orders",
-  "urgencyStatus": "Urgency: ",
   "viewTestResults": "View test results",
   "worklist": "Worklist"
 }