@kenyaemr/esm-service-queues-app 7.0.2-pre.65

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

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type PatientProgram } from '../../types';
+import uniqBy from 'lodash-es/uniqBy';
+
+export const useActivePatientEnrollment = (patientUuid: string) => {
+  const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display))`;
+  const apiUrl = `${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<PatientProgram> } }>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const activePatientEnrollment = useMemo(
+    () =>
+      data?.data.results
+        .sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
+        .filter((enrollment) => enrollment.dateCompleted === null) ?? [],
+    [data?.data.results],
+  );
+
+  return {
+    activePatientEnrollment: uniqBy(activePatientEnrollment, (program) => program?.program?.uuid),
+    error,
+    isLoading,
+  };
+};

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

@@ -0,0 +1,14 @@
+import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export const useDefaultLoginLocation = () => {
+  const config = useConfig();
+  const apiUrl = config.defaultFacilityUrl;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    defaultFacility: data ? data?.data : null,
+    isLoading: isLoading,
+    isError: error,
+  };
+};

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

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+
+interface FHIRResponse {
+  entry: Array<{ resource: fhir.Patient }>;
+  total: number;
+  type: string;
+  resourceType: string;
+}
+
+const usePatients = (searchTerm: string) => {
+  const apiUrl = `${fhirBaseUrl}/Patient?name=${searchTerm}&_summary=data`;
+
+  const { data, error, isLoading } = useSWR<{ data: FHIRResponse }>(searchTerm !== null ? apiUrl : null, openmrsFetch);
+
+  const searchedPatients = useMemo(
+    () => data?.data?.entry?.map((response) => response.resource) ?? [],
+    [data?.data?.entry],
+  );
+
+  return { patients: searchedPatients, isLoading: isLoading && searchTerm !== null, error };
+};
+
+export default usePatients;

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

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { fhirBaseUrl, getLocale, openmrsFetch } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+interface FHIRResponse {
+  entry: Array<{ resource: fhir.Location }>;
+  total: number;
+  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);
+
+  const queueLocations = useMemo(
+    () =>
+      data?.data?.entry
+        ?.map((response) => response.resource)
+        .sort((a, b) => a.name.localeCompare(b.name, getLocale())) ?? [],
+    [data?.data?.entry],
+  );
+  return { queueLocations, isLoading, error };
+}

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

@@ -0,0 +1,35 @@
+import useSWR from 'swr';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { useMemo } from 'react';
+
+interface EnrollmentVisitType {
+  dataDependencies: Array<string>;
+  enrollmentOptions: object;
+  incompatibleWith: Array<string>;
+  name: string;
+  visitTypes: { allowed: Array<EnrollmentVisitType>; disallowed: Array<EnrollmentVisitType> };
+}
+
+export const useRecommendedVisitTypes = (
+  patientUuid: string,
+  enrollmentUuid: string,
+  programUuid: string,
+  locationUuid: string,
+) => {
+  const { visitTypeResourceUrl, showRecommendedVisitTypeTab } = useConfig<ConfigObject>();
+
+  const apiUrl = `${visitTypeResourceUrl}${patientUuid}/program/${programUuid}/enrollment/${enrollmentUuid}?intendedLocationUuid=${locationUuid}`;
+
+  const { data, error, isLoading } = useSWR<{ data: EnrollmentVisitType }>(
+    showRecommendedVisitTypeTab && patientUuid && enrollmentUuid && programUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const recommendedVisitTypes = useMemo(() => data?.data?.visitTypes?.allowed.map(mapToVisitType) ?? [], [data]);
+  return { recommendedVisitTypes, error, isLoading };
+};
+
+const mapToVisitType = (visitType) => {
+  return { ...visitType, display: visitType.name };
+};

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

@@ -0,0 +1,52 @@
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { type AppointmentsFetchResponse } from '../../types';
+
+const fetcher = (appointmentsSearchUrl: string, patientUuid: string) => {
+  const abortController = new AbortController();
+  let startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
+
+  return openmrsFetch(appointmentsSearchUrl, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      patientUuid: patientUuid,
+      startDate: startDate,
+    },
+  });
+};
+
+export function useScheduledVisits(patientUuid: string) {
+  const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
+
+  const { data, error, isLoading } = useSWR<AppointmentsFetchResponse, Error>(
+    patientUuid ? [appointmentsSearchUrl, patientUuid] : null,
+    ([appointmentsSearchUrl, patientUuid]) => fetcher(appointmentsSearchUrl, patientUuid as string),
+  );
+
+  const appointments = data?.data?.length
+    ? data.data.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
+    : null;
+
+  // visits + or - 7 days before visit date
+  const recentVisits = appointments?.filter(
+    (appointment) =>
+      dayjs((appointment.startDateTime / 1000) * 1000).isBefore(dayjs().add(7, 'day')) ||
+      dayjs((appointment.startDateTime / 1000) * 1000).isBefore(dayjs().subtract(7, 'day')),
+  );
+
+  // visits past 7 days
+  const futureVisits = appointments?.filter((appointment) =>
+    dayjs((appointment.startDateTime / 1000) * 1000).isAfter(dayjs().add(7, 'day')),
+  );
+
+  return {
+    appointments: data ? { recentVisits, futureVisits } : null,
+    isError: error,
+    isLoading,
+  };
+}

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

