@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/patient-search/visit-form/base-visit-type.scss

@@ -0,0 +1,100 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.visitTypeOverviewWrapper {
+  margin: spacing.$spacing-05 0rem;
+  border: 0.0625rem solid $grey-2;
+}
+
+.tablet {
+  background-color: $ui-02;
+}
+
+.desktop {
+  background-color: $ui-01;
+
+  .paginationContainer div {
+    background-color: $ui-01;
+  }
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) > div:nth-child(2) {
+  position: relative;
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) span * {
+  display: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: spacing.$spacing-03;
+  min-height: spacing.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-05;
+  margin: spacing.$spacing-03 0;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeading,
+  .tabletHeading {
+    text-align: right;
+  }
+}

package/src/patient-search/visit-form/base-visit-type.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import BaseVisitType from './base-visit-type.component';
+import { mockVisitTypes } from '../../../__mocks__/visits.mock';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useLayoutType: () => 'desktop',
+  usePagination: jest.fn(() => ({ results: mockVisitTypes, currentPage: 1, goTo: jest.fn() })),
+}));
+
+describe('BaseVisitType', () => {
+  it('renders visit types correctly', () => {
+    render(<BaseVisitType onChange={() => {}} visitTypes={mockVisitTypes} />);
+
+    const searchInput = screen.getByRole('searchbox');
+    expect(searchInput).toBeInTheDocument();
+
+    mockVisitTypes.forEach((visitType) => {
+      const radioButton = screen.getByLabelText(visitType.display);
+      expect(radioButton).toBeInTheDocument();
+    });
+  });
+
+  it('handles search input correctly', () => {
+    render(<BaseVisitType onChange={() => {}} visitTypes={mockVisitTypes} />);
+
+    const searchInput: HTMLInputElement = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'Visit Type 1' } });
+
+    expect(searchInput.value).toBe('Visit Type 1');
+  });
+
+  it('calls onChange when a visit type is selected', () => {
+    const mockOnChange = jest.fn();
+    render(<BaseVisitType onChange={mockOnChange} visitTypes={mockVisitTypes} />);
+
+    const radioButton: HTMLInputElement = screen.getByLabelText(mockVisitTypes[0].display);
+    fireEvent.click(radioButton);
+    expect(radioButton.checked).toBe(true);
+  });
+});

package/src/patient-search/visit-form/queue.resource.ts

@@ -0,0 +1,73 @@
+import { openmrsFetch, toDateObjectStrict, toOmrsIsoString } from '@openmrs/esm-framework';
+import { generateVisitQueueNumber } from '../../active-visits/active-visits-table.resource';
+import { Appointment } from '../../types';
+
+export async function addQueueEntry(
+  visitUuid: string,
+  patientUuid: string,
+  priority: string,
+  status: string,
+  queueServiceUuid: string,
+  appointment: Appointment,
+
+  locationUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await Promise.all([
+    saveAppointment(appointment),
+    generateVisitQueueNumber(locationUuid, visitUuid, queueServiceUuid, visitQueueNumberAttributeUuid),
+  ]);
+
+  return openmrsFetch(`/ws/rest/v1/visit-queue-entry`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      visit: { uuid: visitUuid },
+      queueEntry: {
+        status: {
+          uuid: status,
+        },
+        priority: {
+          uuid: priority,
+        },
+        queue: {
+          uuid: queueServiceUuid,
+        },
+        patient: {
+          uuid: patientUuid,
+        },
+        startedAt: toDateObjectStrict(toOmrsIsoString(new Date())),
+      },
+    },
+  });
+}
+
+export async function saveAppointment(appointment: Appointment) {
+  const abortController = new AbortController();
+
+  await openmrsFetch(`/ws/rest/v1/appointment`, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      patientUuid: appointment?.patient.uuid,
+      serviceUuid: appointment?.service?.uuid,
+      startDateTime: appointment?.startDateTime,
+      endDateTime: appointment?.endDateTime,
+      appointmentKind: appointment?.appointmentKind,
+      locationUuid: appointment?.location?.uuid,
+      comments: appointment?.comments,
+      status: 'CheckedIn',
+      appointmentNumber: appointment?.appointmentNumber,
+      uuid: appointment?.uuid,
+      providerUuid: appointment?.provider?.uuid,
+    },
+  });
+}

