@kenyaemr/esm-service-queues-app 8.1.1-pre.129 → 8.1.2-pre.154

package/src/create-queue-entry/create-queue-entry.workspace.tsx

@@ -0,0 +1,99 @@
+import { Button, DataTableSkeleton } from '@carbon/react';
+import {
+  ArrowLeftIcon,
+  ErrorState,
+  ExtensionSlot,
+  getPatientName,
+  PatientBannerContactDetails,
+  PatientBannerPatientInfo,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
+  usePatient,
+  useVisit,
+  type DefaultWorkspaceProps,
+} from '@openmrs/esm-framework';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './create-queue-entry.scss';
+import ExistingVisitFormComponent from './existing-visit-form/existing-visit-form.component';
+
+interface PatientSearchProps extends DefaultWorkspaceProps {
+  selectedPatientUuid: string;
+  currentServiceQueueUuid?: string;
+  handleBackToSearchList?: () => void;
+}
+
+export const AddPatientToQueueContext = React.createContext({
+  currentServiceQueueUuid: '',
+});
+
+/**
+ *
+ * This is the component that appears when clicking on a search result in the "Add patient to queue" workspace,
+ */
+const CreateQueueEntryWorkspace: React.FC<PatientSearchProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  selectedPatientUuid,
+  currentServiceQueueUuid,
+  handleBackToSearchList,
+}) => {
+  const { t } = useTranslation();
+  const { patient } = usePatient(selectedPatientUuid);
+  const { activeVisit, isLoading, error } = useVisit(selectedPatientUuid);
+
+  const [showContactDetails, setContactDetails] = useState(false);
+
+  const patientName = patient && getPatientName(patient);
+
+  return patient ? (
+    <div className={styles.patientSearchContainer}>
+      <AddPatientToQueueContext.Provider value={{ currentServiceQueueUuid }}>
+        <div className={styles.patientBannerContainer}>
+          <div className={styles.patientBanner}>
+            <div className={styles.patientPhoto}>
+              <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+            </div>
+            <PatientBannerPatientInfo patient={patient} />
+            <PatientBannerToggleContactDetailsButton
+              showContactDetails={showContactDetails}
+              toggleContactDetails={() => setContactDetails(!showContactDetails)}
+            />
+          </div>
+          {showContactDetails ? (
+            <PatientBannerContactDetails patientId={patient.id} deceased={patient.deceasedBoolean} />
+          ) : null}
+        </div>
+        <div className={styles.backButton}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
+            iconDescription={t('backToSearchResults', 'Back to search results')}
+            size="sm"
+            onClick={() => handleBackToSearchList?.()}>
+            <span>{t('backToSearchResults', 'Back to search results')}</span>
+          </Button>
+        </div>
+        {isLoading ? (
+          <DataTableSkeleton role="progressbar" />
+        ) : error ? (
+          <ErrorState headerTitle={t('errorFetchingVisit', 'Error fetching patient visit')} error={error} />
+        ) : activeVisit ? (
+          <ExistingVisitFormComponent visit={activeVisit} closeWorkspace={closeWorkspace} />
+        ) : (
+          <ExtensionSlot
+            name="start-visit-workspace-form-slot"
+            state={{
+              patientUuid: selectedPatientUuid,
+              closeWorkspace,
+              promptBeforeClosing,
+              openedFrom: 'service-queues-add-patient',
+            }}
+          />
+        )}
+      </AddPatientToQueueContext.Provider>
+    </div>
+  ) : null;
+};
+
+export default CreateQueueEntryWorkspace;

package/src/create-queue-entry/existing-visit-form/existing-visit-form.component.tsx

