@kenyaemr/esm-active-visits-app 7.0.3-pre.89 → 8.0.1-pre.95

package/src/visits-summary/visit-detail-overview.scss

@@ -1,7 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   display: flex;
@@ -13,7 +12,7 @@
 .encounterHeading {
   text-align: left;
   width: 100%;
-  margin: 0 1rem 1.3125rem;
+  margin: 0 layout.$spacing-05 1.3125rem;
   color: $ui-05;
 }
 
@@ -23,13 +22,13 @@
   justify-content: space-between;
 
   .bodyLong01 {
-    margin: 0.25rem 0;
+    margin: layout.$spacing-02 0;
   }
 }
 
 .medicationContainer {
   background-color: $ui-01;
-  padding: 1rem;
+  padding: layout.$spacing-05;
   width: 100% !important;
 }
 
@@ -40,7 +39,7 @@
 .metadata {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: spacing.$spacing-03 0 spacing.$spacing-05;
+  margin: layout.$spacing-03 0 layout.$spacing-05;
 }
 
 .visitsDetailWidgetContainer {
@@ -52,14 +51,14 @@
 .visitsDetailHeaderContainer {
   display: flex;
   justify-content: space-between;
-  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
   background-color: $ui-background;
 }
 
 .visitsDetailHeaderContainer > h4:after {
   content: '';
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid $brand-teal-01;
 }
@@ -85,14 +84,14 @@
 .visitEmptyState {
   text-align: center;
   background-color: white;
-  padding: 2rem;
+  padding: layout.$spacing-07;
   border: 1px solid $ui-03;
   width: 100%;
 }
 
 .encounterEmptyState {
   text-align: center;
-  margin: 0 1rem 1rem 1rem;
+  margin: 0 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
 }
 
 .expandedRow > td {
@@ -106,8 +105,8 @@
 .observation {
   display: grid;
   grid-template-columns: max-content auto;
-  grid-gap: 0.5rem;
-  margin: 0.5rem 0;
+  grid-gap: layout.$spacing-03;
+  margin: layout.$spacing-03 0;
 }
 
 .observation > span {
@@ -118,8 +117,8 @@
   background-color: $ui-background;
   display: grid;
   grid-template-columns: max-content auto;
-  padding: 1rem 0rem;
-  margin: 0 1rem;
+  padding: layout.$spacing-05 0;
+  margin: 0 layout.$spacing-05;
 
   :global(.cds--tabs) {
     max-height: 7rem;
@@ -131,7 +130,7 @@
 }
 
 .verticalTabs {
-  margin: 1rem 0;
+  margin: layout.$spacing-05 0;
   scroll-behavior: smooth;
 
   > ul {
@@ -139,7 +138,7 @@
   }
 
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0rem;
+    margin-left: 0;
   }
 
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
@@ -151,7 +150,7 @@
 .tab {
   outline: 0;
   outline-offset: 0;
-  min-height: spacing.$spacing-07;
+  min-height: layout.$spacing-07;
 
   &:active,
   &:focus {
@@ -162,13 +161,13 @@
     border-left: 3px solid var(--brand-03);
     border-bottom: none;
     font-weight: 600;
-    margin-left: 0rem !important;
+    margin-left: 0 !important;
   }
 
   &[aria-selected='false'] {
     border-bottom: none;
     border-left: 2px solid $ui-03;
-    margin-left: 0rem !important;
+    margin-left: 0 !important;
   }
 }
 
@@ -186,8 +185,8 @@
 
 .medicationBlock {
   background-color: $ui-01;
-  padding: 0.625rem 6.75rem 0.75rem 1.063rem;
-  margin-top: 1.5rem;
+  padding: 0.625rem 6.75rem layout.$spacing-04 1.063rem;
+  margin-top: layout.$spacing-06;
   width: 100% !important;
 }
 
@@ -204,13 +203,13 @@
 .diagnosesList {
   display: flex;
   flex-flow: row wrap;
-  padding-bottom: 0.5rem;
-  margin: 0 1rem;
+  padding-bottom: layout.$spacing-03;
+  margin: 0 layout.$spacing-05;
   border-bottom: 1px solid $ui-03;
 }
 
 .actions {
-  margin: 0 1rem;
+  margin: 0 layout.$spacing-05;
 }
 
 .contentSwitcher {
@@ -220,17 +219,17 @@
   }
 
   :global(.cds--content-switcher__label) {
-    height: spacing.$spacing-05;
+    height: layout.$spacing-05;
   }
 }
 
 .notesContainer {
-  margin-bottom: 2rem;
+  margin-bottom: layout.$spacing-07;
 }
 
 .noteText {
   background-color: $ui-01;
-  padding: 1rem;
+  padding: layout.$spacing-05;
   width: 100% !important;
   white-space: pre-wrap;
 }
@@ -239,7 +238,7 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4 {
     @include type.type-style('heading-compact-02');
@@ -248,7 +247,7 @@
     &:after {
       content: '';
       display: block;
-      width: 2rem;
+      width: layout.$spacing-07;
       padding-top: 3px;
       border-bottom: 0.375rem solid;
       @include brand-03(border-bottom-color);
@@ -263,8 +262,8 @@
 .emptyStateContent {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .emptyStateContainer {
@@ -276,10 +275,34 @@
   padding-bottom: 0;
 }
 
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.caption01 {
+  @include type.type-style('legal-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.text01 {
+  color: $ui-05;
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .visitsDetailHeaderContainer {
-    padding: spacing.$spacing-04 spacing.$spacing-05 spacing.$spacing-04 0;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
     h4 {
       text-align: right;
     }
@@ -288,8 +311,8 @@ html[dir='rtl'] {
         & :first-child {
           border-bottom-left-radius: unset;
           border-top-left-radius: unset;
-          border-bottom-right-radius: spacing.$spacing-02;
-          border-top-right-radius: spacing.$spacing-02;
+          border-bottom-right-radius: layout.$spacing-02;
+          border-top-right-radius: layout.$spacing-02;
         }
         & :first-child[aria-selected='false'] {
           border-left: unset;
@@ -298,8 +321,8 @@ html[dir='rtl'] {
         & :last-child {
           border-bottom-right-radius: unset;
           border-top-right-radius: unset;
-          border-bottom-left-radius: spacing.$spacing-02;
-          border-top-left-radius: spacing.$spacing-02;
+          border-bottom-left-radius: layout.$spacing-02;
+          border-top-left-radius: layout.$spacing-02;
         }
         & :last-child[aria-selected='false'] {
           border-right: unset;

package/src/visits-summary/visit-detail.test.tsx

@@ -1,55 +1,59 @@
 import React from 'react';
-import { render, screen, act } from '@testing-library/react';
-import VisitDetailComponent from './visit-detail.component';
-import { useVisit } from './visit.resource';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { formatDate } from '@openmrs/esm-framework';
+import { useVisit } from './visit.resource';
+import VisitDetailComponent from './visit-detail.component';
 
-jest.mock('./visit.resource');
-
-const mockedUseVisit = useVisit as jest.Mock;
+const defaultProps = {
+  patientUuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+  visitUuid: '497b8b17-54ec-4726-87ec-3c4da8cdcaeb',
+};
+const mockUseVisit = jest.mocked(useVisit);
 
-describe('VisitDetailComponent', () => {
-  const visitUuid = '497b8b17-54ec-4726-87ec-3c4da8cdcaeb';
-  const patientUuid = '691eed12-c0f1-11e2-94be-8c13b969e334';
+jest.mock('./visit.resource');
 
-  it('renders loading indicator when data is loading', () => {
-    mockedUseVisit.mockReturnValueOnce({
+describe('VisitDetail', () => {
+  it('renders a loading spinner when data is loading', () => {
+    mockUseVisit.mockReturnValueOnce({
       visit: null,
+      error: undefined,
       isLoading: true,
+      isValidating: false,
     });
 
-    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+    render(<VisitDetailComponent {...defaultProps} />);
 
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('should render visit details and switches when data is available', () => {
-    let visitDate = new Date();
-    mockedUseVisit.mockReturnValueOnce({
+  it('renders a visit detail overview when data is available', () => {
+    const mockVisitDate = new Date();
+    mockUseVisit.mockReturnValueOnce({
       visit: {
-        uuid: visitUuid,
-        visitType: { display: 'Some Visit Type' },
-        startDatetime: visitDate,
         encounters: [],
+        startDatetime: mockVisitDate.toISOString(),
+        uuid: defaultProps.visitUuid,
+        visitType: { display: 'Some Visit Type', uuid: 'some-visit-type-uuid' },
       },
+      error: undefined,
       isLoading: false,
+      isValidating: false,
     });
 
-    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+    render(<VisitDetailComponent {...defaultProps} />);
 
     expect(screen.getByText(/Some Visit Type/)).toBeInTheDocument();
-    expect(screen.getByText(formatDate(visitDate), { collapseWhitespace: false })).toBeInTheDocument();
-
+    expect(screen.getByText(formatDate(mockVisitDate), { collapseWhitespace: false })).toBeInTheDocument();
     expect(screen.getByText('All Encounters')).toBeInTheDocument();
     expect(screen.getByText('Visit Summary')).toBeInTheDocument();
   });
 
-  it('should render EncounterLists when "All Encounters" switch is selected', () => {
-    mockedUseVisit.mockReturnValue({
+  it('render the Encounter Lists view when the "All Encounters" tab is clicked', async () => {
+    const user = userEvent.setup();
+
+    mockUseVisit.mockReturnValue({
       visit: {
-        uuid: visitUuid,
-        visitType: { display: 'Some Visit Type' },
-        startDatetime: '2023-07-30T12:34:56Z',
         encounters: [
           {
             uuid: 'encounter-1',
@@ -59,25 +63,26 @@ describe('VisitDetailComponent', () => {
             obs: [],
           },
         ],
+        startDatetime: '2023-07-30T12:34:56Z',
+        visitType: { display: 'Some Visit Type', uuid: 'some-visit-type-uuid' },
+        uuid: defaultProps.visitUuid,
       },
+      error: undefined,
       isLoading: false,
+      isValidating: false,
     });
 
-    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
-
-    act(() => {
-      screen.getByText('All Encounters').click();
-    });
+    render(<VisitDetailComponent {...defaultProps} />);
 
+    await user.click(screen.getByText('All Encounters'));
     expect(screen.getByTestId('encountersTable')).toBeInTheDocument();
   });
 
-  it('should render VisitSummaries when "Visit Summary" switch is selected', () => {
-    mockedUseVisit.mockReturnValue({
+  it('renders the Visit Summaries view when the "Visit Summary" tab is clicked', async () => {
+    const user = userEvent.setup();
+
+    mockUseVisit.mockReturnValue({
       visit: {
-        uuid: visitUuid,
-        visitType: { display: 'Some Visit Type' },
-        startDatetime: '2023-07-30T12:34:56Z',
         encounters: [
           {
             uuid: 'encounter-1',
@@ -96,27 +101,18 @@ describe('VisitDetailComponent', () => {
             orders: [],
           },
         ],
+        startDatetime: '2023-07-30T12:34:56Z',
+        visitType: { display: 'Some Visit Type', uuid: 'some-visit-type-uuid' },
+        uuid: defaultProps.visitUuid,
       },
+      error: undefined,
       isLoading: false,
+      isValidating: false,
     });
 
-    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
-
-    act(() => {
-      screen.getByText('Visit Summary').click();
-    });
+    render(<VisitDetailComponent {...defaultProps} />);
 
+    await user.click(screen.getByText('Visit Summary'));
     expect(screen.getByRole('tablist', { name: 'Visit summary tabs' })).toBeInTheDocument();
   });
-
-  it('should render loading indicator when data is loading', () => {
-    mockedUseVisit.mockReturnValue({
-      visit: null,
-      isLoading: false,
-    });
-
-    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
-
-    expect(screen.queryByRole('button', { name: 'All Encounters' })).toBeNull();
-  });
 });

package/src/visits-summary/visit.resource.ts

@@ -1,5 +1,5 @@
-import { openmrsFetch, restBaseUrl, type OpenmrsResource, type Visit } from '@openmrs/esm-framework';
 import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl, type OpenmrsResource, type Visit } from '@openmrs/esm-framework';
 
 export interface Encounter {
   uuid: string;
@@ -158,7 +158,7 @@ export function useVisit(visitUuid: string) {
 
   return {
     visit: data ? data.data : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };

package/src/visits-summary/visits-components/encounter-observations.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { type Observation } from '../visit.resource';
 import EncounterObservations from './encounter-observations.component';
 
 describe('EncounterObservations', () => {
@@ -21,7 +22,7 @@ describe('EncounterObservations', () => {
       { display: 'Temperature: 98.6°F' },
       { display: 'Blood Pressure: 120/80 mmHg' },
       { display: 'Heart Rate: 72 bpm' },
-    ];
+    ] as Array<Observation>;
     render(<EncounterObservations observations={observations} />);
 
     expect(screen.getByText('Temperature:')).toBeInTheDocument();

package/translations/am.json

@@ -17,18 +17,20 @@
   "noDiagnosesFound": "No diagnoses found",
   "noEncountersFound": "No encounters found",
   "noMedicationsFound": "No medications found",
-  "noNotesToShowForPatient": "There are no notes to display for this patient",
+  "noNotesToShowForPatient": "No hay notas para mostrar de este paciente",
   "noObservationsFound": "No observations found",
   "notes": "Notes",
   "noVisitsToDisplay": "No visits to display",
   "orderDurationAndUnit": "for {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "Indefinite duration",
+  "patients": "Patients",
   "provider": "Provider",
   "quantity": "Quantity",
   "refills": "Refills",
   "tests": "Tests",
   "thereIsNoInformationToDisplayHere": "There is no information to display here",
   "time": "Time",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "Visit Time",
   "visitSummary": "Visit Summary",
   "visitType": "Visit Type"

package/translations/ar.json

@@ -23,12 +23,14 @@
   "noVisitsToDisplay": "لا زيارات للعرض",
   "orderDurationAndUnit": "لمدة {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "مدة غير محددة",
+  "patients": "Patients",
   "provider": "مقدم الخدمة",
   "quantity": "Quantity",
   "refills": "إعادة التعبئة",
   "tests": "الاختبارات",
   "thereIsNoInformationToDisplayHere": "لا توجد معلومات لعرضها هنا",
   "time": "الوقت",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "وقت الزيارة",
   "visitSummary": "ملخص الزيارة",
   "visitType": "نوع الزيارة"

package/translations/en.json

@@ -23,12 +23,14 @@
   "noVisitsToDisplay": "No visits to display",
   "orderDurationAndUnit": "for {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "Indefinite duration",
+  "patients": "Patients",
   "provider": "Provider",
   "quantity": "Quantity",
   "refills": "Refills",
   "tests": "Tests",
   "thereIsNoInformationToDisplayHere": "There is no information to display here",
   "time": "Time",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "Visit Time",
   "visitSummary": "Visit Summary",
   "visitType": "Visit Type"

package/translations/es.json

@@ -21,14 +21,16 @@
   "noObservationsFound": "No se encontraron observaciones",
   "notes": "Notas",
   "noVisitsToDisplay": "No hay visitas para mostrar",
-  "orderDurationAndUnit": "para {duración} {duraciónUnidad}",
+  "orderDurationAndUnit": "para {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "Duración indefinida",
+  "patients": "Patients",
   "provider": "Proveedor",
   "quantity": "Cantidad",
   "refills": "Recargas",
   "tests": "Pruebas",
   "thereIsNoInformationToDisplayHere": "No hay información para mostrar aquí",
   "time": "Tiempo",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "Tiempo de Visita",
   "visitSummary": "Resumen de Visita",
   "visitType": "Tipo de Visita"

package/translations/fr.json

@@ -17,18 +17,20 @@
   "noDiagnosesFound": "Aucun diagnostic",
   "noEncountersFound": "Aucune visite trouvée",
   "noMedicationsFound": "Aucun médicament trouvé",
-  "noNotesToShowForPatient": "There are no notes to display for this patient",
+  "noNotesToShowForPatient": "Il n'y a pas de notes à afficher pour ce patient",
   "noObservationsFound": "Aucune observation trouvée",
   "notes": "Informations complémentaires",
   "noVisitsToDisplay": "No visits to display",
   "orderDurationAndUnit": "Pour {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "Durée illimitée",
+  "patients": "Patients",
   "provider": "Fournisseur",
   "quantity": "Quantity",
   "refills": "Recharges",
   "tests": "Tests",
   "thereIsNoInformationToDisplayHere": "Il n'y pas d'information à présenter ici",
   "time": "Heure",
+  "totalVisits": "Consultation total du jour",
   "visitStartTime": "Heure de la consultation",
   "visitSummary": "Compte rendu de la consultation",
   "visitType": "Type de consultation"

package/translations/he.json

@@ -23,12 +23,14 @@
   "noVisitsToDisplay": "אין ביקורים להצגה",
   "orderDurationAndUnit": "למשך {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "למשך זמן בלתי מוגבל",
+  "patients": "Patients",
   "provider": "ספק",
   "quantity": "Quantity",
   "refills": "תערובות",
   "tests": "בדיקות",
   "thereIsNoInformationToDisplayHere": "אין מידע להצגה כאן",
   "time": "זמן",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "שעת התחלת הביקור",
   "visitSummary": "סיכום הביקור",
   "visitType": "סוג הביקור"

package/translations/km.json

@@ -23,12 +23,14 @@
   "noVisitsToDisplay": "No visits to display",
   "orderDurationAndUnit": "សម្រាប់ {រយៈពេល} {ឯកតារយៈពេល}",
   "orderIndefiniteDuration": "រយៈពេលមិនកំណត់",
+  "patients": "Patients",
   "provider": "អ្នកផ្តល់សេវា",
   "quantity": "Quantity",
   "refills": "ការបំពេញបន្ថែម",
   "tests": "ការធ្វើតេស្ត",
   "thereIsNoInformationToDisplayHere": "មិនមានព័ត៌មានដើម្បីបង្ហាញនៅទីនេះទេ",
   "time": "ម៉ោងពេល",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "ម៉ោងពេលពិនិត្យជំងឺ",
   "visitSummary": "សេចក្តីសង្ខេបពីការពិនិត្យជំងឺ",
   "visitType": "ប្រភេទនៃជំងឺពិនិត្យ"

package/translations/zh.json

@@ -23,12 +23,14 @@
   "noVisitsToDisplay": "没有就诊可显示",
   "orderDurationAndUnit": "持续 {{duration}} {{durationUnit}}。",
   "orderIndefiniteDuration": "无限期",
+  "patients": "患者",
   "provider": "提供者",
   "quantity": "数量",
   "refills": "补充处方",
   "tests": "检验",
   "thereIsNoInformationToDisplayHere": "这里没有可显示的信息",
   "time": "时间",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "就诊时间",
   "visitSummary": "就诊总结",
   "visitType": "就诊类型"

package/translations/zh_CN.json

@@ -23,12 +23,14 @@
   "noVisitsToDisplay": "没有就诊可显示",
   "orderDurationAndUnit": "持续 {{duration}} {{durationUnit}}。",
   "orderIndefiniteDuration": "无限期",
+  "patients": "患者",
   "provider": "提供者",
   "quantity": "数量",
   "refills": "补充处方",
   "tests": "检验",
   "thereIsNoInformationToDisplayHere": "这里没有可显示的信息",
   "time": "时间",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "就诊时间",
   "visitSummary": "就诊总结",
   "visitType": "就诊类型"