package/src/patient-search/visit-form/recommended-visit-type.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StructuredListSkeleton } from '@carbon/react';
+import { useRecommendedVisitTypes } from '../hooks/useRecommendedVisitTypes';
+import BaseVisitType from './base-visit-type.component';
+import { PatientProgram } from '../../types';
+
+interface RecommendedVisitTypeProp {
+  patientUuid: string;
+  patientProgramEnrollment: PatientProgram;
+  onChange: (visitTypeUuid) => void;
+  locationUuid: string;
+}
+
+const RecommendedVisitType: React.FC<RecommendedVisitTypeProp> = ({
+  patientUuid,
+  patientProgramEnrollment,
+  onChange,
+  locationUuid,
+}) => {
+  const { recommendedVisitTypes, error, isLoading } = useRecommendedVisitTypes(
+    patientUuid,
+    patientProgramEnrollment?.uuid,
+    patientProgramEnrollment?.program?.uuid,
+    locationUuid,
+  );
+
+  return (
+    <div style={{ marginTop: '0.625rem' }}>
+      {isLoading ? (
+        <StructuredListSkeleton />
+      ) : (
+        <BaseVisitType onChange={onChange} visitTypes={recommendedVisitTypes} patientUuid={patientUuid} />
+      )}
+    </div>
+  );
+};
+
+export const MemoizedRecommendedVisitType = React.memo(RecommendedVisitType);

package/src/patient-search/visit-form/visit-form.component.tsx