@@ -0,0 +1,73 @@
+import { Button, ButtonSet, Form, Row } from '@carbon/react';
+import { ExtensionSlot, useLayoutType, type Visit } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
+import QueueFields from '../queue-fields/queue-fields.component';
+import styles from './existing-visit-form.scss';
+
+interface ExistingVisitFormProps {
+  closeWorkspace: () => void;
+  visit: Visit;
+}
+
+/**
+ * This is the form that appears when clicking on a search result in the "Add patient to queue" workspace,
+ * when the patient already has an active visit.
+ */
+const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const [callback, setCallback] = useState<{
+    submitQueueEntry: (visit: Visit) => Promise<any>;
+  }>(null);
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsSubmitting(true);
+
+      callback
+        ?.submitQueueEntry?.(visit)
+        ?.then(() => {
+          closeWorkspace();
+          mutateQueueEntries();
+        })
+        ?.finally(() => {
+          setIsSubmitting(false);
+        });
+    },
+    [closeWorkspace, callback, visit, mutateQueueEntries],
+  );
+
+  return visit ? (
+    <>
+      {isTablet && (
+        <Row className={styles.headerGridRow}>
+          <ExtensionSlot
+            name="visit-form-header-slot"
+            className={styles.dataGridRow}
+            state={{ patientUuid: visit.patient.uuid }}
+          />
+        </Row>
+      )}
+      <Form className={classNames(styles.form, styles.container)} onSubmit={handleSubmit}>
+        <QueueFields setOnSubmit={(onSubmit) => setCallback({ submitQueueEntry: onSubmit })} />
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+            {t('addPatientToQueue', 'Add patient to queue')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </>
+  ) : null;
+};
+
+export default ExistingVisitForm;

package/src/{patient-search/visit-form-queue-fields/visit-form-queue-fields.component.tsx → create-queue-entry/queue-fields/queue-fields.component.tsx}

@@ -1,6 +1,3 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import classNames from 'classnames';
 import {
   InlineNotification,
   RadioButton,
@@ -9,67 +6,106 @@ import {
   Select,
   SelectItem,
   SelectSkeleton,
-  TextInput,
 } from '@carbon/react';
-import { useConfig, ResponsiveWrapper, useSession } from '@openmrs/esm-framework';
+import { ResponsiveWrapper, showSnackbar, useConfig, useSession, type Visit } from '@openmrs/esm-framework';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type ConfigObject } from '../../config-schema';
+import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
 import { useQueues } from '../../hooks/useQueues';
+import { AddPatientToQueueContext } from '../create-queue-entry.workspace';
 import { useQueueLocations } from '../hooks/useQueueLocations';
-import { type ConfigObject } from '../../config-schema';
-import { AddPatientToQueueContext } from '../patient-search.workspace';
-import styles from './visit-form-queue-fields.scss';
+import { postQueueEntry } from './queue-fields.resource';
+import styles from './queue-fields.scss';
 
