@openmrs/esm-patient-programs-app 3.2.1-pre.97 → 4.0.0

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

@@ -1,18 +1,20 @@
 import React from 'react';
 import { throwError } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createErrorHandler, openmrsFetch, showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
+import { createErrorHandler, openmrsFetch, showNotification, showToast } from '@openmrs/esm-framework';
 import { mockPatient } from '../../../../__mocks__/patient.mock';
 import {
   mockCareProgramsResponse,
   mockEnrolledProgramsResponse,
   mockLocationsResponse,
 } from '../../../../__mocks__/programs.mock';
-import { createProgramEnrollment } from './programs.resource';
+import { createProgramEnrollment, updateProgramEnrollment } from './programs.resource';
 import ProgramsForm from './programs-form.component';
 
+jest.setTimeout(20000);
+
 const testProps = {
   closeWorkspace: jest.fn(),
   patientUuid: mockPatient.id,
@@ -21,10 +23,10 @@ const testProps = {
 
 const mockCreateErrorHandler = createErrorHandler as jest.Mock;
 const mockCreateProgramEnrollment = createProgramEnrollment as jest.Mock;
+const mockUpdateProgramEnrollment = updateProgramEnrollment as jest.Mock;
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockShowNotification = showNotification as jest.Mock;
 const mockShowToast = showToast as jest.Mock;
-const mockUseLayoutType = useLayoutType as jest.Mock;
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -44,142 +46,143 @@ jest.mock('./programs.resource', () => {
   return {
     ...originalModule,
     createProgramEnrollment: jest.fn(),
+    updateProgramEnrollment: jest.fn(),
   };
 });
 
-describe('ProgramsForm: ', () => {
-  beforeEach(() => {
+describe('ProgramsForm', () => {
+  it('renders a success toast notification upon successfully recording a program enrollment', async () => {
+    const user = userEvent.setup();
+
+    const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
+    const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
+
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockCareProgramsResponse } });
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
-  });
+    mockCreateProgramEnrollment.mockReturnValueOnce(of({ status: 201, statusText: 'Created' }));
 
-  it('renders the programs form with all the relevant fields and values', async () => {
     renderProgramsForm();
 
-    await screen.findByRole('group', { name: /Program/i });
-    expect(screen.getByRole('group', { name: /Date enrolled/i })).toBeInTheDocument();
-    expect(screen.getByRole('group', { name: /Date completed/i })).toBeInTheDocument();
-    expect(screen.getByRole('group', { name: /Enrollment location/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Choose a program/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Oncology Screening and Diagnosis/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Choose a location/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Amani Hospital/i })).toBeInTheDocument();
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    const enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+    const selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+    const selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
+
+    await waitFor(() => user.type(enrollmentDateInput, '2020-05-05'));
+    await waitFor(() => user.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]));
+    await waitFor(() => user.selectOptions(selectLocationInput, [inpatientWardUuid]));
+
     expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Isolation Ward/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Laboratory/i })).toBeInTheDocument();
 
-    const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    const enrollButton = screen.getByRole('button', { name: /save and close/i });
-    expect(cancelButton).toBeInTheDocument();
-    expect(enrollButton).toBeInTheDocument();
-    expect(enrollButton).toBeDisabled();
+    await waitFor(() => user.click(enrollButton));
+
+    expect(mockCreateProgramEnrollment).toHaveBeenCalledTimes(1);
+    expect(mockCreateProgramEnrollment).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateCompleted: null,
+        location: inpatientWardUuid,
+        patient: mockPatient.id,
+        program: oncologyScreeningProgramUuid,
+      }),
+      new AbortController(),
+    );
+
+    expect(mockShowToast).toHaveBeenCalledTimes(1);
+    expect(mockShowToast).toHaveBeenCalledWith({
+      critical: true,
+      description: 'It is now visible in the Programs table',
+      kind: 'success',
+      title: 'Program enrollment saved',
+    });
   });
 