@@ -0,0 +1,366 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import dayjs from 'dayjs';
+import { first } from 'rxjs/operators';
+import {
+  Button,
+  ButtonSet,
+  ContentSwitcher,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  InlineNotification,
+  Layer,
+  Row,
+  Select,
+  SelectItem,
+  Stack,
+  Switch,
+  TimePicker,
+  TimePickerSelect,
+  FormGroup,
+  RadioButton,
+  RadioButtonGroup,
+} from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import {
+  useLocations,
+  useSession,
+  ExtensionSlot,
+  useLayoutType,
+  useVisitTypes,
+  saveVisit,
+  toOmrsIsoString,
+  toDateObjectStrict,
+  showNotification,
+  showToast,
+  useConfig,
+  ConfigObject,
+} from '@openmrs/esm-framework';
+import BaseVisitType from './base-visit-type.component';
+import { addQueueEntry, useVisitQueueEntries } from '../../active-visits/active-visits-table.resource';
+import { convertTime12to24, amPm } from '../../helpers/time-helpers';
+import { MemoizedRecommendedVisitType } from './recommended-visit-type.component';
+import { useActivePatientEnrollment } from '../hooks/useActivePatientEnrollment';
+import { SearchTypes, PatientProgram, NewVisitPayload } from '../../types';
+import styles from './visit-form.scss';
+import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
+import isEmpty from 'lodash-es/isEmpty';
+
+interface VisitFormProps {
+  toggleSearchType: (searchMode: SearchTypes, patientUuid) => void;
+  patientUuid: string;
+  closePanel: () => void;
+  mode: boolean;
+}
+
+const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, toggleSearchType, closePanel, mode }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const locations = useLocations();
+  const sessionUser = useSession();
+  const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultLoginLocation();
+
+  const config = useConfig() as ConfigObject;
+  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(config.showRecommendedVisitTypeTab ? 0 : 1);
+  const [isMissingVisitType, setIsMissingVisitType] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [timeFormat, setTimeFormat] = useState<amPm>(new Date().getHours() >= 12 ? 'PM' : 'AM');
+  const [visitDate, setVisitDate] = useState(new Date());
+  const [visitTime, setVisitTime] = useState(dayjs(new Date()).format('hh:mm'));
+  const state = useMemo(() => ({ patientUuid }), [patientUuid]);
+  const allVisitTypes = useVisitTypes();
+  const [ignoreChanges, setIgnoreChanges] = useState(true);
+  const { activePatientEnrollment, isLoading } = useActivePatientEnrollment(patientUuid);
+  const [enrollment, setEnrollment] = useState<PatientProgram>(activePatientEnrollment[0]);
+  const { mutate } = useVisitQueueEntries('', '');
+  const visitQueueNumberAttributeUuid = config.concepts.visitQueueNumberAttributeUuid;
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [visitType, setVisitType] = useState('');
+
+  useEffect(() => {
+    if (locations?.length && sessionUser) {
+      setSelectedLocation(sessionUser?.sessionLocation?.uuid);
+      setVisitType(allVisitTypes?.length > 0 ? allVisitTypes[0].uuid : null);
+    } else if (!loadingDefaultFacility && defaultFacility) {
+      setSelectedLocation(defaultFacility?.uuid);
+      setVisitType(allVisitTypes?.length > 0 ? allVisitTypes[0].uuid : null);
+    }
+  }, [locations, sessionUser, loadingDefaultFacility]);
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      // retrieve values from queue extension
+      const queueLocation = event?.target['queueLocation']?.value;
+      const serviceUuid = event?.target['service']?.value;
+      const priority = event?.target['priority']?.value;
+      const status = event?.target['status']?.value;
+      const sortWeight = event?.target['sortWeight']?.value;
+
+      if (!visitType) {
+        setIsMissingVisitType(true);
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      const [hours, minutes] = convertTime12to24(visitTime, timeFormat);
+
+      const payload: NewVisitPayload = {
+        patient: patientUuid,
+        startDatetime: toDateObjectStrict(
+          toOmrsIsoString(
+            new Date(dayjs(visitDate).year(), dayjs(visitDate).month(), dayjs(visitDate).date(), hours, minutes),
+          ),
+        ),
+        visitType: visitType,
+        location: selectedLocation,
+        attributes: [],
+      };
+
+      const abortController = new AbortController();
+
+      saveVisit(payload, abortController)
+        .pipe(first())
+        .subscribe(
+          (response) => {
+            if (response.status === 201) {
+              // add new queue entry if visit created successfully
+              addQueueEntry(
+                response.data.uuid,
+                serviceUuid,
+                patientUuid,
+                priority,
+                status,
+                sortWeight,
+                queueLocation,
+                visitQueueNumberAttributeUuid,
+              ).then(
+                ({ status }) => {
+                  if (status === 201) {
+                    showToast({
+                      kind: 'success',
+                      title: t('startVisit', 'Start a visit'),
+                      description: t(
+                        'startVisitQueueSuccessfully',
+                        'Patient has been added to active visits list and queue.',
+                        `${hours} : ${minutes}`,
+                      ),
+                    });
+                    closePanel();
+                    mutate();
+                  }
+                },
+                (error) => {
+                  showNotification({
+                    title: t('queueEntryError', 'Error adding patient to the queue'),
+                    kind: 'error',
+                    critical: true,
+                    description: error?.message,
+                  });
+                },
+              );
+            }
+          },
+          (error) => {
+            showNotification({
+              title: t('startVisitError', 'Error starting visit'),
+              kind: 'error',
+              critical: true,
+              description: error?.message,
+            });
+          },
+        );
+    },
+    [
+      closePanel,
+      mutate,
+      patientUuid,
+      selectedLocation,
+      t,
+      timeFormat,
+      visitDate,
+      visitQueueNumberAttributeUuid,
+      visitTime,
+      visitType,
+    ],
+  );
+
+  const handleOnChange = () => {
+    setIgnoreChanges((prevState) => !prevState);
+  };
+
+  return (
+    <Form className={styles.form} onChange={handleOnChange} onSubmit={handleSubmit}>
+      <div>
+        {isTablet && (
+          <Row className={styles.headerGridRow}>
+            <ExtensionSlot name="visit-form-header-slot" className={styles.dataGridRow} state={state} />
+          </Row>
+        )}
+        <div className={styles.backButton}>
+          {mode === true ? null : (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+              iconDescription={t('backToScheduledVisits', 'Back to scheduled visits')}
+              size="sm"
+              onClick={() => toggleSearchType(SearchTypes.SCHEDULED_VISITS, patientUuid)}>
+              <span>{t('backToScheduledVisits', 'Back to scheduled visits')}</span>
+            </Button>
+          )}
+        </div>
+        <Stack gap={8} className={styles.container}>
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('dateAndTimeOfVisit', 'Date and time of visit')}</div>
+            <div className={styles.dateTimeSection}>
+              <DatePicker
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                id="visitDate"
+                style={{ paddingBottom: '1rem' }}
+                maxDate={new Date().toISOString()}
+                onChange={([date]) => setVisitDate(date)}
+                value={visitDate}>
+                <DatePickerInput
+                  id="visitStartDateInput"
+                  labelText={t('date', 'Date')}
+                  placeholder="dd/mm/yyyy"
+                  style={{ width: '100%' }}
+                />
+              </DatePicker>
+              <ResponsiveWrapper isTablet={isTablet}>
+                <TimePicker
+                  id="visitStartTime"
+                  labelText={t('time', 'Time')}
+                  onChange={(event) => setVisitTime(event.target.value as amPm)}
+                  pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
+                  style={{ marginLeft: '0.125rem', flex: 'none' }}
+                  value={visitTime}>
+                  <TimePickerSelect
+                    id="visitStartTimeSelect"
+                    onChange={(event) => setTimeFormat(event.target.value as amPm)}
+                    value={timeFormat}
+                    labelText={t('time', 'Time')}
+                    aria-label={t('time', 'Time')}>
+                    <SelectItem value="AM" text="AM" />
+                    <SelectItem value="PM" text="PM" />
+                  </TimePickerSelect>
+                </TimePicker>
+              </ResponsiveWrapper>
+            </div>
+          </section>
+
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('facility', 'Facility')}</div>
+            <Select
+              labelText={t('selectFacility', 'Select a facility')}
+              id="location"
+              invalidText="Required"
+              value={selectedLocation}
+              defaultSelected={selectedLocation}
+              onChange={(event) => setSelectedLocation(event.target.value)}>
+              {!selectedLocation ? <SelectItem text={t('selectOption', 'Select an option')} value="" /> : null}
+              {!isEmpty(defaultFacility) ? (
+                <SelectItem key={defaultFacility?.uuid} text={defaultFacility?.display} value={defaultFacility?.uuid}>
+                  {defaultFacility?.display}
+                </SelectItem>
+              ) : locations?.length > 0 ? (
+                locations.map((location) => (
+                  <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+                    {location.display}
+                  </SelectItem>
+                ))
+              ) : null}
+            </Select>
+          </section>
+
+          {config.showRecommendedVisitTypeTab && (
+            <section>
+              <div className={styles.sectionTitle}>{t('program', 'Program')}</div>
+              <FormGroup legendText={t('selectProgramType', 'Select program type')}>
+                <RadioButtonGroup
+                  defaultSelected={enrollment?.program?.uuid}
+                  orientation="vertical"
+                  onChange={(uuid) =>
+                    setEnrollment(activePatientEnrollment.find(({ program }) => program.uuid === uuid))
+                  }
+                  name="program-type-radio-group"
+                  valueSelected="default-selected">
+                  {activePatientEnrollment.map(({ uuid, display, program }) => (
+                    <RadioButton
+                      key={uuid}
+                      className={styles.radioButton}
+                      id={uuid}
+                      labelText={display}
+                      value={program.uuid}
+                    />
+                  ))}
+                </RadioButtonGroup>
+              </FormGroup>
+            </section>
+          )}
+          <section>
+            <div className={styles.sectionTitle}>{t('visitType', 'Visit Type')}</div>
+            <ContentSwitcher
+              selectedIndex={contentSwitcherIndex}
+              className={styles.contentSwitcher}
+              onChange={({ index }) => setContentSwitcherIndex(index)}>
+              <Switch name="recommended" text={t('recommended', 'Recommended')} />
+              <Switch name="all" text={t('all', 'All')} />
+            </ContentSwitcher>
+            {contentSwitcherIndex === 0 && !isLoading && (
+              <MemoizedRecommendedVisitType
+                onChange={(visitType) => {
+                  setVisitType(visitType);
+                  setIsMissingVisitType(false);
+                }}
+                patientUuid={patientUuid}
+                patientProgramEnrollment={enrollment}
+                locationUuid={selectedLocation}
+              />
+            )}
+            {contentSwitcherIndex === 1 && (
+              <BaseVisitType
+                onChange={(visitType) => {
+                  setVisitType(visitType);
+                  setIsMissingVisitType(false);
+                }}
+                visitTypes={allVisitTypes}
+                patientUuid={patientUuid}
+              />
+            )}
+          </section>
+          {isMissingVisitType && (
+            <section>
+              <InlineNotification
+                style={{ margin: '0', minWidth: '100%' }}
+                kind="error"
+                lowContrast={true}
+                title={t('missingVisitType', 'Missing visit type')}
+                subtitle={t('selectVisitType', 'Please select a Visit Type')}
+              />
+            </section>
+          )}
+        </Stack>
+        <ExtensionSlot name="add-queue-entry-slot" />
+      </div>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={closePanel}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+          {t('startVisit', 'Start visit')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+function ResponsiveWrapper({ children, isTablet }) {
+  return isTablet ? <Layer>{children}</Layer> : <div>{children}</div>;
+}
+
+export default StartVisitForm;