-export interface VisitFormQueueFieldsProps {
-  setFormFields: (fields: {
-    queueLocation: string;
-    service: string;
-    status: string;
-    priority: string;
-    sortWeight: number;
-  }) => void;
+export interface QueueFieldsProps {
+  setOnSubmit(onSubmit: (visit: Visit) => Promise<any>);
 }
 
-const VisitFormQueueFields: React.FC<VisitFormQueueFieldsProps> = (props) => {
-  const { setFormFields } = props;
+/**
+ * This component contains form fields for starting a patient's queue entry.
+ */
+const QueueFields: React.FC<QueueFieldsProps> = ({ setOnSubmit }) => {
   const { t } = useTranslation();
   const { queueLocations, isLoading: isLoadingQueueLocations } = useQueueLocations();
   const { sessionLocation } = useSession();
-  const config = useConfig<ConfigObject>();
+  const {
+    visitQueueNumberAttributeUuid,
+    concepts: { defaultStatusConceptUuid, defaultPriorityConceptUuid, emergencyPriorityConceptUuid },
+  } = useConfig<ConfigObject>();
   const [selectedQueueLocation, setSelectedQueueLocation] = useState(queueLocations[0]?.id);
   const { queues, isLoading: isLoadingQueues } = useQueues(selectedQueueLocation);
-  const defaultStatus = config.concepts.defaultStatusConceptUuid;
   const [selectedService, setSelectedService] = useState('');
   const { currentServiceQueueUuid } = useContext(AddPatientToQueueContext);
-  const [priority, setPriority] = useState(config.concepts.defaultPriorityConceptUuid);
+  const [priority, setPriority] = useState(defaultPriorityConceptUuid);
   const priorities = queues.find((q) => q.uuid === selectedService)?.allowedPriorities ?? [];
-  const [sortWeight, setSortWeight] = useState(0);
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const memoMutateQueueEntries = useCallback(mutateQueueEntries, [mutateQueueEntries]);
+
+  const sortWeight = priority === emergencyPriorityConceptUuid ? 1 : 0;
+
+  const onSubmit = useCallback(
+    (visit: Visit) => {
+      if (selectedQueueLocation && selectedService && priority) {
+        return postQueueEntry(
+          visit.uuid,
+          selectedService,
+          visit.patient.uuid,
+          priority,
+          defaultStatusConceptUuid,
+          sortWeight,
+          selectedQueueLocation,
+          visitQueueNumberAttributeUuid,
+        )
+          .then(() => {
+            showSnackbar({
+              kind: 'success',
+              isLowContrast: true,
+              title: t('addedPatientToQueue', 'Added patient to queue'),
+              subtitle: t('queueEntryAddedSuccessfully', 'Queue entry added successfully'),
+            });
+            memoMutateQueueEntries();
+          })
+          .catch((error) => {
+            showSnackbar({
+              title: t('queueEntryError', 'Error adding patient to the queue'),
+              kind: 'error',
+              isLowContrast: false,
+              subtitle: error?.message,
+            });
+            throw error;
+          });
+      } else {
+        return Promise.resolve();
+      }
+    },
+    [
+      selectedQueueLocation,
+      selectedService,
+      priority,
+      sortWeight,
+      defaultStatusConceptUuid,
+      visitQueueNumberAttributeUuid,
+      memoMutateQueueEntries,
+      t,
+    ],
+  );
 
   useEffect(() => {
-    if (priority === config.concepts.emergencyPriorityConceptUuid) {
-      setSortWeight(1);
-    }
-  }, [priority]);
+    setOnSubmit?.(onSubmit);
+  }, [onSubmit, setOnSubmit]);
 
   useEffect(() => {
     if (currentServiceQueueUuid) {
       setSelectedService(currentServiceQueueUuid);
     }
-  }, [queues]);
+  }, [currentServiceQueueUuid, queues]);
 
   useEffect(() => {
     if (queueLocations.map((l) => l.id).includes(sessionLocation.uuid)) {
       setSelectedQueueLocation(sessionLocation.uuid);
     }
-  }, [queueLocations]);
-
-  useEffect(() => {
-    setFormFields({
-      queueLocation: selectedQueueLocation,
-      service: selectedService,
-      status: defaultStatus,
-      priority,
-      sortWeight,
-    });
-  }, [selectedQueueLocation, selectedService, defaultStatus, priority, sortWeight]);
+  }, [queueLocations, sessionLocation.uuid]);
 
   return (
     <div>
@@ -159,7 +195,7 @@ const VisitFormQueueFields: React.FC<VisitFormQueueFieldsProps> = (props) => {
               className={styles.radioButtonWrapper}
               name="priority"
               id="priority"
-              defaultSelected={config.concepts.defaultPriorityConceptUuid}
+              defaultSelected={defaultPriorityConceptUuid}
               onChange={(uuid) => setPriority(uuid)}>
               {priorities.map(({ uuid, display }) => (
                 <RadioButton key={uuid} labelText={display} value={uuid} />
@@ -168,18 +204,8 @@ const VisitFormQueueFields: React.FC<VisitFormQueueFieldsProps> = (props) => {
           ) : null}
         </section>
       ) : null}
-
-      <section className={classNames(styles.section, styles.sectionHidden)}>
-        <TextInput
-          type="number"
-          id="sortWeight"
-          name="sortWeight"
-          labelText={t('sortWeight', 'Sort weight')}
-          value={sortWeight}
-        />
-      </section>
     </div>
   );
 };
 
-export default VisitFormQueueFields;
+export default QueueFields;

package/src/create-queue-entry/queue-fields/queue-fields.resource.ts

