(feat) O3-4400 - render queue entry status in patient banner (#1497)

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx

@@ -110,7 +110,7 @@ export const AddressComponent: React.FC = () => {
           style={{ margin: '0', minWidth: '100%' }}
           kind="error"
           lowContrast={true}
-          title={t('errorFetchingOrderedFields', 'Error occured fetching ordered fields for address hierarchy')}
+          title={t('errorFetchingOrderedFields', 'Error occurred fetching ordered fields for address hierarchy')}
         />
       </AddressComponentContainer>
     );

packages/esm-service-queues-app/src/index.ts

@@ -43,11 +43,6 @@ export const editQueueEntryStatusModal = getAsyncLifecycle(
   },
 );
 
-export const patientInfoBannerSlot = getAsyncLifecycle(() => import('./patient-info/patient-info.component'), {
-  featureName: 'patient info slot',
-  moduleName,
-});
-
 export const removeQueueEntry = getAsyncLifecycle(
   () => import('./remove-queue-entry-dialog/remove-queue-entry.component'),
   {
@@ -169,6 +164,14 @@ export const activeVisitsRowActions = getAsyncLifecycle(
   },
 );
 
+export const patientBannerQueueEntryStatus = getAsyncLifecycle(
+  () => import('./patient-info/patient-banner-queue-entry-status.extension'),
+  {
+    featureName: 'patient-info-queue-entry-status',
+    moduleName,
+  },
+);
+
 export function startupApp() {
   registerBreadcrumbs([]);
 

packages/esm-service-queues-app/src/patient-info/patient-banner-queue-entry-status.extension.tsx

@@ -0,0 +1,67 @@
+import { Tag , Button } from '@carbon/react';
+import React from 'react';
+import { useQueueEntries } from '../hooks/useQueueEntries';
+import styles from './patient-banner-queue-entry-status.scss';
+import { useTranslation } from 'react-i18next';
+import { isDesktop, showModal, useLayoutType } from '@openmrs/esm-framework';
+
+// See: patient-banner-patient-info.component.tsx
+interface PatientBannerQueueEntryStatusProps {
+  patientUuid: string;
+  renderedFrom: string;
+}
+
+/**
+ * This extension appears in the patient banner to indicate the patient's
+ * queue entry status, with a quick link to transition them to q new queue / status
+ */
+const PatientBannerQueueEntryStatus: React.FC<PatientBannerQueueEntryStatusProps> = ({ patientUuid, renderedFrom }) => {
+  const { queueEntries } = useQueueEntries({ patient: patientUuid, isEnded: false });
+  const layout = useLayoutType();
+  const queueEntry = queueEntries?.[0];
+  const { t } = useTranslation();
+  const isPatientChart = renderedFrom === 'patient-chart';
+  if (!isPatientChart || !queueEntry) {
+    return <></>;
+  }
+
+  const mappedPriority = queueEntry.priority.display === 'Urgent' ? 'Priority' : queueEntry.priority.display;
+
+  return (
+    <div className={styles.queueEntryStatusContainer}>
+      <span className={styles.separator}>&middot;</span>
+      <span>{queueEntry.queue.name}</span>
+      <Tag
+        className={mappedPriority === 'Priority' ? styles.priorityTag : styles.tag}
+        type={getTagType(mappedPriority?.toLocaleLowerCase('en'))}>
+        {mappedPriority}
+      </Tag>
+      <Button
+        kind="ghost"
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+        onClick={() => {
+          const dispose = showModal('transition-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+          });
+        }}>
+        {t('change', 'Change')}
+      </Button>
+    </div>
+  );
+};
+
+// The color of the priority tag should not be hard coded, see:
+// https://openmrs.atlassian.net/browse/O3-4469
+const getTagType = (priority: string) => {
+  switch (priority) {
+    case 'emergency':
+      return 'red';
+    case 'not urgent':
+      return 'green';
+    default:
+      return 'gray';
+  }
+};
+
+export default PatientBannerQueueEntryStatus;

packages/esm-service-queues-app/src/patient-info/patient-banner-queue-entry-status.scss

@@ -0,0 +1,29 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.queueEntryStatusContainer {
+  display: flex;
+  align-items: baseline;
+  gap: layout.$spacing-02;
+}
+
+.navDivider {
+  background-color: var(--brand-03);
+  width: 0.05rem;
+  height: 1.5rem;
+}
+
+.tag {
+  margin: layout.$spacing-02 0;
+  min-width: layout.$spacing-10;
+}
+
+.priorityTag {
+  @extend .tag;
+  @include type.type-style('label-01');
+  color: #943d00;
+  background-color: #ffc9a3;
+  min-width: layout.$spacing-10;
+}