@kenyaemr/esm-service-queues-app 8.1.1-pre.129 → 8.1.2-pre.152

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

@@ -1,315 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import dayjs from 'dayjs';
-import head from 'lodash-es/head';
-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 { postQueueEntry } from './visit-form/queue.resource';
-import { convertTime12to24 } from '../helpers/time-helpers';
-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',
-  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)
-          .then((response) => {
-            postQueueEntry(
-              response.data.uuid,
-              patientId,
-              priority,
-              defaultStatus,
-              service,
-              appointment,
-              selectedQueueLocation,
-              visitQueueNumberAttributeUuid,
-            )
-              .then(() => {
-                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();
-              })
-              .catch((error) => {
-                showSnackbar({
-                  title: t('queueEntryError', 'Error adding patient to the queue'),
-                  kind: 'error',
-                  isLowContrast: false,
-                  subtitle: error?.message,
-                });
-                setIsSubmitting(false);
-              });
-          })
-          .catch((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

@@ -1,131 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.container {
-  background-color: $ui-background;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-
-.grid {
-  padding: 0;
-}
-
-.visitTile {
-  margin: layout.$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: layout.$spacing-06;
-  margin-bottom: layout.$spacing-10;
-}
-
-.row {
-  margin: 0 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
-}
-
-.backButton {
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-  margin: layout.$spacing-03 0;
-  padding: 0;
-  @include type.type-style('body-compact-01');
-
-  button {
-    display: flex;
-
-    svg {
-      order: 1;
-      margin-right: layout.$spacing-03;
-      margin-left: 0 !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: layout.$spacing-10;
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 50%;
-}
-
-.text-divider {
-  display: flex;
-  align-items: center;
-  margin: layout.$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: layout.$spacing-05;
-}
-
-.text-divider::after {
-  margin-left: layout.$spacing-05;
-}
-
-.buttonContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: layout.$spacing-03;
-}
-
-.prioritySwitcher {
-  margin: layout.$spacing-03 0 layout.$spacing-03;
-}
-
-.emptyAppointment {
-  margin: layout.$spacing-05;
-}

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

@@ -1,39 +0,0 @@
-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 PatientScheduledVisits from './patient-scheduled-visits.component';
-
-const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
-const mockToggleSearchType = jest.fn();
-const mockUseLocations = useLocations as jest.Mock;
-const mockUseSession = jest.mocked(useSession);
-
-const defaultProps = {
-  appointments: { recentVisits: mockPatientsVisits.recentVisits, futureVisits: [] },
-  closePanel: () => false,
-  closeWorkspace: jest.fn(),
-  patientUuid: mockPatient.uuid,
-  toggleSearchType: mockToggleSearchType,
-};
-
-describe('ScheduledVisits', () => {
-  beforeEach(() => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(configSchema),
-      concepts: {},
-    } as ConfigObject);
-    mockUseLocations.mockReturnValue(mockLocations.data.results);
-    mockUseSession.mockReturnValue(mockSession.data);
-  });
-
-  it('should display recent and future scheduled visits', async () => {
-    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();
-  });
-});

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

@@ -1,135 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { SearchTypes } from '../types';
-import PatientScheduledVisits from './patient-scheduled-visits.component';
-import VisitForm from './visit-form/visit-form.component';
-import {
-  type DefaultWorkspaceProps,
-  ArrowLeftIcon,
-  ErrorState,
-  getPatientName,
-  PatientBannerContactDetails,
-  PatientBannerPatientInfo,
-  PatientBannerToggleContactDetailsButton,
-  PatientPhoto,
-  usePatient,
-  useVisit,
-} from '@openmrs/esm-framework';
-import ExistingVisitFormComponent from './visit-form/existing-visit-form.component';
-import styles from './patient-search.scss';
-import { Button, DataTableSkeleton } from '@carbon/react';
-import { useScheduledVisits } from './hooks/useScheduledVisits';
-import isNil from 'lodash-es/isNil';
-import { useTranslation } from 'react-i18next';
-
-interface PatientSearchProps extends DefaultWorkspaceProps {
-  selectedPatientUuid: string;
-  currentServiceQueueUuid?: string;
-  handleBackToSearchList?: () => void;
-}
-
-export const AddPatientToQueueContext = React.createContext({
-  currentServiceQueueUuid: '',
-});
-
-const PatientSearch: React.FC<PatientSearchProps> = ({
-  closeWorkspace,
-  selectedPatientUuid,
-  currentServiceQueueUuid,
-  handleBackToSearchList,
-}) => {
-  const { t } = useTranslation();
-  const { patient } = usePatient(selectedPatientUuid);
-  const { activeVisit } = useVisit(selectedPatientUuid);
-  const [searchType, setSearchType] = useState<SearchTypes>(SearchTypes.SCHEDULED_VISITS);
-  const [showContactDetails, setContactDetails] = useState(false);
-  const { appointments, isLoading, error } = useScheduledVisits(selectedPatientUuid);
-
-  const hasAppointments = !(isNil(appointments?.futureVisits) && isNil(appointments?.recentVisits));
-
-  const backButtonDescription =
-    searchType === SearchTypes.VISIT_FORM && hasAppointments
-      ? t('backToScheduledVisits', 'Back to scheduled visits')
-      : t('backToSearchResults', 'Back to search results');
-
-  const toggleSearchType = (searchType: SearchTypes) => {
-    setSearchType(searchType);
-  };
-
-  const handleBackToAction = () => {
-    if (searchType === SearchTypes.VISIT_FORM && hasAppointments) {
-      setSearchType(SearchTypes.SCHEDULED_VISITS);
-    } else {
-      setSearchType(SearchTypes.SEARCH_RESULTS);
-    }
-  };
-
-  useEffect(() => {
-    if (searchType === SearchTypes.SCHEDULED_VISITS && appointments && !hasAppointments) {
-      setSearchType(SearchTypes.VISIT_FORM);
-    }
-  }, [hasAppointments, appointments]);
-
-  useEffect(() => {
-    if (searchType === SearchTypes.SEARCH_RESULTS) {
-      handleBackToSearchList && handleBackToSearchList();
-    }
-  }, [searchType, handleBackToSearchList]);
-
-  const patientName = patient && getPatientName(patient);
-  return patient ? (
-    <div className={styles.patientSearchContainer}>
-      <AddPatientToQueueContext.Provider value={{ currentServiceQueueUuid }}>
-        <div className={styles.patientBannerContainer}>
-          <div className={styles.patientBanner}>
-            <div className={styles.patientPhoto}>
-              <PatientPhoto patientUuid={patient.id} patientName={patientName} />
-            </div>
-            <PatientBannerPatientInfo patient={patient} />
-            <PatientBannerToggleContactDetailsButton
-              showContactDetails={showContactDetails}
-              toggleContactDetails={() => setContactDetails(!showContactDetails)}
-            />
-          </div>
-          {showContactDetails ? (
-            <PatientBannerContactDetails patientId={patient.id} deceased={patient.deceasedBoolean} />
-          ) : null}
-        </div>
-        <div className={styles.backButton}>
-          <Button
-            kind="ghost"
-            renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
-            iconDescription={backButtonDescription}
-            size="sm"
-            onClick={handleBackToAction}>
-            <span>{backButtonDescription}</span>
-          </Button>
-        </div>
-        {activeVisit ? (
-          <ExistingVisitFormComponent visit={activeVisit} closeWorkspace={closeWorkspace} />
-        ) : (
-          <>
-            {error ? (
-              <ErrorState headerTitle={t('errorFetchingAppointments', 'Error fetching appointments')} error={error} />
-            ) : null}
-
-            {isLoading && !error ? (
-              <DataTableSkeleton role="progressbar" />
-            ) : searchType === SearchTypes.SCHEDULED_VISITS && hasAppointments ? (
-              <PatientScheduledVisits
-                appointments={appointments}
-                patientUuid={selectedPatientUuid}
-                toggleSearchType={toggleSearchType}
-                closeWorkspace={closeWorkspace}
-              />
-            ) : searchType === SearchTypes.VISIT_FORM ? (
-              <VisitForm patientUuid={selectedPatientUuid} closeWorkspace={closeWorkspace} />
-            ) : null}
-          </>
-        )}
-      </AddPatientToQueueContext.Provider>
-    </div>
-  ) : null;
-};
-
-export default PatientSearch;

package/src/patient-search/search-illustration.component.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-export default function SearchIllustration({ width = '62', height = '48' }) {
-  return (
-    <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-      <defs>
-        <path
-          d="M36.001 3.218C47.482 9.838 51.403 24.52 44.782 36 38.162 47.482 23.48 51.403 12 44.782.518 38.162-3.403 23.48 3.218 12 9.838.518 24.52-3.403 36 3.218z"
-          id="a"
-        />
-      </defs>
-      <g fill="none" fillRule="evenodd">
-        <path d="M36.001 3.218C47.482 9.838 51.403 24.52 44.782 36 38.162 47.482 23.48 51.403 12 44.782.518 38.162-3.403 23.48 3.218 12 9.838.518 24.52-3.403 36 3.218z" />
-        <mask id="b" fill="#fff">
-          <use xlinkHref="#a" />
-        </mask>
-        <use fill="#CEE6E5" xlinkHref="#a" />
-        <path
-          d="M38 48v-2.618c0-6.696-4.58-12.296-10.72-13.798a8.159 8.159 0 0 0 4.76-7.427C32.04 19.653 28.44 16 24 16c-4.44 0-8.04 3.653-8.04 8.157a8.159 8.159 0 0 0 4.76 7.427C14.58 33.086 10 38.686 10 45.382v2.598"
-          fill="#9ACBCA"
-          mask="url(#b)"
-        />
-        <path fill="#9ACBCA" d="m45.34 35 17.124 10.33-1.55 2.57L43.79 37.568z" />
-      </g>
-    </svg>
-  );
-}