@@ -0,0 +1,63 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export async function generateVisitQueueNumber(
+  location: string,
+  visitUuid: string,
+  queueUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await openmrsFetch(
+    `${restBaseUrl}/queue-entry-number?location=${location}&queue=${queueUuid}&visit=${visitUuid}&visitAttributeType=${visitQueueNumberAttributeUuid}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+    },
+  );
+}
+
+export async function postQueueEntry(
+  visitUuid: string,
+  queueUuid: string,
+  patientUuid: string,
+  priority: string,
+  status: string,
+  sortWeight: number,
+  locationUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await Promise.all([generateVisitQueueNumber(locationUuid, visitUuid, queueUuid, visitQueueNumberAttributeUuid)]);
+
+  return openmrsFetch(`${restBaseUrl}/visit-queue-entry`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      visit: { uuid: visitUuid },
+      queueEntry: {
+        status: {
+          uuid: status,
+        },
+        priority: {
+          uuid: priority,
+        },
+        queue: {
+          uuid: queueUuid,
+        },
+        patient: {
+          uuid: patientUuid,
+        },
+        startedAt: new Date(),
+        sortWeight: sortWeight,
+      },
+    },
+  });
+}

package/src/{patient-search/visit-form-queue-fields/visit-form-queue-fields.scss → create-queue-entry/queue-fields/queue-fields.scss}

@@ -11,7 +11,3 @@
 .section {
   margin: layout.$spacing-07 layout.$spacing-05 0;
 }
-
-.sectionHidden {
-  display: none;
-}

package/src/{patient-search/visit-form-queue-fields/visit-form-queue-fields.test.tsx → create-queue-entry/queue-fields/queue-fields.test.tsx}

@@ -2,10 +2,18 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { getDefaultsFromConfigSchema, useConfig, useLayoutType, useSession } from '@openmrs/esm-framework';
+import {
+  type FetchResponse,
+  getDefaultsFromConfigSchema,
+  useConfig,
+  useLayoutType,
+  useSession,
+  type Visit,
+} from '@openmrs/esm-framework';
 import { configSchema, type ConfigObject } from '../../config-schema';
-import { mockSession } from '__mocks__';
-import VisitFormQueueFields from './visit-form-queue-fields.component';
+import { mockSession, mockVisitAlice } from '__mocks__';
+import QueueFields from './queue-fields.component';
+import { postQueueEntry } from './queue-fields.resource';
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseLayoutType = jest.mocked(useLayoutType);
@@ -32,7 +40,14 @@ jest.mock('../../hooks/useQueues', () => {
   };
 });
 
-describe('VisitFormQueueFields', () => {
+jest.mock('./queue-fields.resource', () => {
+  return {
+    postQueueEntry: jest.fn(),
+  };
+});
+const mockPostQueueEntry = jest.mocked(postQueueEntry).mockResolvedValue({} as FetchResponse);
+
+describe('QueueFields', () => {
   beforeEach(() => {
     mockUseLayoutType.mockReturnValue('small-desktop');
     mockUseSession.mockReturnValue(mockSession.data);
@@ -43,27 +58,32 @@ describe('VisitFormQueueFields', () => {
 
   it('renders the form fields and returns the set values', async () => {
     const user = userEvent.setup();
-    const setFormFields = jest.fn();
-    render(<VisitFormQueueFields setFormFields={setFormFields} />);
+    let onSubmit: (visit: Visit) => Promise<any> = null;
+    const setOnSubmit = (callback) => {
+      onSubmit = callback;
+    };
+    render(<QueueFields setOnSubmit={setOnSubmit} />);
 
     expect(screen.getByLabelText('Select a queue location')).toBeInTheDocument();
     expect(screen.getByLabelText('Select a service')).toBeInTheDocument();
-    expect(screen.getByLabelText('Sort weight')).toBeInTheDocument();
 
+    const queueUuid = 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90';
     const serviceSelect = screen.getByLabelText('Select a service').closest('select');
-    await user.selectOptions(serviceSelect, 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90');
+    await user.selectOptions(serviceSelect, queueUuid);
 
     expect(screen.getByText('Priority')).toBeInTheDocument();
     expect(screen.getByText('High')).toBeInTheDocument();
 
-    expect(setFormFields).toHaveBeenCalledWith({
-      queueLocation: '1',
-      service: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
-      // The status and priority are the defaults that come from the config schema.
-      // They are selected even though they are not 'allowed' for the queue.
-      status: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
-      priority: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
-      sortWeight: 0,
-    });
+    await onSubmit(mockVisitAlice);
+    expect(mockPostQueueEntry).toHaveBeenCalledWith(
+      mockVisitAlice.uuid,
+      queueUuid, // queueUuid
+      mockVisitAlice.patient.uuid,
+      'f4620bfa-3625-4883-bd3f-84c2cce14470', // priority
+      '51ae5e4d-b72b-4912-bf31-a17efb690aeb', // status
+      0, // sortWeight
+      '1', // locationUuid
+      null, // visitQueueNumberAttributeUuid
+    );
   });
 });

package/src/create-queue-entry/queue-fields/visit-form-queue-fields.extension.tsx

@@ -0,0 +1,31 @@
+import { type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+import QueueFields from './queue-fields.component';
+
+interface VisitFormCallbacks {
+  onVisitCreatedOrUpdated: (visit: Visit) => Promise<any>;
+}
+// See VisitFormExtensionState in esm-patient-chart-app
+export interface VisitFormQueueFieldsProps {
+  setVisitFormCallbacks: (callbacks: VisitFormCallbacks) => void;
+  visitFormOpenedFrom: string;
+  patientChartConfig?: {
+    showServiceQueueFields: boolean;
+  };
+  patientUuid: string;
+}
+
+/**
+ * This extension contains form fields for starting a patient's queue entry.
+ * It is used slotted into the patient-chart's start visit form
+ */
+const VisitFormQueueFields: React.FC<VisitFormQueueFieldsProps> = (props) => {
+  const { setVisitFormCallbacks, visitFormOpenedFrom, patientChartConfig } = props;
+  if (patientChartConfig.showServiceQueueFields || visitFormOpenedFrom == 'service-queues-add-patient') {
+    return <QueueFields setOnSubmit={(onSubmit) => setVisitFormCallbacks({ onVisitCreatedOrUpdated: onSubmit })} />;
+  } else {
+    return <></>;
+  }
+};
+
+export default VisitFormQueueFields;

package/src/hooks/useQueueEntries.ts

@@ -1,9 +1,9 @@
-import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { type QueueEntry, type QueueEntrySearchCriteria } from '../types';
-import useSWR from 'swr';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSWRConfig } from 'swr/_internal';
 import isEqual from 'lodash-es/isEqual';
+import useSWR from 'swr';
+import { useSWRConfig } from 'swr/_internal';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type QueueEntry, type QueueEntrySearchCriteria } from '../types';
 
 type QueueEntryResponse = FetchResponse<{
   results: Array<QueueEntry>;
@@ -82,14 +82,15 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep:
   // for it yet. Next it returns stale data again, this time with `isValidating` set to true. At this
   // point we say we are no longer waiting for mutate. Finally, it returns fresh data with `isValidating`
   // again set to false. We may then update the data array and move on to the next page.
-  const [data, setData] = useState<Array<Array<QueueEntry>>>([]);
-  const [totalCount, setTotalCount] = useState<number>();
-  const [currentPage, setCurrentPage] = useState<number>(0);
-  const [currentSearchCriteria, setCurrentSearchCriteria] = useState(searchCriteria);
-  const [currentRep, setCurrentRep] = useState(rep);
-  const [pageUrl, setPageUrl] = useState<string>(getInitialUrl(currentRep, currentSearchCriteria));
-  const [error, setError] = useState<Error>();
   const { mutateQueueEntries } = useMutateQueueEntries();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [currentRep, setCurrentRep] = useState(rep);
+  const [currentSearchCriteria, setCurrentSearchCriteria] = useState(searchCriteria);
+  const [data, setData] = useState<Array<Array<QueueEntry>>>([]);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [pageUrl, setPageUrl] = useState(getInitialUrl(currentRep, currentSearchCriteria));
+  const [totalCount, setTotalCount] = useState(0);
   const [waitingForMutate, setWaitingForMutate] = useState(false);
 
   const refetchAllData = useCallback(
@@ -114,7 +115,7 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep:
       }
       refetchAllData(rep, searchCriteria);
     }
-  }, [searchCriteria, currentSearchCriteria, setCurrentSearchCriteria, currentRep, rep]);
+  }, [currentRep, currentSearchCriteria, refetchAllData, rep, searchCriteria, setCurrentSearchCriteria]);
 
   const { data: pageData, isValidating, error: pageError } = useSWR<QueueEntryResponse, Error>(pageUrl, openmrsFetch);
 

package/src/index.ts

@@ -10,7 +10,7 @@ import outpatientSideNavComponent from './side-menu/side-menu.component';
 import homeDashboardComponent from './home.component';
 import patientInfoBannerSlotComponent from './patient-info/patient-info.component';
 import pastVisitSummaryComponent from './past-visit/past-visit.component';
-import VisitFormQueueFields from './patient-search/visit-form-queue-fields/visit-form-queue-fields.component';
+import VisitFormQueueFields from './create-queue-entry/queue-fields/visit-form-queue-fields.extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -64,14 +64,6 @@ export const clearAllQueueEntries = getAsyncLifecycle(
   },
 );
 
-export const addVisitToQueueModal = getAsyncLifecycle(
-  () => import('./add-patient-toqueue/add-patient-toqueue-dialog.component'),
-  {
-    featureName: 'add visit to queue',
-    moduleName,
-  },
-);
-
 export const transitionQueueEntryStatusModal = getAsyncLifecycle(
   () => import('./transition-queue-entry/transition-queue-entry-dialog.component'),
   {
@@ -157,11 +149,13 @@ export const addNewQueueServiceRoomWorkspace = getAsyncLifecycle(
 
 export const visitFormQueueFields = getSyncLifecycle(VisitFormQueueFields, options);
 
-// t('searchPatient', 'Search Patient')
-export const patientSearchWorkspace = getAsyncLifecycle(() => import('./patient-search/patient-search.workspace'), {
-  featureName: 'service-queues-patient-search',
-  moduleName,
-});
+export const createQueueEntryWorkspace = getAsyncLifecycle(
+  () => import('./create-queue-entry/create-queue-entry.workspace'),
+  {
+    featureName: 'create-queue-entry-workspace',
+    moduleName,
+  },
+);
 
 export const activeVisitsRowActions = getAsyncLifecycle(
   () => import('./active-visits/active-visits-row-actions.component'),

package/src/patient-info/patient-info.component.tsx

@@ -1,18 +1,18 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { ClickableTile } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import {
-  ConfigurableLink,
-  PatientBannerContactDetails,
-  PatientBannerToggleContactDetailsButton,
-  PatientPhoto,
   age,
+  ConfigurableLink,
   formatDate,
   getPatientName,
   parseDate,
+  PatientBannerContactDetails,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
 } from '@openmrs/esm-framework';
-import classNames from 'classnames';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import AppointmentDetails from './appointment-details.component';
 import styles from './patient-info.scss';
 
@@ -23,8 +23,8 @@ interface PatientInfoProps {
 
 const PatientInfo: React.FC<PatientInfoProps> = ({ patient, handlePatientInfoClick }) => {
   const { t } = useTranslation();
-  const [showContactDetails, setShowContactDetails] = useState<boolean>(false);
   const patientName = getPatientName(patient);
+  const [showContactDetails, setShowContactDetails] = useState(false);
 
   const toggleShowMore = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -32,6 +32,8 @@ const PatientInfo: React.FC<PatientInfoProps> = ({ patient, handlePatientInfoCli
   };
 
   return (
+    // TODO: Fix this warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
+    // This is because the ConfigurableLink is inside a ClickableTile.
     <ClickableTile className={styles.container} onClick={handlePatientInfoClick}>
       <div
         className={classNames({