-
- {isValidating ? (
-
-
-
- ) : null}
-
-
{
- setContentSwitcherValue(index);
- setSwitchedView(true);
- }}
- >
-
-
-
-
-
|
-
-
-
- {(() => {
- if (contentSwitcherValue === AppointmentTypes.UPCOMING) {
- if (appointmentsData.upcomingAppointments?.length) {
- return (
-
- );
- }
- return (
-
-
-
-
- {t(
- 'noUpcomingAppointmentsForPatient',
- 'There are no upcoming appointments to display for this patient',
- )}
-
-
-
- );
- }
- if (contentSwitcherValue === AppointmentTypes.TODAY) {
- if (appointmentsData.todaysAppointments?.length) {
- return (
-
- );
- }
- return (
-
-
-
-
- {t(
- 'noCurrentAppointments',
- 'There are no appointments scheduled for today to display for this patient',
- )}
-
-
-
- );
- }
-
- if (contentSwitcherValue === AppointmentTypes.PAST) {
- if (appointmentsData.pastAppointments?.length) {
- return (
-
- );
- }
- return (
-
-
-
-
- {t('noPastAppointments', 'There are no past appointments to display for this patient')}
-
-
-
- );
- }
- })()}
-
- );
- }
-};
-
-export default AppointmentsBase;
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss b/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss
deleted file mode 100644
index 307c3a490c..0000000000
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '@openmrs/esm-styleguide/src/vars';
-
-// TO DO Move this styles to style - guide
-// https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss
-$color-blue-30 : #a6c8ff;
-$color-blue-10: #edf5ff;
-
-.widgetCard {
- border: 1px solid $ui-03;
-}
-
-.productiveHeading01 {
- @include type.type-style("heading-compact-01");
-}
-
-.contentSwitcherWrapper {
- display: flex;
- width: fit-content;
- justify-content: flex-end;
- align-items: center;
- width: 60%;
-}
-
-.contentSwitcherWrapper > div > button {
- background-color: $ui-02;
-}
-
-.contentSwitcherWrapper > div button:first-child {
- border-top: 1px solid $color-blue-30;
- border-bottom: 1px solid $color-blue-30;
- border-left: 1px solid $color-blue-30;
- border-right: none;
- border-radius: spacing.$spacing-02 0 0px spacing.$spacing-02;
-}
-
-.contentSwitcherWrapper > div button:last-child {
- border-top: 1px solid $color-blue-30;
- border-bottom: 1px solid $color-blue-30;
- border-right: 1px solid $color-blue-30;
- border-left: none;
- border-radius: 0px spacing.$spacing-02 spacing.$spacing-02 0px;
-}
-
-.contentSwitcherWrapper > div > button[aria-selected=true],
-.contentSwitcherWrapper > div > button[aria-selected=true]:first-child {
- background-color: $color-blue-10;
- color: $color-blue-60-2;
- border-color: $color-blue-60-2;
- border-right: 1px solid $color-blue-60-2;
-}
-
-.contentSwitcherWrapper > div > button[aria-selected=true],
-.contentSwitcherWrapper > div > button[aria-selected=true]:last-child {
- background-color: $color-blue-10;
- color: $color-blue-60-2;
- border-color: $color-blue-60-2;
- border-left: 1px solid $color-blue-60-2;
-}
-
-.contentSwitcherWrapper > div > button[aria-selected=true]:focus {
- box-shadow: none;
-}
-
-.divider {
- width: 1px;
- height: spacing.$spacing-05;
- color: colors.$gray-20;
- margin: 0 spacing.$spacing-05;
-}
-
-.content {
- @include type.type-style("heading-compact-01");
- color: $text-02;
- margin-top: spacing.$spacing-05;
- margin-bottom: spacing.$spacing-03;
-}
-
-.tile {
- text-align: center;
-}
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.test.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-base.test.tsx
deleted file mode 100644
index e8aff24abb..0000000000
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-base.test.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { openmrsFetch, usePagination } from '@openmrs/esm-framework';
-import { mockAppointmentsData } from '__mocks__';
-import { mockPatient, patientChartBasePath, renderWithSwr, waitForLoadingToFinish } from 'tools';
-import AppointmentsBase from './appointments-base.component';
-
-const testProps = {
- basePath: patientChartBasePath,
- patientUuid: mockPatient.id,
-};
-
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
-const mockUsePagination = usePagination as jest.Mock;
-
-jest.mock('@openmrs/esm-framework', () => {
- const originalModule = jest.requireActual('@openmrs/esm-framework');
-
- return {
- ...originalModule,
- usePagination: jest.fn().mockImplementation(() => ({
- currentPage: 1,
- goTo: () => {},
- results: [],
- })),
- };
-});
-
-describe('AppointmensOverview', () => {
- it('renders an empty state if appointments data is unavailable', async () => {
- mockOpenmrsFetch.mockReturnValueOnce({ data: [] });
-
- renderAppointments();
-
- await waitForLoadingToFinish();
-
- expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
- expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
- });
-
- it('renders an error state if there was a problem fetching appointments data', async () => {
- const user = userEvent.setup();
-
- const error = {
- message: 'Internal server error',
- response: {
- status: 500,
- statusText: 'Internal server error',
- },
- };
-
- mockOpenmrsFetch.mockRejectedValueOnce(error);
-
- renderAppointments();
-
- await waitForLoadingToFinish();
-
- expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
- expect(
- screen.getByText(
- 'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
- ),
- ).toBeInTheDocument();
- });
-
- it(`renders a tabular overview of the patient's appointment schedule if available`, async () => {
- const user = userEvent.setup();
-
- mockOpenmrsFetch.mockReturnValueOnce(mockAppointmentsData);
- mockUsePagination.mockImplementation(() => ({
- currentPage: 1,
- goTo: () => {},
- results: mockAppointmentsData.data,
- }));
-
- renderAppointments();
-
- await waitForLoadingToFinish();
-
- expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
- expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
-
- const upcomingAppointmentsTab = screen.getByRole('tab', { name: /upcoming/i });
- const pastAppointmentsTab = screen.getByRole('tab', { name: /past/i });
-
- expect(screen.getByRole('tablist')).toContainElement(upcomingAppointmentsTab);
- expect(screen.getByRole('tablist')).toContainElement(pastAppointmentsTab);
- expect(screen.getByTitle(/Empty data illustration/i)).toBeInTheDocument();
- expect(screen.getByText(/There are no upcoming appointments to display for this patient/i)).toBeInTheDocument();
-
- await user.click(pastAppointmentsTab);
- expect(screen.getByRole('table')).toBeInTheDocument();
-
- const expectedColumnHeaders = [/date/, /location/, /service/];
- expectedColumnHeaders.forEach((header) => {
- expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
- });
-
- expect(screen.getAllByRole('row').length).toEqual(13);
-
- const previousPageButton = screen.getByRole('button', { name: /previous page/i });
- const nextPageButton = screen.getByRole('button', { name: /next page/i });
-
- expect(previousPageButton).toBeDisabled();
- expect(nextPageButton).not.toBeDisabled();
- });
-});
-
-function renderAppointments() {
- renderWithSwr(