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

package/src/patient-queue-metrics/metrics-card.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 *;
 
 .container {
   flex-grow: 1;
@@ -17,15 +17,15 @@
 .tileContainer {
   border: 0.0625rem solid $ui-03;
   height: 7.875rem;
-  padding: spacing.$spacing-05;
-  margin: spacing.$spacing-03 spacing.$spacing-03;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-03;
 }
 
 .tileHeader {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .headerLabel {
@@ -45,15 +45,15 @@
 
 .headerLabelContainer {
   display: flex;
-  height: spacing.$spacing-07;
+  height: layout.$spacing-07;
 
   :global(.cds--dropdown__wrapper--inline) {
     gap: 0;
-    margin-top: -0.75rem;
+    margin-top: -(layout.$spacing-04);
   }
 
   :global(.cds--list-box__menu-icon) {
-    height: 1rem;
+    height: layout.$spacing-05;
   }
 }
 
@@ -64,7 +64,7 @@
   color: $interactive-01;
 
   svg {
-    margin-left: spacing.$spacing-03;
+    margin-left: layout.$spacing-03;
   }
 }
 
@@ -72,7 +72,7 @@
 html[dir='rtl'] {
   .link {
     svg {
-      margin-right: spacing.$spacing-03;
+      margin-right: layout.$spacing-03;
       margin-left: unset;
       transform: scale(-1, 1);
     }

package/src/patient-queue-metrics/metrics-header.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .metricsContainer {
   display: flex;
@@ -18,7 +18,7 @@
 
 .actionBtn {
   display: flex;
-  column-gap: 0.5rem;
+  column-gap: layout.$spacing-03;
 }
 
 .comboBtn {

package/src/patient-search/advanced-search.scss

@@ -1,17 +1,17 @@
-@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 *;
 
 .form {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: calc(100vh - 6rem);
+  height: calc(100vh - layout.$spacing-11);
 }
 
 .grid {
-  margin: 0 1rem;
-  padding: 0rem;
+  margin: 0 layout.$spacing-05;
+  padding: 0;
 }
 
 .row {
@@ -20,7 +20,7 @@
   :global(.cds--col) {
     :global(.cds--form-item) {
       &:not(:first-of-type):not(:last-of-type) {
-        margin: 1rem 0;
+        margin: layout.$spacing-05 0;
       }
     }
 
@@ -29,18 +29,18 @@
     }
 
     :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
-      width: 10rem;
+      width: layout.$spacing-13;
     }
   }
 }
 
 .heading {
   @include type.type-style('heading-compact-02');
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .spacer {
-  margin-top: 2rem;
+  margin-top: layout.$spacing-07;
   display: inline-block;
 }
 
@@ -48,7 +48,7 @@
   align-items: center;
   display: flex;
   justify-content: flex-start;
-  margin: spacing.$spacing-03 0;
+  margin: layout.$spacing-03 0;
   padding: 0;
   @include type.type-style('body-compact-01');
 
@@ -57,8 +57,8 @@
 
     svg {
       order: 1;
-      margin-right: 0.5rem;
-      margin-left: 0rem !important;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
     }
 
     span {
@@ -68,7 +68,7 @@
 }
 
 .advancePatientSearchContainer {
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
 
   & .backButton {
     margin: 0;
@@ -82,18 +82,18 @@
 .label01 {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: spacing.$spacing-03 0;
+  margin: layout.$spacing-03 0;
 }
 
 .formTextInput {
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .contentSwitcherContainer {
   display: flex;
   align-items: center;
-  height: spacing.$spacing-09;
-  margin-bottom: spacing.$spacing-05;
+  height: layout.$spacing-09;
+  margin-bottom: layout.$spacing-05;
 
   & > span {
     @include type.type-style('heading-compact-01');
@@ -104,21 +104,21 @@
 .formTitle {
   font-weight: bold;
   @include type.type-style('heading-compact-02');
-  margin-bottom: spacing.$spacing-02;
+  margin-bottom: layout.$spacing-02;
 }
 
 .fieldRangeSwitcher {
   width: 8rem;
-  margin: 0 spacing.$spacing-03 0;
+  margin: 0 layout.$spacing-03 0;
 }
 
 .genderSwitcher {
   width: 18rem;
-  margin: 0.25rem 0 1rem;
+  margin: layout.$spacing-02 0 layout.$spacing-05;
 }
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -126,26 +126,26 @@
 }
 
 .tablet {
-  padding: 1.5rem 1rem;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }
 
 .desktop {
-  padding: 0rem;
-  margin-top: spacing.$spacing-05;
+  padding: 0;
+  margin-top: layout.$spacing-05;
 }
 
 /* Desktop */
 :global(.omrs-breakpoint-gt-tablet) {
   .form {
-    height: calc(100vh - 6rem);
+    height: calc(100vh - layout.$spacing-11);
   }
 }
 
 /* Tablet */
 :global(.omrs-breakpoint-lt-desktop) {
   .form {
-    height: calc(100vh - 3rem);
+    height: calc(100vh - layout.$spacing-09);
   }
 }
 

package/src/patient-search/advanced-search.test.tsx

@@ -2,14 +2,16 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AdvancedSearch from './advanced-search.component';
 
-describe('AdvancedSearch: ', () => {
-  test('renders the advanced patient search in an overlay', () => {
-    renderAdvancedSearch();
+describe('AdvancedSearch', () => {
+  test('renders the advanced patient search in an overlay', async () => {
+    render(<AdvancedSearch toggleSearchType={jest.fn()} />);
 
     expect(screen.getByRole('button', { name: /back to simple search/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
-    expect(screen.findAllByText(/any/i));
+
+    await screen.findAllByText(/any/i);
+
     expect(screen.getByRole('tab', { name: /^male$/i })).toBeInTheDocument();
     expect(screen.getByRole('tab', { name: /^female$/i })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /name/i })).toBeInTheDocument();
@@ -22,8 +24,3 @@ describe('AdvancedSearch: ', () => {
     expect(screen.getByRole('textbox', { name: /post code/i })).toBeInTheDocument();
   });
 });
-
-function renderAdvancedSearch() {
-  const toggleSearchType = jest.fn();
-  render(<AdvancedSearch toggleSearchType={toggleSearchType} />);
-}

package/src/patient-search/basic-search.scss

@@ -1,11 +1,11 @@
-@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 *;
 
 .searchboxContainer {
   display: flex;
   align-items: center;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .searchboxLayer {
@@ -14,7 +14,7 @@
 
 .tileContainer {
   :global(.omrs-breakpoint-gt-tablet) & {
-    margin: 0 1.5rem 0;
+    margin: 0 layout.$spacing-06 0;
   }
 
   :global(.omrs-breakpoint-lt-desktop) & {
@@ -28,7 +28,7 @@
   flex-flow: column wrap;
   align-items: center;
   justify-content: center;
-  padding: 2rem 0 1.5rem;
+  padding: layout.$spacing-07 0 layout.$spacing-06;
   text-align: center;
   border: 1px solid $ui-03;
 }
@@ -43,7 +43,7 @@
 
   .secondaryText {
     width: 12rem;
-    margin-top: 0.25rem;
+    margin-top: layout.$spacing-02;
     @include type.type-style('body-01');
   }
 }
@@ -52,7 +52,7 @@
   @include type.type-style('heading-03');
   color: $text-02;
   width: 12rem;
-  margin: 3rem auto;
+  margin: layout.$spacing-09 auto;
   overflow: hidden;
   text-align: center;
 
@@ -68,12 +68,12 @@
   }
 
   &::before {
-    right: 1rem;
+    right: layout.$spacing-05;
     margin-left: -50%;
   }
 
   &::after {
-    left: 1rem;
+    left: layout.$spacing-05;
     margin-right: -50%;
   }
 }
@@ -113,13 +113,13 @@
   @include type.type-style('label-01');
   color: $text-02;
   border-bottom: 0.063rem solid $ui-03;
-  padding: spacing.$spacing-03 0rem;
+  padding: layout.$spacing-03 0;
 }
 
 .emptyResultText {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   margin-bottom: 0.313rem;
 }
 
@@ -130,8 +130,8 @@
 
 .emptySearchResultsTile {
   text-align: center;
-  margin-top: spacing.$spacing-05;
-  padding: spacing.$spacing-09 0rem;
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-09 0;
 }
 
 :global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {

package/src/patient-search/basic-search.test.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import BasicSearch from './basic-search.component';
 
-describe('BasicSearch: ', () => {
+describe('BasicSearch', () => {
   test('renders the basic patient search in an overlay', () => {
-    renderBasicSearch();
+    render(<BasicSearch toggleSearchType={jest.fn()} />);
 
     const searchbox = screen.getByRole('searchbox', { name: /search for a patient/i });
     const searchButton = screen.getByRole('button', { name: /^search$/i });
@@ -16,8 +16,3 @@ describe('BasicSearch: ', () => {
     expect(screen.getByText(/type the patient's name or unique id number/i)).toBeInTheDocument();
   });
 });
-
-function renderBasicSearch() {
-  const toggleSearchType = jest.fn();
-  render(<BasicSearch toggleSearchType={toggleSearchType} />);
-}

package/src/patient-search/hooks/useDefaultLocation.ts

@@ -9,6 +9,6 @@ export const useDefaultLoginLocation = () => {
   return {
     defaultFacility: data ? data?.data : null,
     isLoading: isLoading,
-    isError: error,
+    error,
   };
 };

package/src/patient-search/hooks/useQueueLocations.tsx

@@ -8,6 +8,7 @@ interface FHIRResponse {
   type: string;
   resourceType: string;
 }
+
 export function useQueueLocations() {
   const apiUrl = `${fhirBaseUrl}/Location?_summary=data&_tag=queue location`;
   const { data, error, isLoading } = useSWRImmutable<{ data: FHIRResponse }>(apiUrl, openmrsFetch);

package/src/patient-search/hooks/useScheduledVisits.ts

@@ -46,7 +46,7 @@ export function useScheduledVisits(patientUuid: string) {
 
   return {
     appointments: data ? { recentVisits, futureVisits } : null,
-    isError: error,
+    error,
     isLoading,
   };
 }

package/src/patient-search/patient-scheduled-visits.component.tsx

@@ -1,4 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import head from 'lodash-es/head';
+import { first } from 'rxjs/operators';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -27,16 +30,13 @@ import {
   useVisitTypes,
 } from '@openmrs/esm-framework';
 import { type Appointment, SearchTypes } from '../types';
-import styles from './patient-scheduled-visits.scss';
 import { postQueueEntry } from './visit-form/queue.resource';
-import { first } from 'rxjs/operators';
 import { convertTime12to24 } from '../helpers/time-helpers';
-import dayjs from 'dayjs';
-import head from 'lodash-es/head';
 import { useQueueLocations } from './hooks/useQueueLocations';
 import { useQueues } from '../hooks/useQueues';
 import { useMutateQueueEntries } from '../hooks/useQueueEntries';
 import { type ConfigObject } from '../config-schema';
+import styles from './patient-scheduled-visits.scss';
 
 enum visitType {
   RECENT = 'Recent',

package/src/patient-search/patient-scheduled-visits.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 *;
 
 .container {
   background-color: $ui-background;
@@ -15,7 +15,7 @@
 }
 
 .visitTile {
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 
   &:global(.cds--tile--is-selected:focus) {
     background-color: $color-blue-10;
@@ -37,19 +37,19 @@
 }
 
 .recentlyScheduledVisitsContainer {
-  margin-top: spacing.$spacing-06;
-  margin-bottom: spacing.$spacing-10;
+  margin-top: layout.$spacing-06;
+  margin-bottom: layout.$spacing-10;
 }
 
 .row {
-  margin: 0 spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
 }
 
 .backButton {
   align-items: center;
   display: flex;
   justify-content: flex-start;
-  margin: spacing.$spacing-03 0;
+  margin: layout.$spacing-03 0;
   padding: 0;
   @include type.type-style('body-compact-01');
 
@@ -58,8 +58,8 @@
 
     svg {
       order: 1;
-      margin-right: 0.5rem;
-      margin-left: 0rem !important;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
     }
 
     span {
@@ -84,7 +84,7 @@
 }
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -94,7 +94,7 @@
 .text-divider {
   display: flex;
   align-items: center;
-  margin: spacing.$spacing-08 25%;
+  margin: layout.$spacing-08 25%;
   @include type.type-style('heading-03');
   color: $text-02;
 }
@@ -108,24 +108,24 @@
 }
 
 .text-divider::before {
-  margin-right: spacing.$spacing-05;
+  margin-right: layout.$spacing-05;
 }
 
 .text-divider::after {
-  margin-left: spacing.$spacing-05;
+  margin-left: layout.$spacing-05;
 }
 
 .buttonContainer {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .prioritySwitcher {
-  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  margin: layout.$spacing-03 0 layout.$spacing-03;
 }
 
 .emptyAppointment {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }

package/src/patient-search/patient-scheduled-visits.test.tsx

@@ -1,44 +1,39 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig, useLocations, useSession } from '@openmrs/esm-framework';
 import { renderWithSwr } from 'tools';
+import { type ConfigObject, configSchema } from '../config-schema';
 import { mockLocations, mockPatient, mockPatientsVisits, mockSession } from '__mocks__';
-import { type ConfigObject, useConfig } from '@openmrs/esm-framework';
 import PatientScheduledVisits from './patient-scheduled-visits.component';
 
-const mockedUseConfig = useConfig as jest.Mock;
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockToggleSearchType = jest.fn();
+const mockUseLocations = useLocations as jest.Mock;
+const mockUseSession = jest.mocked(useSession);
 
-const testProps = {
+const defaultProps = {
   appointments: { recentVisits: mockPatientsVisits.recentVisits, futureVisits: [] },
-  toggleSearchType: mockToggleSearchType,
-  patientUuid: mockPatient.uuid,
   closePanel: () => false,
+  closeWorkspace: jest.fn(),
+  patientUuid: mockPatient.uuid,
+  toggleSearchType: mockToggleSearchType,
 };
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    openmrsFetch: jest.fn(),
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data),
-    useSession: jest.fn().mockImplementation(() => mockSession.data),
-  };
-});
 describe('ScheduledVisits', () => {
-  beforeEach(() =>
-    mockedUseConfig.mockReturnValue({
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
       concepts: {},
-    } as ConfigObject),
-  );
+    } as ConfigObject);
+    mockUseLocations.mockReturnValue(mockLocations.data.results);
+    mockUseSession.mockReturnValue(mockSession.data);
+  });
+
   it('should display recent and future scheduled visits', async () => {
-    renderPatientScheduledVisits();
+    renderWithSwr(<PatientScheduledVisits {...defaultProps} />);
 
     expect(screen.getByText(/Cardiology Consultation 1/i)).toBeInTheDocument();
     expect(screen.getByText(/08-Aug-2022, 02:56 PM · 10 Engineer VCT/i)).toBeInTheDocument();
     expect(screen.getByText(/No appointments found/i)).toBeInTheDocument();
   });
 });
-
-function renderPatientScheduledVisits() {
-  renderWithSwr(<PatientScheduledVisits {...testProps} />);
-}

package/src/patient-search/patient-search.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 *;
 
 .patientSearchContainer {
   height: 100%;
@@ -22,14 +22,14 @@
 }
 
 .patientPhoto {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .backButton {
   align-items: center;
   display: flex;
   justify-content: flex-start;
-  margin: spacing.$spacing-03 0;
+  margin: layout.$spacing-03 0;
   padding: 0;
   @include type.type-style('body-compact-01');
 
@@ -38,8 +38,8 @@
 
     svg {
       order: 1;
-      margin-right: spacing.$spacing-03;
-      margin-left: 0rem !important;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
     }
 
     span {

package/src/patient-search/patient-search.workspace.tsx

@@ -43,7 +43,7 @@ const PatientSearch: React.FC<PatientSearchProps> = ({
   const { activeVisit } = useVisit(selectedPatientUuid);
   const [searchType, setSearchType] = useState<SearchTypes>(SearchTypes.SCHEDULED_VISITS);
   const [showContactDetails, setContactDetails] = useState(false);
-  const { appointments, isLoading, isError } = useScheduledVisits(selectedPatientUuid);
+  const { appointments, isLoading, error } = useScheduledVisits(selectedPatientUuid);
 
   const hasAppointments = !(isNil(appointments?.futureVisits) && isNil(appointments?.recentVisits));
 
@@ -109,11 +109,11 @@ const PatientSearch: React.FC<PatientSearchProps> = ({
           <ExistingVisitFormComponent visit={activeVisit} closeWorkspace={closeWorkspace} />
         ) : (
           <>
-            {isError ? (
-              <ErrorState headerTitle={t('errorFetchingAppointments', 'Error fetching appointments')} error={isError} />
+            {error ? (
+              <ErrorState headerTitle={t('errorFetchingAppointments', 'Error fetching appointments')} error={error} />
             ) : null}
 
-            {isLoading && !isError ? (
+            {isLoading && !error ? (
               <DataTableSkeleton role="progressbar" />
             ) : searchType === SearchTypes.SCHEDULED_VISITS && hasAppointments ? (
               <PatientScheduledVisits