@kenyaemr/esm-service-queues-app 7.0.3-pre.88 → 7.0.3-pre.94

package/src/config-schema.ts

@@ -60,33 +60,18 @@ export const defaultQueueTable: TableDefinitions = {
 };
 
 export const configSchema = {
-  dashboardTitle: {
-    _type: Type.Object,
-    _description: 'The title to be displayed on the service queues dashboard',
-    key: {
-      _type: Type.String,
-      _description: 'The translation key of the title to be displayed on the service queues dashboard',
-    },
-    value: {
-      _type: Type.String,
-      _description: 'The translation value of the title to be displayed on the service queues dashboard',
-    },
-    _default: {
-      key: 'serviceQueues',
-      value: 'Service queues',
-    },
+  appointmentStatuses: {
+    _type: Type.Array,
+    _description: 'Configurable appointment status (status of appointments)',
+    _default: ['Requested', 'Scheduled', 'CheckedIn', 'Completed', 'Cancelled', 'Missed'],
   },
+  biometrics: biometricsConfigSchema,
   concepts: {
     defaultPriorityConceptUuid: {
       _type: Type.ConceptUuid,
       _description: 'The UUID of the default priority for the queues eg Not urgent.',
       _default: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
     },
-    emergencyPriorityConceptUuid: {
-      _type: Type.ConceptUuid,
-      _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
-      _default: '04f6f7e0-e3cb-4e13-a133-4479f759574e',
-    },
     defaultStatusConceptUuid: {
       _type: Type.ConceptUuid,
       _description: 'The UUID of the default status for the queues eg Waiting.',
@@ -97,42 +82,47 @@ export const configSchema = {
       _description: 'The UUID of the default status for attending a service in the queues eg In Service.',
       _default: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
     },
-    systolicBloodPressureUuid: {
-      _type: Type.ConceptUuid,
-      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    },
     diastolicBloodPressureUuid: {
       _type: Type.ConceptUuid,
       _default: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
-    pulseUuid: {
+    emergencyPriorityConceptUuid: {
       _type: Type.ConceptUuid,
-      _default: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
+      _default: '04f6f7e0-e3cb-4e13-a133-4479f759574e',
     },
-    temperatureUuid: {
+    heightUuid: {
       _type: Type.ConceptUuid,
-      _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _default: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    historicalObsConceptUuid: {
+      _type: Type.Array,
+      _description: 'The Uuids of the obs that are displayed on the previous visit modal',
+      _default: ['161643AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
     },
     oxygenSaturationUuid: {
       _type: Type.ConceptUuid,
       _default: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
-    heightUuid: {
-      _type: Type.ConceptUuid,
-      _default: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    },
-    weightUuid: {
+    pulseUuid: {
       _type: Type.ConceptUuid,
-      _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _default: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
     respiratoryRateUuid: {
       _type: Type.ConceptUuid,
       _default: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
-    historicalObsConceptUuid: {
-      _type: Type.Array,
-      _description: 'The Uuids of the obs that are displayed on the previous visit modal',
-      _default: ['161643AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+    systolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    temperatureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    weightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
   },
   contactAttributeType: {
@@ -141,31 +131,6 @@ export const configSchema = {
       'The UUID of the person attribute type that captures contact information such as `Next of kin contact details`',
     _default: '',
   },
-  vitals: vitalsConfigSchema,
-  biometrics: biometricsConfigSchema,
-  appointmentStatuses: {
-    _type: Type.Array,
-    _description: 'Configurable appointment status (status of appointments)',
-    _default: ['Requested', 'Scheduled', 'CheckedIn', 'Completed', 'Cancelled', 'Missed'],
-  },
-  defaultIdentifierTypes: {
-    _type: Type.Array,
-    _element: {
-      _type: Type.String,
-    },
-    _description: 'The identifier types to be display on all patient search result page',
-    _default: ['05ee9cf4-7242-4a17-b4d4-00f707265c8a', 'f85081e2-b4be-4e48-b3a4-7994b69bb101'],
-  },
-  showRecommendedVisitTypeTab: {
-    _type: Type.Boolean,
-    _description: 'Whether start visit form should display recommended visit type tab. Requires `visitTypeResourceUrl`',
-    _default: false,
-  },
-  visitTypeResourceUrl: {
-    _type: Type.String,
-    _description: 'The `visitTypeResourceUrl`',
-    _default: null,
-  },
   customPatientChartUrl: {
     _type: Type.String,
     _default: '${openmrsSpaBase}/patient/${patientUuid}/chart',
@@ -174,15 +139,34 @@ export const configSchema = {
       (openmrsSpaBase and openBase are available to any <ConfigurableLink>)`,
     _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
   },
+  dashboardTitle: {
+    _type: Type.Object,
+    _description: 'The title to be displayed on the service queues dashboard',
+    key: {
+      _type: Type.String,
+      _description: 'The translation key of the title to be displayed on the service queues dashboard',
+    },
+    value: {
+      _type: Type.String,
+      _description: 'The translation value of the title to be displayed on the service queues dashboard',
+    },
+    _default: {
+      key: 'serviceQueues',
+      value: 'Service queues',
+    },
+  },
   defaultFacilityUrl: {
     _type: Type.String,
     _default: '',
     _description: 'Custom URL to load default facility if it is not in the session',
   },
-  visitQueueNumberAttributeUuid: {
-    _type: Type.String,
-    _description: 'The UUID of the visit attribute that contains the visit queue number.',
-    _default: null,
+  defaultIdentifierTypes: {
+    _type: Type.Array,
+    _element: {
+      _type: Type.String,
+    },
+    _description: 'The identifier types to be display on all patient search result page',
+    _default: ['05ee9cf4-7242-4a17-b4d4-00f707265c8a', 'f85081e2-b4be-4e48-b3a4-7994b69bb101'],
   },
   queueTables: {
     columnDefinitions: {
@@ -368,6 +352,22 @@ export const configSchema = {
       ),
     ],
   },
+  showRecommendedVisitTypeTab: {
+    _type: Type.Boolean,
+    _description: 'Whether start visit form should display recommended visit type tab. Requires `visitTypeResourceUrl`',
+    _default: false,
+  },
+  visitQueueNumberAttributeUuid: {
+    _type: Type.String,
+    _description: 'The UUID of the visit attribute that contains the visit queue number.',
+    _default: null,
+  },
+  visitTypeResourceUrl: {
+    _type: Type.String,
+    _description: 'The `visitTypeResourceUrl`',
+    _default: null,
+  },
+  vitals: vitalsConfigSchema,
   _validators: [
     validator((config: ConfigObject) => {
       const queueNumberColumnDefs = [
@@ -393,35 +393,35 @@ function columnHasType(columnDef: ColumnDefinition, type: ColumnType): boolean {
 }
 
 export interface ConfigObject {
-  dashboardTitle: {
-    key: string;
-    value: string;
-  };
+  appointmentStatuses: Array<string>;
+  biometrics: BiometricsConfigObject;
   concepts: {
     defaultPriorityConceptUuid: string;
     defaultStatusConceptUuid: string;
     defaultTransitionStatus: string;
-    systolicBloodPressureUuid: string;
     diastolicBloodPressureUuid: string;
+    emergencyPriorityConceptUuid: string;
+    heightUuid: string;
+    historicalObsConceptUuid: Array<string>;
+    oxygenSaturationUuid: string;
     pulseUuid: string;
+    respiratoryRateUuid: string;
+    systolicBloodPressureUuid: string;
     temperatureUuid: string;
-    oxygenSaturationUuid: string;
-    heightUuid: string;
     weightUuid: string;
-    respiratoryRateUuid: string;
-    emergencyPriorityConceptUuid: string;
-    historicalObsConceptUuid: Array<string>;
   };
   contactAttributeType: Array<string>;
-  vitals: VitalsConfigObject;
-  biometrics: BiometricsConfigObject;
-  appointmentStatuses: Array<string>;
+  customPatientChartUrl: string;
   defaultIdentifierTypes: Array<string>;
+  dashboardTitle: {
+    key: string;
+    value: string;
+  };
+  queueTables: TablesConfig;
   showRecommendedVisitTypeTab: boolean;
-  customPatientChartUrl: string;
-  visitTypeResourceUrl: string;
   visitQueueNumberAttributeUuid: string | null;
-  queueTables: TablesConfig;
+  visitTypeResourceUrl: string;
+  vitals: VitalsConfigObject;
 }
 
 interface TablesConfig {
@@ -431,7 +431,7 @@ interface TablesConfig {
     A list of table definitions. A queue table (whether it is displaying entries from a
     particular queue+status combination, from a particular queue, or from multiple queues)
     will determine what columns to show based on these definitions. If multiple TableDefinitions
-    have matching appliedTo criteria, the first one will be used.       
+    have matching appliedTo criteria, the first one will be used.
   */
   tableDefinitions: TableDefinitions[];
 }

package/src/current-visit/current-visit-summary.component.tsx

@@ -12,7 +12,7 @@ interface CurrentVisitProps {
 
 const CurrentVisit: React.FC<CurrentVisitProps> = ({ patientUuid, visitUuid }) => {
   const { t } = useTranslation();
-  const { visit, isError, isLoading } = useVisit(visitUuid);
+  const { visit, isLoading } = useVisit(visitUuid);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;

package/src/current-visit/current-visit-summary.test.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useVisit } from './current-visit.resource';
 import { mockPastVisit } from '__mocks__';
+import { useVisit } from './current-visit.resource';
 import CurrentVisit from './current-visit-summary.component';
 
-const useVisitMock = useVisit as jest.Mock;
+const useVisitMock = jest.mocked(useVisit);
 
 jest.mock('./current-visit.resource', () => ({
-  useVisit: jest.fn(() => ({
+  useVisit: jest.fn().mockReturnValue({
     visit: {
       visitType: { display: 'Visit Type' },
       encounters: [],
     },
-    isError: false,
+    error: null,
     isLoading: false,
-  })),
+  }),
 }));
 
 const patientUuid = mockPastVisit.data.results[0].patient.uuid;
@@ -24,17 +24,18 @@ describe('CurrentVisit', () => {
   it('renders visit details correctly', async () => {
     render(<CurrentVisit patientUuid={patientUuid} visitUuid={visitUuid} />);
 
-    expect(screen.queryByRole('progressbar')).toBeNull();
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
     expect(screen.getByText('Visit Type')).toBeInTheDocument();
     expect(screen.getByText('Scheduled for today')).toBeInTheDocument();
     expect(screen.getByText('On time')).toBeInTheDocument();
   });
-  it('should render skeleton when loading', async () => {
-    useVisitMock.mockImplementationOnce(() => ({
-      visit: undefined,
-      isError: false,
+  it('renders a loading skeleton when fetching data', async () => {
+    useVisitMock.mockReturnValue({
+      visit: null,
+      error: null,
       isLoading: true,
-    }));
+      isValidating: false,
+    });
 
     render(<CurrentVisit patientUuid={patientUuid} visitUuid={visitUuid} />);
 

package/src/current-visit/current-visit.resource.ts

@@ -26,7 +26,7 @@ export function useVisit(visitUuid: string) {
 
   return {
     visit: data ? data.data : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };

package/src/current-visit/current-visit.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .visitContainer {
   background-color: $ui-background;
@@ -30,5 +30,5 @@
 }
 
 .wrapper {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }

package/src/current-visit/hooks/useVitalsConceptMetadata.tsx

@@ -21,7 +21,7 @@ export function useVitalsConceptMetadata() {
     : new Map<string, string>([]);
   return {
     data: conceptUnits,
-    isError: error,
+    error,
     isLoading,
     conceptMetadata,
   };

package/src/current-visit/visit-details/triage-note.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .subHeading {
   @include type.type-style('label-01');
@@ -8,20 +8,20 @@
 }
 
 .emptyText {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   @include type.type-style('body-02');
 }
 
 .unit {
   @include type.type-style('body-compact-01');
   color: var(--text-02);
-  margin-left: spacing.$spacing-02;
+  margin-left: layout.$spacing-02;
 }
 
 .vitalValues {
   @include type.type-style('body-compact-02');
   color: $ui-05;
-  margin-left: spacing.$spacing-02;
+  margin-left: layout.$spacing-02;
 }
 
 .grid {
@@ -39,13 +39,13 @@
 
 .danger-icon {
   color: $danger;
-  height: spacing.$spacing-02;
-  width: spacing.$spacing-02;
-  margin-left: spacing.$spacing-02;
+  height: layout.$spacing-02;
+  width: layout.$spacing-02;
+  margin-left: layout.$spacing-02;
 }
 
 .iconWrapper {
-  margin-left: spacing.$spacing-02;
+  margin-left: layout.$spacing-02;
 }
 
 .critically-low,
@@ -81,7 +81,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 0.25rem 0.5rem;
+  margin: layout.$spacing-02 layout.$spacing-03;
 }
 
 .tile {

package/src/helpers/helpers.test.ts

@@ -0,0 +1,24 @@
+import { updateValueInSessionStorage } from './helpers';
+
+describe('Testing updateValueInSessionStorage', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('should save value in the session storage if valid value is passed', () => {
+    updateValueInSessionStorage('key', 'value');
+    expect(sessionStorage.getItem('key')).toBe('value');
+  });
+
+  it('should delete the key of the value passed is null or undefined', () => {
+    updateValueInSessionStorage('key1', 'v1');
+    expect(sessionStorage.getItem('key1')).toBe('v1');
+    updateValueInSessionStorage('key1', null);
+    expect(sessionStorage.getItem('key1')).toBe(null);
+
+    updateValueInSessionStorage('key2', 'v2');
+    expect(sessionStorage.getItem('key2')).toBe('v2');
+    updateValueInSessionStorage('key2', undefined);
+    expect(sessionStorage.getItem('key2')).toBe(null);
+  });
+});

package/src/helpers/helpers.ts

@@ -14,17 +14,42 @@ export const getServiceCountByAppointmentType = (
     .reduce((count, val) => count + val, 0);
 };
 
-const initialQueueLocationNameState = { queueLocationName: sessionStorage.getItem('queueLocationName') };
-const initialQueueLocationUuidState = { queueLocationUuid: sessionStorage.getItem('queueLocationUuid') };
+/**
+ * This function is mainly useful for not writing null/ undefined in the session storage
+ */
+export function updateValueInSessionStorage(key: string, value: string) {
+  if (value === undefined || value === null) {
+    sessionStorage.removeItem(key);
+  } else {
+    sessionStorage.setItem(key, value);
+  }
+}
+
+/**
+ * This function fetches the value for the passed key from session storage
+ */
+export function getValueFromSessionStorage(key: string): string | null {
+  return sessionStorage.getItem(key);
+}
+
+const initialQueueLocationNameState = {
+  queueLocationName: getValueFromSessionStorage('queueLocationName'),
+};
+const initialQueueLocationUuidState = {
+  queueLocationUuid: getValueFromSessionStorage('queueLocationUuid'),
+};
 const initialServiceUuidState = {
-  serviceUuid: sessionStorage.getItem('queueServiceUuid'),
-  serviceDisplay: sessionStorage.getItem('queueServiceDisplay'),
+  serviceUuid: getValueFromSessionStorage('queueServiceUuid'),
+  serviceDisplay: getValueFromSessionStorage('queueServiceDisplay'),
+};
+const intialAppointmentStatusNameState = { status: '' };
+const initialQueueStatusState = {
+  statusUuid: getValueFromSessionStorage('queueStatusUuid'),
+  statusDisplay: getValueFromSessionStorage('queueStatusDisplay'),
 };
-const intialStatusNameState = { status: '' };
-const initialQueueStatusState = { statusUuid: null, statusDisplay: null };
 const initialSelectedQueueRoomTimestamp = { providerQueueRoomTimestamp: new Date() };
 const initialPermanentProviderQueueRoomState = {
-  isPermanentProviderQueueRoom: sessionStorage.getItem('isPermanentProviderQueueRoom'),
+  isPermanentProviderQueueRoom: getValueFromSessionStorage('isPermanentProviderQueueRoom'),
 };
 
 export function getSelectedService() {
@@ -35,7 +60,7 @@ export function getSelectedService() {
 }
 
 export function getSelectedAppointmentStatus() {
-  return getGlobalStore<{ status: string }>('appointmentSelectedStatus', intialStatusNameState);
+  return getGlobalStore<{ status: string }>('appointmentSelectedStatus', intialAppointmentStatusNameState);
 }
 
 export function getSelectedQueueLocationName() {
@@ -69,8 +94,8 @@ export function getIsPermanentProviderQueueRoom() {
 
 export const updateSelectedService = (currentServiceUuid: string, currentServiceDisplay: string) => {
   const store = getSelectedService();
-  sessionStorage.setItem('queueServiceDisplay', currentServiceDisplay);
-  sessionStorage.setItem('queueServiceUuid', currentServiceUuid);
+  updateValueInSessionStorage('queueServiceDisplay', currentServiceDisplay);
+  updateValueInSessionStorage('queueServiceUuid', currentServiceUuid);
   store.setState({ serviceUuid: currentServiceUuid, serviceDisplay: currentServiceDisplay });
 };
 
@@ -81,13 +106,13 @@ export const updateSelectedAppointmentStatus = (currentAppointmentStatus: string
 
 export const updateSelectedQueueLocationName = (currentLocationName: string) => {
   const store = getSelectedQueueLocationName();
-  sessionStorage.setItem('queueLocationName', currentLocationName);
+  updateValueInSessionStorage('queueLocationName', currentLocationName);
   store.setState({ queueLocationName: currentLocationName });
 };
 
 export const updateSelectedQueueLocationUuid = (currentLocationUuid: string) => {
   const store = getSelectedQueueLocationUuid();
-  sessionStorage.setItem('queueLocationUuid', currentLocationUuid);
+  updateValueInSessionStorage('queueLocationUuid', currentLocationUuid);
   store.setState({ queueLocationUuid: currentLocationUuid });
 };
 
@@ -98,12 +123,14 @@ export const updatedSelectedQueueRoomTimestamp = (currentProviderRoomTimestamp:
 
 export const updateIsPermanentProviderQueueRoom = (currentIsPermanentProviderQueueRoom) => {
   const store = getIsPermanentProviderQueueRoom();
-  sessionStorage.setItem('isPermanentProviderQueueRoom', currentIsPermanentProviderQueueRoom);
+  updateValueInSessionStorage('isPermanentProviderQueueRoom', currentIsPermanentProviderQueueRoom);
   store.setState({ isPermanentProviderQueueRoom: currentIsPermanentProviderQueueRoom });
 };
 
 export const updateSelectedQueueStatus = (currentQueueStatusUuid: string, currentQueueStatusDisplay: string) => {
   const store = getSelectedQueueStatus();
+  updateValueInSessionStorage('queueStatusUuid', currentQueueStatusUuid);
+  updateValueInSessionStorage('queueStatusDisplay', currentQueueStatusDisplay);
   store.setState({ statusUuid: currentQueueStatusUuid, statusDisplay: currentQueueStatusDisplay });
 };
 
@@ -117,7 +144,7 @@ export const useSelectedService = () => {
 };
 
 export const useSelectedAppointmentStatus = () => {
-  const [currentAppointmentStatus, setCurrentAppointmentStatus] = useState(intialStatusNameState.status);
+  const [currentAppointmentStatus, setCurrentAppointmentStatus] = useState(intialAppointmentStatusNameState.status);
 
   useEffect(() => {
     getSelectedAppointmentStatus().subscribe(({ status }) => setCurrentAppointmentStatus(status));

package/src/home.test.tsx

@@ -1,29 +1,27 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import Home from './home.component';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { configSchema } from './config-schema';
-
-const mockedUseConfig = useConfig as jest.Mock;
+import { type ConfigObject, configSchema } from './config-schema';
+import Home from './home.component';
 
-mockedUseConfig.mockReturnValue({
-  ...getDefaultsFromConfigSchema(configSchema),
-  concepts: {
-    visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
-  },
-});
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('./helpers/helpers', () => ({
   ...jest.requireActual('./helpers/helpers'),
   useSelectedQueueLocationName: jest.fn(() => 'Test Location'),
 }));
 
+mockUseConfig.mockReturnValue({
+  ...getDefaultsFromConfigSchema(configSchema),
+  visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+});
+
 describe('Home Component', () => {
   it('renders PatientQueueHeader, ClinicMetrics when activeTicketScreen is not "screen"', () => {
     // Mock window.location.pathname
     const originalLocation = window.location;
     delete window.location;
-    window.location = { pathname: '/some-path' };
+    window.location = { pathname: '/some-path' } as Location;
 
     render(<Home />);
 
@@ -38,7 +36,7 @@ describe('Home Component', () => {
   it('renders QueueScreen when activeTicketScreen is "screen"', () => {
     const originalLocation = window.location;
     delete window.location;
-    window.location = { pathname: '/some-path/screen' };
+    window.location = { pathname: '/some-path/screen' } as Location;
 
     render(<Home />);
     expect(screen.getByText(/patients currently in queue/i)).toBeInTheDocument();

package/src/hooks/useQueueService.ts

@@ -1,19 +1,25 @@
 import { getLocale } from '@openmrs/esm-framework';
 import { useMemo } from 'react';
 import { useQueues } from './useQueues';
+import uniqBy from 'lodash-es/uniqBy';
+import { useSelectedQueueLocationUuid } from '../helpers/helpers';
 
-function useQueueServices(locationUuid?: string) {
-  const { queues, isLoading } = useQueues(locationUuid);
+function useQueueServices() {
+  const currentQueueLocation = useSelectedQueueLocationUuid();
+  const { queues, isLoading } = useQueues(currentQueueLocation);
 
-  const results = useMemo(
-    () => ({
-      services: [...new Set(queues?.map((queue) => queue.service) ?? [])].sort((a, b) =>
-        a.display.localeCompare(b.display, getLocale()),
-      ),
+  const results = useMemo(() => {
+    const uniqueServices = uniqBy(
+      queues.flatMap((queue) => queue.service),
+      (service) => service?.uuid,
+    );
+    const sortedServices = uniqueServices.sort((a, b) => a.display.localeCompare(b.display, getLocale()));
+
+    return {
+      services: sortedServices,
       isLoadingQueueServices: isLoading,
-    }),
-    [queues, isLoading],
-  );
+    };
+  }, [queues, isLoading]);
 
   return results;
 }