(WIP) first step to add ability to display recommended visit-type and forms

packages/esm-patient-chart-app/src/config-schema.ts

@@ -22,8 +22,20 @@ export const esmPatientChartSchema = {
     _description: 'The UUID of the visit type to be used for the automatically created offline visits.',
     _default: 'a22733fa-3501-4020-a520-da024eeff088',
   },
+  showRecommendedVisitTypeTab: {
+    _type: Type.Boolean,
+    _description: 'Whether start visit form should display recommended visit type tab. Requires `visitTypeResourceUrl`',
+    _default: false,
+  },
+  visitTypeResourceUrl: {
+    _type: Type.String,
+    _default: '/etl-latest/etl/patient/',
+    _description: 'Custom URL to load resources required for showing recommended visit types',
+  },
 };
 
 export interface ChartConfig {
   offlineVisitTypeUuid: string;
+  visitTypeResourceUrl: string;
+  showRecommendedVisitTypeTab: boolean;
 }

packages/esm-patient-chart-app/src/visit/hooks/useRecommendedVisitTypes.tsx

@@ -0,0 +1,36 @@
+import useSWR from 'swr';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { ChartConfig } 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() as ChartConfig;
+  const { data, error } = useSWR<{ data: EnrollmentVisitType }>(
+    showRecommendedVisitTypeTab &&
+      patientUuid &&
+      enrollmentUuid &&
+      programUuid &&
+      `${visitTypeResourceUrl}${patientUuid}/program/${programUuid}/enrollment/${enrollmentUuid}?intendedLocationUuid=${locationUuid}`,
+    openmrsFetch,
+  );
+
+  const recommendedVisitTypes = useMemo(() => data?.data?.visitTypes?.allowed.map(mapToVisitType) ?? [], [data]);
+  return { recommendedVisitTypes, error, isLoading: !data && !error };
+};
+
+const mapToVisitType = (visitType) => {
+  return { ...visitType, display: visitType.name };
+};

packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.component.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useMemo } from 'react';
+import styles from './visit-type-overview.scss';
+import debounce from 'lodash-es/debounce';
+import isEmpty from 'lodash-es/isEmpty';
+import { Search, RadioButtonGroup, RadioButton } from 'carbon-components-react';
+import { EmptyState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
+
+interface BaseVisitTypeProps {
+  onChange: (event) => void;
+  patientUuid: string;
+  visitTypes;
+}
+
+const BaseVisitType: React.FC<BaseVisitTypeProps> = ({ onChange, visitTypes }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  const searchResults = useMemo(() => {
+    if (!isEmpty(searchTerm)) {
+      return visitTypes.filter((visitType) => visitType.display.toLowerCase().search(searchTerm.toLowerCase()) !== -1);
+    } else {
+      return visitTypes;
+    }
+  }, [searchTerm, visitTypes]);
+
+  const handleSearch = React.useMemo(() => debounce((searchTerm) => setSearchTerm(searchTerm), 300), []);
+
+  const { results, currentPage, goTo } = usePagination(searchResults, 5);
+
+  return (
+    <div className={`${styles.visitTypeOverviewWrapper} ${isTablet ? styles.tablet : styles.desktop}`}>
+      {results.length ? (
+        <>
+          <Search
+            onChange={(event) => handleSearch(event.target.value)}
+            placeholder={t('searchForAVisitType', 'Search for a visit type')}
+            labelText=""
+            light={isTablet}
+          />
+          <RadioButtonGroup
+            className={styles.radioButtonGroup}
+            defaultSelected="default-selected"
+            orientation="vertical"
+            onChange={onChange}
+            name="radio-button-group"
+            valueSelected="default-selected"
+          >
+            {results.map(({ uuid, display, name }) => (
+              <RadioButton key={uuid} className={styles.radioButton} id={name} labelText={display} value={uuid} />
+            ))}
+          </RadioButtonGroup>
+          <div className={styles.paginationContainer}>
+            <PatientChartPagination
+              pageNumber={currentPage}
+              pageUrl={null}
+              totalItems={visitTypes?.length}
+              currentItems={results.length}
+              pageSize={5}
+              onPageNumberChange={({ page }) => goTo(page)}
+            />
+          </div>
+        </>
+      ) : (
+        <EmptyState displayText={t('visitType', 'Visit type')} headerTitle={t('visitType', 'Visit type')} />
+      )}
+    </div>
+  );
+};
+
+export default BaseVisitType;

packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { usePagination, useVisitTypes } from '@openmrs/esm-framework';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockVisitTypes } from '../../../../../__mocks__/visits.mock';
+import BaseVisitType from './base-visit-type.component';
+
+jest.mock('lodash-es/debounce', () => jest.fn((fn) => fn));
+
+const mockUsePagination = usePagination as jest.Mock;
+const mockUseVisitTypes = useVisitTypes as jest.Mock;
+const mockHandleChange = jest.fn();
+const mockGoToPage = jest.fn();
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...(jest.requireActual('@openmrs/esm-framework') as any),
+  usePagination: jest.fn(),
+  useVisitTypes: jest.fn(),
+}));
+
+describe('VisitTypeOverview', () => {
+  const renderVisitTypeOverview = () => {
+    mockUsePagination.mockReturnValue({
+      results: mockVisitTypes.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+    mockUseVisitTypes.mockReturnValue(mockVisitTypes);
+    render(<BaseVisitType onChange={mockHandleChange} visitTypes={mockVisitTypes} patientUuid="some-patient-uuid" />);
+  };
+
+  it('should be able to search for a visit type', () => {
+    renderVisitTypeOverview();
+
+    const hivVisit = screen.getByRole('radio', { name: /HIV Return Visit/i });
+    const outpatientVisit = screen.getByRole('radio', { name: /Outpatient Visit/i });
+
+    expect(outpatientVisit).toBeInTheDocument();
+    expect(hivVisit).toBeInTheDocument();
+
+    const searchInput = screen.getByRole('searchbox');
+    userEvent.type(searchInput, 'HIV');
+
+    expect(outpatientVisit).toBeEmptyDOMElement();
+    expect(hivVisit).toBeInTheDocument();
+  });
+});

packages/esm-patient-chart-app/src/visit/visit-form/recommended-visit-type.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useRecommendedVisitTypes } from '../hooks/useRecommendedVisitTypes';
+import BaseVisitType from './base-visit-type.component';
+import { PatientProgram } from '@openmrs/esm-patient-common-lib';
+import { StructuredListSkeleton } from 'carbon-components-react';
+
+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);