-  it('closes the form and the workspace when the cancel button is clicked', () => {
-    renderProgramsForm();
+  it('updates a program enrollment', async () => {
+    const user = userEvent.setup();
 
-    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
-    userEvent.click(cancelButton);
+    renderProgramsForm(mockEnrolledProgramsResponse[0].uuid);
 
-    expect(testProps.closeWorkspace).toHaveBeenCalledTimes(1);
-  });
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    const dateCompletedGroup = screen.getByRole('group', { name: /Date completed/i });
+    const dateCompletedInput = within(dateCompletedGroup).getByRole('textbox');
 
-  it('renders a light background for date inputs in the tablet viewport ', () => {
-    mockUseLayoutType.mockReturnValueOnce('tablet').mockReturnValueOnce('tablet');
+    mockUpdateProgramEnrollment.mockReturnValueOnce(of({ status: 200, statusText: 'OK' }));
 
-    renderProgramsForm();
+    await waitFor(() => user.type(dateCompletedInput, '05/05/2020'));
 
-    expect(screen.getAllByPlaceholderText('dd/mm/yyyy')[0]).toHaveClass('bx--date-picker--light', { exact: false });
-    expect(screen.getAllByPlaceholderText('dd/mm/yyyy')[1]).toHaveClass('bx--date-picker--light', { exact: false });
+    expect(dateCompletedInput).toHaveValue('05/05/2020');
+
+    await waitFor(() => user.tab());
+
+    expect(enrollButton).not.toBeDisabled();
+
+    await waitFor(() => user.click(enrollButton));
+
+    expect(mockUpdateProgramEnrollment).toHaveBeenCalledTimes(1);
+    expect(mockUpdateProgramEnrollment).toHaveBeenCalledWith(
+      mockEnrolledProgramsResponse[0].uuid,
+      expect.objectContaining({
+        dateEnrolled: '2020-01-16T00:00:00+00:00',
+        dateCompleted: '2020-05-05T00:00:00+00:00',
+        location: mockEnrolledProgramsResponse[0].location.uuid,
+        patient: mockPatient.id,
+        program: mockEnrolledProgramsResponse[0].program.uuid,
+      }),
+      new AbortController(),
+    );
+
+    expect(mockShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        critical: true,
+        description: 'Changes to the program are now visible in the Programs table',
+        kind: 'success',
+        title: 'Program enrollment updated',
+      }),
+    );
   });
 
-  describe('Form submission: ', () => {
+  it('renders an error notification if there was a problem recording a program enrollment', async () => {
+    const user = userEvent.setup();
+
     const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
     const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
-    let cancelButton: HTMLElement;
-    let enrollButton: HTMLElement;
-    let enrollmentDateInput: HTMLElement;
-    let selectLocationInput: HTMLElement;
-    let selectProgramInput: HTMLElement;
-
-    beforeEach(() => {
-      renderProgramsForm();
-
-      cancelButton = screen.getByRole('button', { name: /cancel/i });
-      enrollButton = screen.getByRole('button', { name: /save and close/i });
-      enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
-      selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
-      selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
-    });
 
-    it('renders a success toast notification upon successfully recording a program enrollment', async () => {
-      mockCreateProgramEnrollment.mockReturnValueOnce(of({ status: 201, statusText: 'Created' }));
-
-      userEvent.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]);
-      userEvent.selectOptions(selectLocationInput, [inpatientWardUuid]);
-      userEvent.type(enrollmentDateInput, '2020-05-05');
-
-      expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
-      expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
-      expect(enrollButton).not.toBeDisabled();
-
-      await waitFor(() => userEvent.click(enrollButton));
-
-      expect(mockCreateProgramEnrollment).toHaveBeenCalledTimes(1);
-      expect(mockCreateProgramEnrollment).toHaveBeenCalledWith(
-        expect.objectContaining({
-          dateCompleted: null,
-          location: inpatientWardUuid,
-          patient: mockPatient.id,
-          program: oncologyScreeningProgramUuid,
-        }),
-        new AbortController(),
-      );
-
-      expect(mockShowToast).toHaveBeenCalledTimes(1);
-      expect(mockShowToast).toHaveBeenCalledWith(
-        expect.objectContaining({
-          critical: true,
-          description: 'It is now visible on the Programs page',
-          kind: 'success',
-          title: 'Program enrollment saved',
-        }),
-      );
-    });
+    const error = {
+      message: 'Internal Server Error',
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error',
+      },
+    };
 
-    xit('renders an error notification if there was a problem recording a program enrollment', async () => {
-      const error = {
-        message: 'Internal Server Error',
-        response: {
-          status: 500,
-          statusText: 'Internal Server Error',
-        },
-      };
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockCareProgramsResponse } });
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
+    mockCreateProgramEnrollment.mockReturnValueOnce(throwError(error));
 