@@ -0,0 +1,324 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  ContentSwitcher,
+  DataTableSkeleton,
+  InlineLoading,
+  InlineNotification,
+  RadioTile,
+  Switch,
+  TileGroup,
+} from '@carbon/react';
+import {
+  formatDatetime,
+  type NewVisitPayload,
+  parseDate,
+  saveVisit,
+  showSnackbar,
+  toDateObjectStrict,
+  toOmrsIsoString,
+  useConfig,
+  useLayoutType,
+  useLocations,
+  useSession,
+  useVisit,
+  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';
+
+enum visitType {
+  RECENT = 'Recent',
+  FUTURE = 'Future',
+}
+
+const ScheduledVisitsForVisitType: React.FC<{
+  visits;
+  visitType;
+  scheduledVisitHeader;
+  patientUuid;
+  closeWorkspace: () => void;
+}> = ({ visits, scheduledVisitHeader, patientUuid, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const [visitsIndex, setVisitsIndex] = useState(0);
+  const [hasPriority, setHasPriority] = useState(false);
+  const [userLocation, setUserLocation] = useState('');
+  const locations = useLocations();
+  const session = useSession();
+  const { queues, isLoading: isLoadingQueues } = useQueues(userLocation);
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const timeFormat = new Date().getHours() >= 12 ? 'PM' : 'AM';
+  const visitDate = new Date();
+  const visitTime = dayjs(new Date()).format('hh:mm');
+  const [appointment, setAppointment] = useState<Appointment>();
+  const [patientId, setPatientId] = useState('');
+  const allVisitTypes = useVisitTypes();
+  const { currentVisit } = useVisit(patientUuid);
+  const config = useConfig<ConfigObject>();
+  const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
+  const { queueLocations } = useQueueLocations();
+  const selectedQueueLocation = queueLocations[0]?.id;
+
+  // TODO: This needs fixing, we cannot just take the first queue and assume that is what is wanted
+  const service = head(queues)?.uuid;
+  const defaultStatus = config.concepts.defaultStatusConceptUuid;
+  const priorities = queues.find((q) => q.uuid === service)?.allowedPriorities ?? [];
+
+  useEffect(() => {
+    if (!userLocation && session?.sessionLocation !== null) {
+      setUserLocation(session?.sessionLocation?.uuid);
+    } else if (!userLocation && locations) {
+      setUserLocation(head(locations)?.uuid);
+    }
+  }, [session, locations, userLocation]);
+
+  const handleSubmit = useCallback(
+    (priority) => {
+      setIsSubmitting(true);
+      const [hours, minutes] = convertTime12to24(visitTime, timeFormat);
+      const visitType = [...allVisitTypes].shift().uuid;
+
+      const payload: NewVisitPayload = {
+        patient: patientId,
+        startDatetime: toDateObjectStrict(
+          toOmrsIsoString(
+            new Date(dayjs(visitDate).year(), dayjs(visitDate).month(), dayjs(visitDate).date(), hours, minutes),
+          ),
+        ),
+        visitType: visitType,
+        location: userLocation,
+      };
+
+      if (currentVisit) {
+        showSnackbar({
+          title: t('startVisitError', 'Error starting visit'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: t('patientHasActiveVisit', 'The patient already has an active visit'),
+        });
+        setIsSubmitting(false);
+      } else {
+        const abortController = new AbortController();
+
+        saveVisit(payload, abortController)
+          .pipe(first())
+          .subscribe(
+            (response) => {
+              if (response.status === 201) {
+                postQueueEntry(
+                  response.data.uuid,
+                  patientId,
+                  priority,
+                  defaultStatus,
+                  service,
+                  appointment,
+                  selectedQueueLocation,
+                  visitQueueNumberAttributeUuid,
+                ).then(
+                  ({ status }) => {
+                    if (status === 201) {
+                      showSnackbar({
+                        kind: 'success',
+                        title: t('startAVisit', 'Start a visit'),
+                        subtitle: t(
+                          'startVisitQueueSuccessfully',
+                          'Patient has been added to active visits list and queue.',
+                          `${hours} : ${minutes}`,
+                        ),
+                      });
+                      closeWorkspace();
+                      setIsSubmitting(false);
+                      mutateQueueEntries();
+                    }
+                  },
+                  (error) => {
+                    showSnackbar({
+                      title: t('queueEntryError', 'Error adding patient to the queue'),
+                      kind: 'error',
+                      isLowContrast: false,
+                      subtitle: error?.message,
+                    });
+                    setIsSubmitting(false);
+                  },
+                );
+              }
+            },
+            (error) => {
+              showSnackbar({
+                title: t('startVisitError', 'Error starting visit'),
+                kind: 'error',
+                isLowContrast: false,
+                subtitle: error?.message,
+              });
+              setIsSubmitting(false);
+            },
+          );
+      }
+    },
+    [
+      visitTime,
+      timeFormat,
+      allVisitTypes,
+      patientId,
+      visitDate,
+      userLocation,
+      queues,
+      config.concepts.defaultStatusConceptUuid,
+      config.concepts.defaultPriorityConceptUuid,
+      currentVisit,
+      t,
+      priorities,
+      appointment,
+      selectedQueueLocation,
+      visitQueueNumberAttributeUuid,
+      closeWorkspace,
+      mutateQueueEntries,
+    ],
+  );
+
+  if (visits) {
+    return (
+      <div className={styles.row}>
+        <p className={styles.heading}>{scheduledVisitHeader} </p>
+        {visits?.length > 0 ? (
+          <TileGroup name="tile-group" defaultSelected="default-selected">
+            {visits?.map((visit, ind) => {
+              return (
+                <RadioTile
+                  value={visit.uuid}
+                  key={visit.uuid}
+                  className={styles.visitTile}
+                  onClick={(e) => {
+                    setHasPriority(true);
+                    setVisitsIndex(ind);
+                    setPatientId(visit?.patient?.uuid);
+                    setAppointment(visit);
+                  }}>
+                  <div className={styles.helperText}>
+                    <p className={styles.primaryText}>{visit.service?.name}</p>
+                    <p className={styles.secondaryText}>
+                      {' '}
+                      {formatDatetime(parseDate(visit?.startDateTime))} · {visit.location?.name}{' '}
+                    </p>
+
+                    {!visit.service ? (
+                      <DataTableSkeleton />
+                    ) : isLoadingQueues ? null : !priorities?.length ? (
+                      <InlineNotification
+                        className={styles.inlineNotification}
+                        kind={'error'}
+                        lowContrast
+                        subtitle={t('configurePriorities', 'Please configure priorities to continue.')}
+                        title={t('noPrioritiesConfigured', 'No priorities configured')}
+                      />
+                    ) : hasPriority && ind == visitsIndex ? (
+                      <ContentSwitcher
+                        size="sm"
+                        selectedIndex={null}
+                        className={styles.prioritySwitcher}
+                        onChange={(e) => {
+                          handleSubmit(e.name);
+                        }}>
+                        {priorities?.length > 0
+                          ? priorities.map(({ uuid, display }) => {
+                              return <Switch name={uuid} text={display} />;
+                            })
+                          : null}
+                      </ContentSwitcher>
+                    ) : null}
+                    {hasPriority && ind == visitsIndex && isSubmitting ? (
+                      <InlineLoading description={t('loading', 'Loading...')} />
+                    ) : null}
+                  </div>
+                </RadioTile>
+              );
+            })}
+          </TileGroup>
+        ) : (
+          <div className={styles.emptyAppointment}>
+            <p>{t('noAppointmentsFound', 'No appointments found')} </p>
+          </div>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className={styles.emptyAppointment}>
+      <p className={styles.heading}> {scheduledVisitHeader} </p>
+    </div>
+  );
+};
+
+interface PatientScheduledVisitsProps {
+  appointments: { recentVisits: Appointment[]; futureVisits: Appointment[] };
+  toggleSearchType: (searchMode: SearchTypes) => void;
+  patientUuid: string;
+  closeWorkspace: () => void;
+}
+
+const PatientScheduledVisits: React.FC<PatientScheduledVisitsProps> = ({
+  appointments,
+  toggleSearchType,
+  patientUuid,
+  closeWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <div className={styles.container}>
+      <ScheduledVisitsForVisitType
+        visitType={visitType.RECENT}
+        visits={appointments?.recentVisits}
+        scheduledVisitHeader={t('recentScheduledVisits', '{{count}} visit(s) scheduled for +/- 7 days', {
+          count: appointments?.recentVisits?.length,
+        })}
+        patientUuid={patientUuid}
+        closeWorkspace={closeWorkspace}
+      />
+      <ScheduledVisitsForVisitType
+        visitType={visitType.FUTURE}
+        visits={appointments?.futureVisits}
+        scheduledVisitHeader={t('futureScheduledVisits', '{{count}} visit(s) scheduled for dates in the future', {
+          count: appointments?.futureVisits?.length,
+        })}
+        patientUuid={patientUuid}
+        closeWorkspace={closeWorkspace}
+      />
+
+      <div className={styles['text-divider']}>{t('orInProperFormat', 'Or')}</div>
+
+      <div className={styles.buttonContainer}>
+        <Button
+          kind="ghost"
+          iconDescription="Start another visit type"
+          onClick={() => toggleSearchType(SearchTypes.VISIT_FORM)}>
+          {t('anotherVisitType', 'Start another visit type')}
+        </Button>
+      </div>
+
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={() => toggleSearchType(SearchTypes.SEARCH_RESULTS)}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('search', 'Search')}
+        </Button>
+      </ButtonSet>
+    </div>
+  );
+};
+
+export default PatientScheduledVisits;

package/src/patient-search/patient-scheduled-visits.scss

@@ -0,0 +1,131 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  background-color: $ui-background;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(var(--desktop-workspace-window-height) - 7rem - 2px); // 7rem patient banner, plus border
+}
+
+.grid {
+  padding: 0;
+}
+
+.visitTile {
+  margin: spacing.$spacing-05 0;
+
+  &:global(.cds--tile--is-selected:focus) {
+    background-color: $color-blue-10;
+    color: $color-blue-10;
+    border: 1px solid $color-blue-60-2;
+    outline: none;
+  }
+
+  &:global(.cds--tile--is-selected:hover) {
+    background-color: $color-blue-10;
+    color: $color-blue-10;
+    border: 1px solid $color-blue-60-2;
+    outline: none;
+  }
+
+  &:global(.cds--tile--is-selected:hover .cds--tile__checkmark svg) {
+    fill: $color-blue-60-2;
+  }
+}
+
+.recentlyScheduledVisitsContainer {
+  margin-top: spacing.$spacing-06;
+  margin-bottom: spacing.$spacing-10;
+}
+
+.row {
+  margin: 0 spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05;
+}
+
+.backButton {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin: spacing.$spacing-03 0;
+  padding: 0;
+  @include type.type-style('body-compact-01');
+
+  button {
+    display: flex;
+
+    svg {
+      order: 1;
+      margin-right: 0.5rem;
+      margin-left: 0rem !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('body-02');
+  color: $text-02;
+  margin-left: 1.2rem;
+}
+
+.primaryText {
+  @include type.type-style('heading-compact-02');
+}
+
+.secondaryText {
+  @include type.type-style('body-01');
+  color: $text-02;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.text-divider {
+  display: flex;
+  align-items: center;
+  margin: spacing.$spacing-08 25%;
+  @include type.type-style('heading-03');
+  color: $text-02;
+}
+
+.text-divider::before,
+.text-divider::after {
+  content: '';
+  height: 1px;
+  background-color: $text-03;
+  flex-grow: 1;
+}
+
+.text-divider::before {
+  margin-right: spacing.$spacing-05;
+}
+
+.text-divider::after {
+  margin-left: spacing.$spacing-05;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.prioritySwitcher {
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+}
+
+.emptyAppointment {
+  margin: spacing.$spacing-05;
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderWithSwr } from 'tools';
+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 mockToggleSearchType = jest.fn();
+
+const testProps = {
+  appointments: { recentVisits: mockPatientsVisits.recentVisits, futureVisits: [] },
+  toggleSearchType: mockToggleSearchType,
+  patientUuid: mockPatient.uuid,
+  closePanel: () => false,
+};
+
+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({
+      concepts: {},
+    } as ConfigObject),
+  );
+  it('should display recent and future scheduled visits', async () => {
+    renderPatientScheduledVisits();
+
+    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} />);
+}