@kenyaemr/esm-appointments-app 7.0.2-pre.65

package/src/form/appointments-form.resource.ts

@@ -0,0 +1,165 @@
+import dayjs from 'dayjs';
+import useSWR, { useSWRConfig } from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import {
+  type AppointmentPayload,
+  type AppointmentService,
+  type AppointmentsFetchResponse,
+  type RecurringAppointmentsPayload,
+} from '../types';
+import isToday from 'dayjs/plugin/isToday';
+import { useCallback } from 'react';
+dayjs.extend(isToday);
+
+const appointmentUrlMatcher = '/ws/rest/v1/appointment';
+const appointmentsSearchUrl = '/ws/rest/v1/appointments/search';
+
+export function useMutateAppointments() {
+  const { mutate } = useSWRConfig();
+  // this mutate is intentionally broad because there may be many different keys that need to be invalidated when appointments are updated
+  const mutateAppointments = useCallback(
+    () =>
+      mutate((key) => {
+        return (
+          (typeof key === 'string' && key.startsWith(appointmentUrlMatcher)) ||
+          (Array.isArray(key) && key[0].startsWith(appointmentUrlMatcher))
+        );
+      }),
+    [mutate],
+  );
+
+  return {
+    mutateAppointments,
+  };
+}
+
+export function useAppointments(patientUuid: string, startDate: string, abortController: AbortController) {
+  /*
+    SWR isn't meant to make POST requests for data fetching. This is a consequence of the API only exposing this resource via POST.
+    This works but likely isn't recommended.
+  */
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<AppointmentsFetchResponse, Error>(
+    appointmentsSearchUrl,
+    fetcher,
+  );
+
+  const appointments = data?.data?.length ? data.data : null;
+
+  const pastAppointments = appointments
+    ?.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) =>
+      dayjs(new Date(startDateTime).toISOString()).isBefore(new Date().setHours(0, 0, 0, 0)),
+    );
+
+  const upcomingAppointments = appointments
+    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isAfter(new Date()));
+
+  const todaysAppointments = appointments
+    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isToday());
+
+  return {
+    data: data ? { pastAppointments, upcomingAppointments, todaysAppointments } : null,
+    isError: error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+}
+
+export function useAppointmentService() {
+  const { data, error, isLoading } = useSWR<{ data: Array<AppointmentService> }, Error>(
+    `${restBaseUrl}/appointmentService/all/full`,
+    openmrsFetch,
+  );
+
+  return {
+    data: data ? data.data : null,
+    isError: error,
+    isLoading,
+  };
+}
+
+export function saveAppointment(appointment: AppointmentPayload, abortController: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/appointment`, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: appointment,
+  });
+}
+
+export function saveRecurringAppointments(
+  recurringAppointments: RecurringAppointmentsPayload,
+  abortController: AbortController,
+) {
+  return openmrsFetch(`${restBaseUrl}/recurring-appointments`, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: recurringAppointments,
+  });
+}
+
+// TODO refactor to use SWR?
+export function getAppointmentsByUuid(appointmentUuid: string, abortController: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/appointments/${appointmentUuid}`, {
+    signal: abortController.signal,
+  });
+}
+
+// TODO refactor to use SWR?
+export function getAppointmentService(abortController: AbortController, uuid) {
+  return openmrsFetch(`${restBaseUrl}/appointmentService?uuid=` + uuid, {
+    signal: abortController.signal,
+  });
+}
+
+export const cancelAppointment = async (toStatus: string, appointmentUuid: string) => {
+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const statusChangeTime = dayjs(new Date()).format(omrsDateFormat);
+  const url = `${restBaseUrl}/appointments/${appointmentUuid}/status-change`;
+  return await openmrsFetch(url, {
+    body: { toStatus, onDate: statusChangeTime, timeZone: timeZone },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const checkAppointmentConflict = async (appointmentPayload: AppointmentPayload) => {
+  return await openmrsFetch(`${restBaseUrl}/appointments/conflicts`, {
+    method: 'POST',
+    body: {
+      patientUuid: appointmentPayload.patientUuid,
+      serviceUuid: appointmentPayload.serviceUuid,
+      startDateTime: appointmentPayload.startDateTime,
+      endDateTime: appointmentPayload.endDateTime,
+      providers: [],
+      locationUuid: appointmentPayload.locationUuid,
+      appointmentKind: appointmentPayload.appointmentKind,
+    },
+    headers: { 'Content-Type': 'application/json' },
+  });
+};

package/src/form/appointments-form.scss

@@ -0,0 +1,113 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+$openmrs-background-grey: #ededed;
+
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formWrapper {
+  background-color: $openmrs-background-grey;
+  margin-top: spacing.$spacing-09;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formWrapper {
+  background-color: colors.$white;
+}
+
+.formGroup {
+  display: flex;
+  margin-bottom: spacing.$spacing-02;
+  padding: spacing.$spacing-05;
+
+  checkbox {
+    color: colors.$gray-70;
+    @include type.type-style('heading-compact-02');
+    margin-bottom: spacing.$spacing-03;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formGroup {
+  flex-direction: column;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup {
+  flex-direction: row;
+
+  .heading {
+    flex: 1;
+  }
+
+  div {
+    flex: 3;
+  }
+}
+
+.heading {
+  color: colors.$gray-70;
+  @include type.type-style('heading-compact-02');
+  margin-bottom: spacing.$spacing-03;
+}
+
+.inputContainer {
+  display: flex;
+  flex-flow: row wrap;
+  gap: spacing.$spacing-05;
+  align-items: center;
+}
+
+.dateTimeFields {
+  max-width: 100%;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .dateTimeFields {
+  max-width: 32.25rem;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.loader {
+  display: flex;
+  background-color: $openmrs-background-grey;
+  justify-content: center;
+  min-height: spacing.$spacing-09;
+  height: 100vh;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.weekSelect {
+  max-inline-size: fit-content;
+  padding-top: spacing.$spacing-03;
+}
+
+:global(.cds--select-input):focus {
+  outline: 2.5px solid colors.$red-60;
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: colors.$red-60;
+  margin-top: 0.5rem;
+}
+
+:global(.cds--number input[type='number']):focus {
+  outline: 2.5px solid colors.$red-60;
+}

package/src/form/appointments-form.test.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockLocations } from '__mocks__';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { mockUseAppointmentServiceData, mockSession } from '__mocks__';
+import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import { saveAppointment } from './appointments-form.resource';
+import AppointmentForm from './appointments-form.component';
+
+const testProps = {
+  closeWorkspace: jest.fn(),
+  patientUuid: mockPatient.id,
+  promptBeforeClosing: jest.fn(),
+};
+
+const mockCreateAppointment = saveAppointment as jest.Mock;
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    useLocations: jest.fn().mockImplementation(() => mockLocations.data.results),
+    useSession: jest.fn().mockImplementation(() => mockSession.data),
+    useConfig: jest.fn(() => ({
+      appointmentTypes: ['Scheduled', 'WalkIn'],
+    })),
+  };
+});
+
+jest.mock('react-hook-form', () => ({
+  ...jest.requireActual('react-hook-form'),
+  useForm: jest.fn().mockImplementation(() => ({
+    handleSubmit: () => jest.fn(),
+    control: {
+      register: jest.fn(),
+      unregister: jest.fn(),
+      getFieldState: jest.fn(),
+      _names: {
+        array: new Set('test'),
+        mount: new Set('test'),
+        unMount: new Set('test'),
+        watch: new Set('test'),
+        focus: 'test',
+        watchAll: false,
+      },
+      _subjects: {
+        watch: jest.fn(),
+        array: jest.fn(),
+        state: jest.fn(),
+      },
+      _getWatch: jest.fn(),
+      _formValues: [],
+      _defaultValues: [],
+    },
+    getValues: (str) => {
+      if (str === 'recurringPatternDaysOfWeek') {
+        return [];
+      } else {
+        return null;
+      }
+    },
+    setValue: () => jest.fn(),
+    formState: () => jest.fn(),
+    watch: () => jest.fn(),
+  })),
+  Controller: ({ render }) =>
+    render({
+      field: {
+        onChange: jest.fn(),
+        onBlur: jest.fn(),
+        value: '',
+        ref: jest.fn(),
+      },
+      formState: {
+        isSubmitted: false,
+      },
+      fieldState: {
+        isTouched: false,
+      },
+    }),
+  useSubscribe: () => ({
+    r: { current: { subject: { subscribe: () => jest.fn() } } },
+  }),
+  useController: () => ({
+    field: { ref: jest.fn() },
+  }),
+}));
+
+jest.mock('./appointments-form.resource', () => {
+  const originalModule = jest.requireActual('./appointments-form.resource');
+
+  return {
+    ...originalModule,
+    saveAppointment: jest.fn(),
+  };
+});
+
+describe('AppointmentForm', () => {
+  it('renders the appointments form showing all the relevant fields and values', async () => {
+    mockOpenmrsFetch.mockReturnValue(mockUseAppointmentServiceData);
+
+    renderAppointmentsForm();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByLabelText(/Select a location/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^Date$/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Select a service/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Select the type of appointment/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Write an additional note/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/Write any additional points here/i)).toBeInTheDocument();
+    expect(screen.getAllByPlaceholderText(/dd\/mm\/yyyy/i).length).toBe(2);
+    expect(screen.getByRole('option', { name: /Mosoriot/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /AM/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /PM/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Choose appointment type/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Scheduled/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /WalkIn/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /^Date$/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /Time/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Discard/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Save and close/i })).toBeInTheDocument();
+  });
+
+  it('closes the form and the workspace when the cancel button is clicked', async () => {
+    const user = userEvent.setup();
+
+    mockOpenmrsFetch.mockReturnValueOnce(mockUseAppointmentServiceData);
+
+    renderAppointmentsForm();
+
+    await waitForLoadingToFinish();
+
+    const cancelButton = screen.getByRole('button', { name: /Discard/i });
+    await user.click(cancelButton);
+
+    expect(testProps.closeWorkspace).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a success snackbar  upon successfully scheduling an appointment', async () => {
+    const user = userEvent.setup();
+
+    mockOpenmrsFetch.mockReturnValue({ data: mockUseAppointmentServiceData });
+    mockCreateAppointment.mockResolvedValue({ status: 200, statusText: 'Ok' });
+
+    renderAppointmentsForm();
+
+    await waitForLoadingToFinish();
+
+    const saveButton = screen.getByRole('button', { name: /Save and close/i });
+    const dateInput = screen.getByRole('textbox', { name: /^Date$/i });
+    const timeInput = screen.getByRole('textbox', { name: /Time/i });
+    const timeFormat = screen.getByRole('combobox', { name: /Time/i });
+    const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
+    const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
+
+    expect(saveButton).not.toBeDisabled();
+
+    await user.clear(dateInput);
+    await user.type(dateInput, '4/4/2021');
+    await user.clear(timeInput);
+    await user.type(timeInput, '09:30');
+    await user.selectOptions(timeFormat, 'AM');
+    await user.selectOptions(serviceSelect, ['Outpatient']);
+    await user.selectOptions(appointmentTypeSelect, ['Scheduled']);
+
+    await user.click(saveButton);
+  });
+
+  it('renders an error snackbar if there was a problem scheduling an appointment', async () => {
+    const user = userEvent.setup();
+
+    const error = {
+      message: 'Internal Server Error',
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error',
+      },
+    };
+
+    mockOpenmrsFetch.mockReturnValueOnce({ data: mockUseAppointmentServiceData });
+    mockCreateAppointment.mockRejectedValueOnce(error);
+
+    renderAppointmentsForm();
+
+    await waitForLoadingToFinish();
+
+    const saveButton = screen.getByRole('button', { name: /Save and close/i });
+    const dateInput = screen.getByRole('textbox', { name: /^Date$/i });
+    const timeInput = screen.getByRole('textbox', { name: /Time/i });
+    const timeFormat = screen.getByRole('combobox', { name: /Time/i });
+    const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
+    const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
+
+    await user.clear(dateInput);
+    await user.type(dateInput, '4/4/2021');
+    await user.clear(timeInput);
+    await user.type(timeInput, '09:30');
+    await user.selectOptions(timeFormat, 'AM');
+    await user.selectOptions(serviceSelect, ['Outpatient']);
+    await user.selectOptions(appointmentTypeSelect, ['Scheduled']);
+    await user.click(saveButton);
+  });
+});
+
+function renderAppointmentsForm() {
+  renderWithSwr(<AppointmentForm {...testProps} />);
+}

package/src/header/appointments-header.component.tsx

@@ -0,0 +1,79 @@
+import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { DatePicker, DatePickerInput, Dropdown } from '@carbon/react';
+import { Location } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
+import { useAppointmentServices } from '../hooks/useAppointmentService';
+import AppointmentsIllustration from './appointments-illustration.component';
+import styles from './appointments-header.scss';
+import SelectedDateContext from '../hooks/selectedDateContext';
+import { omrsDateFormat } from '../constants';
+
+interface AppointmentHeaderProps {
+  title: string;
+  appointmentServiceType?: string;
+  onChange?: (evt) => void;
+}
+
+const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, appointmentServiceType, onChange }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
+  const location = session?.sessionLocation?.display;
+  const { serviceTypes } = useAppointmentServices();
+
+  return (
+    <div className={styles.header} data-testid="appointments-header">
+      <div className={styles['left-justified-items']}>
+        <AppointmentsIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('appointments', 'Appointments')}</p>
+          <p className={styles['page-name']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <DatePicker
+            onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
+            value={dayjs(selectedDate).format('DD MMM YYYY')}
+            dateFormat="d-M-Y"
+            datePickerType="single">
+            <DatePickerInput
+              style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
+              id="appointment-date-picker"
+              placeholder="DD-MMM-YYYY"
+              labelText=""
+              type="text"
+            />
+          </DatePicker>
+        </div>
+        <div className={styles.dropdownContainer}>
+          {typeof onChange === 'function' && (
+            <Dropdown
+              className={styles.dropdown}
+              aria-label="Select service type"
+              id="serviceDropdown"
+              selectedItem={
+                serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
+              }
+              items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
+              itemToString={(item) => (item ? item.name : '')}
+              label={t('selectServiceType', 'Select service type')}
+              type="inline"
+              size="sm"
+              direction="bottom"
+              titleText={t('view', 'View')}
+              onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppointmentsHeader;

package/src/header/appointments-header.scss

@@ -0,0 +1,95 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin: 0.5rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: 1rem 0;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dropdownContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+.datePicker {
+  background-color: transparent;
+  width: 10rem;
+  border: none;
+  & > input {
+    color: colors.$blue-10;
+  }
+}
+
+.dropdown {
+  :global(.cds--list-box__field) {
+    width: 14rem;
+    overflow: hidden;
+  }
+
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    left: -4rem;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    & > svg {
+      order: -1;
+    }
+    & > span:nth-child(2) {
+      order: -2;
+    }
+  }
+}

package/src/header/appointments-illustration.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const AppointmentsIllustration: React.FC = () => {
+  return (
+    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+      <title>Patient queue illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path fill="#FFF" d="M0 0h92v94H0z" />
+        <path
+          d="M40 32c.84-.602 1.12-1.797 1-3 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 3.572 2.1 6.706 5 8-6.76 1.741-12 7.91-12 15v15h28V32h-4zM76 67V52c0-7.09-5.24-13.278-12-15 2.9-1.294 5.12-4.428 5-8 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 1.203.14 2.398 1 3h-4v35h28z"
+          fill="#CEE6E5"
+        />
+        <path
+          d="M32 75V60.312c0-7.402 5.24-13.59 12.3-15.216-3.2-1.39-5.42-4.523-5.42-8.166 0-4.935 4.08-8.93 9.12-8.93 5.04 0 9.12 3.995 9.12 8.93 0 3.642-2.22 6.776-5.42 8.166C58.76 46.741 64 52.91 64 60.313V75"
+          fill="#7BBCB9"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default AppointmentsIllustration;