-      mockCreateProgramEnrollment.mockReturnValueOnce(throwError(error));
+    renderProgramsForm();
 
-      userEvent.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]);
-      userEvent.selectOptions(selectLocationInput, [inpatientWardUuid]);
-      userEvent.type(enrollmentDateInput, '2020-05-05');
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    const enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+    const selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+    const selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
 
-      expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
-      expect(screen.getByDisplayValue('2020-05-05')).toBeInTheDocument();
-      expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
-      expect(enrollButton).not.toBeDisabled();
+    await waitFor(() => user.type(enrollmentDateInput, '2020-05-05'));
+    await waitFor(() => user.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]));
+    await waitFor(() => user.selectOptions(selectLocationInput, [inpatientWardUuid]));
 
-      userEvent.click(enrollButton);
+    expect(enrollButton).not.toBeDisabled();
 
-      expect(mockCreateErrorHandler).toHaveBeenCalledTimes(1);
-      expect(mockShowNotification).toHaveBeenCalledWith({
-        critical: true,
-        description: 'Internal Server Error',
-        kind: 'error',
-        title: 'Error saving program enrollment',
-      });
+    await waitFor(() => user.click(enrollButton));
+
+    expect(mockCreateErrorHandler).toHaveBeenCalledTimes(1);
+    expect(mockShowNotification).toHaveBeenCalledWith({
+      critical: true,
+      description: 'Internal Server Error',
+      kind: 'error',
+      title: 'Error saving program enrollment',
     });
   });
 });
 
-function renderProgramsForm() {
-  render(<ProgramsForm {...testProps} />);
+function renderProgramsForm(programEnrollmentUuidToEdit?: string) {
+  render(<ProgramsForm {...testProps} programEnrollmentId={programEnrollmentUuidToEdit} />);
 }

package/src/programs/programs-overview.component.tsx

@@ -1,33 +1,33 @@
 import React from 'react';
-import Add16 from '@carbon/icons-react/es/add/16';
-import styles from './programs-overview.scss';
-import { formatDate, formatDatetime, usePagination } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import capitalize from 'lodash-es/capitalize';
 import {
+  Button,
   DataTable,
   DataTableSkeleton,
-  Button,
   InlineLoading,
+  InlineNotification,
   Table,
+  TableBody,
   TableCell,
   TableContainer,
-  TableBody,
   TableHead,
   TableHeader,
   TableRow,
-  InlineNotification,
-} from 'carbon-components-react';
-import filter from 'lodash-es/filter';
-import includes from 'lodash-es/includes';
-import map from 'lodash-es/map';
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
 import {
+  launchPatientWorkspace,
   CardHeader,
   EmptyState,
   ErrorState,
   PatientChartPagination,
-  launchPatientWorkspace,
 } from '@openmrs/esm-patient-common-lib';
-import { useTranslation } from 'react-i18next';
-import { useAvailablePrograms, useEnrollments } from './programs.resource';
+import { ConfigObject, formatDate, formatDatetime, useConfig, usePagination } from '@openmrs/esm-framework';
+import { usePrograms } from './programs.resource';
+import ProgramActionButton from './program-action-button/program-action-button.component';
+import { ConfigurableProgram } from '../types';
+import styles from './programs-overview.scss';
 
 interface ProgramsOverviewProps {
   basePath: string;
@@ -37,22 +37,29 @@ interface ProgramsOverviewProps {
 const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUuid }) => {
   const programsCount = 5;
   const { t } = useTranslation();
+  const config = useConfig() as ConfigObject;
   const displayText = t('programs', 'Program enrollments');
   const headerTitle = t('carePrograms', 'Care Programs');
   const urlLabel = t('seeAll', 'See all');
-  const pageUrl = window.spaBase + basePath + '/programs';
-
-  const { data: enrollments, isError, isLoading, isValidating } = useEnrollments(patientUuid);
-  const activeEnrollments = enrollments?.filter((enrollment) => !enrollment.dateCompleted);
-
-  const { data: availablePrograms } = useAvailablePrograms();
+  const pageUrl = `\${openmrsSpaBase}/patient/${patientUuid}/chart/Programs`;
+  const isConfigurable = config.customUrl ? true : false;
 
-  const eligiblePrograms = filter(
+  const {
+    activeEnrollments,
     availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
-  );
+    configurablePrograms,
+    eligiblePrograms,
+    enrollments,
+    isError,
+    isLoading,
+    isValidating,
+  } = usePrograms(patientUuid);
 
-  const { results: paginatedEnrollments, goTo, currentPage } = usePagination(enrollments ?? [], programsCount);
+  const {
+    results: paginatedEnrollments,
+    goTo,
+    currentPage,
+  } = usePagination(isConfigurable ? configurablePrograms : enrollments ?? [], programsCount);
 
   const launchProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace'), []);
 
@@ -73,30 +80,37 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUu
       key: 'status',
       header: t('status', 'Status'),
     },
+    {
+      key: 'actions',
+      header: t('actions', 'Actions'),
+    },
   ];
 
   const tableRows = React.useMemo(() => {
-    return paginatedEnrollments?.map((enrollment) => ({
+    return paginatedEnrollments?.map((enrollment: ConfigurableProgram) => ({
       id: enrollment.uuid,
       display: enrollment.display,
       location: enrollment.location?.display,
-      dateEnrolled: formatDatetime(new Date(enrollment.dateEnrolled)),
-      status: enrollment.dateCompleted
+      dateEnrolled: enrollment.dateEnrolled ? formatDatetime(new Date(enrollment.dateEnrolled)) : '--',
+      status: isConfigurable
+        ? capitalize(enrollment.enrollmentStatus)
+        : enrollment.dateCompleted
         ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(enrollment.dateCompleted))}`
         : t('active', 'Active'),
+      actions: <ProgramActionButton enrollment={enrollment} />,
     }));
-  }, [paginatedEnrollments, t]);
+  }, [isConfigurable, paginatedEnrollments, t]);
 
   if (isLoading) return <DataTableSkeleton role="progressbar" />;
   if (isError) return <ErrorState error={isError} headerTitle={headerTitle} />;
-  if (activeEnrollments?.length) {
+  if (isConfigurable ? configurablePrograms.length : activeEnrollments?.length) {
     return (
       <div className={styles.widgetCard}>
         <CardHeader title={headerTitle}>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button
             kind="ghost"
-            renderIcon={Add16}
+            renderIcon={(props) => <Add size={16} {...props} />}
             iconDescription="Add programs"
             onClick={launchProgramsForm}
             disabled={availablePrograms?.length && eligiblePrograms?.length === 0}
@@ -104,19 +118,19 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUu
             {t('add', 'Add')}
           </Button>
         </CardHeader>
-        <TableContainer>
-          {availablePrograms?.length && eligiblePrograms?.length === 0 && (
-            <InlineNotification
-              style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
-              kind={'info'}
-              lowContrast
-              subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
-              title={t('fullyEnrolled', 'Enrolled in all programs')}
-            />
-          )}
-          <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="short">
-            {({ rows, headers, getHeaderProps, getTableProps }) => (
-              <Table {...getTableProps()} useZebraStyles>
+        {availablePrograms?.length && eligiblePrograms?.length === 0 && (
+          <InlineNotification
+            style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
+            kind={'info'}
+            lowContrast
+            subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
+            title={t('fullyEnrolled', 'Enrolled in all programs')}
+          />
+        )}
+        <DataTable rows={tableRows} headers={tableHeaders} isSortable size="sm" useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
@@ -142,15 +156,15 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ basePath, patientUu
                   ))}
                 </TableBody>
               </Table>
-            )}
-          </DataTable>
-        </TableContainer>
+            </TableContainer>
+          )}
+        </DataTable>
         <PatientChartPagination
           currentItems={paginatedEnrollments.length}
           onPageNumberChange={({ page }) => goTo(page)}
           pageNumber={currentPage}
           pageSize={programsCount}
-          totalItems={enrollments.length}
+          totalItems={isConfigurable ? configurablePrograms.length : enrollments?.length}
           dashboardLinkUrl={pageUrl}
           dashboardLinkLabel={urlLabel}
         />

package/src/programs/programs-overview.scss

@@ -1,6 +1,4 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;

package/src/programs/programs-overview.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { openmrsFetch, usePagination } from '@openmrs/esm-framework';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
@@ -67,14 +67,12 @@ describe('ProgramsOverview', () => {
     await waitForLoadingToFinish();
 
     expect(screen.getByText(/Care Programs/i)).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        /Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above./,
-      ),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/Sorry, there was a problem displaying this information./)).toBeInTheDocument();
   });
 
   it("renders a tabular overview of the patient's active program enrollments when available", async () => {
+    const user = userEvent.setup();
+
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
     mockUsePagination.mockImplementation(() => ({
       currentPage: 1,
@@ -103,7 +101,8 @@ describe('ProgramsOverview', () => {
     expect(screen.getByRole('row', { name: /HIV Care and Treatment/i })).toBeInTheDocument();
 
     // Clicking "Add" launches the programs form in a workspace
-    userEvent.click(addButton);
+    await waitFor(() => user.click(addButton));
+
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace');
   });
 });

package/src/programs/programs.resource.tsx

@@ -1,8 +1,12 @@
 import useSWR from 'swr';
-import { map } from 'rxjs/operators';
-import { openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
-import { PatientProgram, Program, ProgramsFetchResponse } from '../types';
+import { map as rxjsMap } from 'rxjs/operators';
+import { openmrsFetch, openmrsObservableFetch, useConfig } from '@openmrs/esm-framework';
+import { ConfigurableProgram, PatientProgram, Program, ProgramsFetchResponse } from '../types';
 import uniqBy from 'lodash-es/uniqBy';
+import filter from 'lodash-es/filter';
+import includes from 'lodash-es/includes';
+import map from 'lodash-es/map';
+import { ConfigObject } from '../config-schema';
 
 export const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display))`;
 
@@ -17,30 +21,41 @@ export function useEnrollments(patientUuid: string) {
       ? data?.data.results.sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
       : null;
 
+  const activeEnrollments = formattedEnrollments?.filter((enrollment) => !enrollment.dateCompleted);
+
   return {
     data: data ? uniqBy(formattedEnrollments, (program) => program?.program?.uuid) : null,
     isError: error,
     isLoading: !data && !error,
     isValidating,
+    activeEnrollments,
   };
 }
 
-export function useAvailablePrograms() {
+export function useAvailablePrograms(enrollments?: Array<PatientProgram>) {
   const { data, error } = useSWR<{ data: { results: Array<Program> } }, Error>(
     `/ws/rest/v1/program?v=custom:(uuid,display,allWorkflows,concept:(uuid,display))`,
     openmrsFetch,
   );
 
+  const availablePrograms = data?.data?.results ?? null;
+
+  const eligiblePrograms = filter(
+    availablePrograms,
+    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
+  );
+
   return {
-    data: data?.data?.results?.length ? data.data.results : null,
+    data: availablePrograms,
     isError: error,
     isLoading: !data && !error,
+    eligiblePrograms,
   };
 }
 
 export function getPatientProgramByUuid(programUuid: string) {
   return openmrsObservableFetch<PatientProgram>(`/ws/rest/v1/programenrollment/${programUuid}`).pipe(
-    map(({ data }) => data),
+    rxjsMap(({ data }) => data),
   );
 }
 
@@ -59,12 +74,12 @@ export function createProgramEnrollment(payload, abortController) {
   });
 }
 
-export function updateProgramEnrollment(payload, abortController) {
+export function updateProgramEnrollment(programEnrollmentUuid: string, payload, abortController) {
   if (!payload && !payload.program) {
     return null;
   }
   const { program, dateEnrolled, dateCompleted, location } = payload;
-  return openmrsObservableFetch(`/ws/rest/v1/programenrollment/${program}`, {
+  return openmrsObservableFetch(`/ws/rest/v1/programenrollment/${programEnrollmentUuid}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -73,3 +88,43 @@ export function updateProgramEnrollment(payload, abortController) {
     signal: abortController.signal,
   });
 }
+
+export const useConfigurableProgram = (patientUuid: string) => {
+  const { customUrl } = useConfig() as ConfigObject;
+  const { data, error } = useSWR<{ data: Array<ConfigurableProgram> }>(
+    customUrl ? `${customUrl}${patientUuid}` : null,
+    openmrsFetch,
+  );
+  const configurablePrograms = data?.data ?? [];
+  return {
+    configurablePrograms,
+    isLoading: !data && !error,
+    error: error,
+  };
+};
+
+export const usePrograms = (patientUuid: string) => {
+  const { customUrl } = useConfig() as ConfigObject;
+  const {
+    data: enrollments,
+    isError: enrollError,
+    isLoading: enrolLoading,
+    isValidating,
+    activeEnrollments,
+  } = useEnrollments(patientUuid);
+  const { data: availablePrograms, eligiblePrograms } = useAvailablePrograms(enrollments);
+  const { configurablePrograms, isLoading: configLoading, error: configError } = useConfigurableProgram(patientUuid);
+
+  const status = customUrl
+    ? { isLoading: configLoading, isError: configError }
+    : { isLoading: enrolLoading, isError: enrollError };
+  return {
+    enrollments,
+    ...status,
+    isValidating,
+    activeEnrollments,
+    availablePrograms,
+    eligiblePrograms,
+    configurablePrograms,
+  };
+};

package/src/types/index.ts

@@ -15,11 +15,15 @@ export interface PatientProgram {
       states: Array<{}>;
       links?: Links;
     }>;
+    concept: {
+      display: string;
+      uuid: string;
+    };
     links: Links;
   };
   display: string;
-  dateEnrolled: Date;
-  dateCompleted: Date | null;
+  dateEnrolled: string;
+  dateCompleted: string | null;
   location?: {
     uuid: string;
     display: string;
@@ -95,3 +99,13 @@ export interface SessionData {
   retired: false;
   links: Links;
 }
+
+export interface ConfigurableProgram extends PatientProgram {
+  uuid: string;
+  display: string;
+  enrollmentFormUuid: string;
+  discontinuationFormUuid: string;
+  enrollmentStatus: string;
+  dateEnrolled: string;
+  dateCompleted: string;
+}