@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/start-visit-button.component.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { launchWorkspace2, showSnackbar } from '@openmrs/esm-framework';
+
+interface StartVisitButtonProps {
+  patientUuid: string;
+  handleReturnToSearchList?: () => void;
+  hidePatientSearch?: () => void;
+}
+
+/**
+ * This button shows up in search results patient cards for patients with no active visit
+ */
+const StartVisitButton = ({ patientUuid, handleReturnToSearchList, hidePatientSearch }: StartVisitButtonProps) => {
+  const { t } = useTranslation();
+  const startVisitWorkspaceForm = 'start-visit-workspace-form';
+
+  const handleStartVisit = useCallback(() => {
+    hidePatientSearch?.();
+
+    try {
+      launchWorkspace2(startVisitWorkspaceForm, {
+        patientUuid,
+        openedFrom: 'patient-chart-start-visit',
+        handleReturnToSearchList,
+      });
+    } catch (error) {
+      console.error('Error launching visit form workspace:', error);
+
+      showSnackbar({
+        isLowContrast: false,
+        kind: 'error',
+        title: t('errorStartingVisit', 'Error starting visit'),
+        subtitle: error.message ?? t('errorStartingVisitDescription', 'An error occurred while starting the visit'),
+      });
+    }
+  }, [patientUuid, t, handleReturnToSearchList, hidePatientSearch]);
+
+  return (
+    <Button aria-label={t('startVisit', 'Start visit')} kind="primary" onClick={handleStartVisit}>
+      {t('startVisit', 'Start visit')}
+    </Button>
+  );
+};
+
+export default StartVisitButton;

package/src/visit/start-visit-button.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import { mockPatient } from 'tools';
+import StartVisitButton from './start-visit-button.component';
+
+const mockLaunchWorkspace = vi.mocked(launchWorkspace2);
+
+describe('StartVisitButton', () => {
+  it('renders the start visit button', () => {
+    render(<StartVisitButton patientUuid={mockPatient.id} />);
+
+    expect(screen.getByRole('button', { name: /start visit/i })).toBeInTheDocument();
+  });
+
+  it('clicking the button launches the start visit form', async () => {
+    const user = userEvent.setup();
+
+    render(<StartVisitButton patientUuid={mockPatient.id} />);
+
+    const startVisitButton = screen.getByRole('button', { name: /start visit/i });
+    await user.click(startVisitButton);
+
+    expect(mockLaunchWorkspace).toHaveBeenCalledTimes(1);
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith('start-visit-workspace-form', {
+      patientUuid: mockPatient.id,
+      openedFrom: 'patient-chart-start-visit',
+    });
+  });
+});

package/src/visit/visit-action-items/delete-visit-action-item.component.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Button, IconButton } from '@carbon/react';
+import {
+  TrashCanIcon,
+  UserHasAccess,
+  type Visit,
+  getCoreTranslation,
+  showModal,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+interface DeleteVisitActionItemProps {
+  patientUuid: string;
+  visit: Visit;
+
+  /**
+   * If true, renders as IconButton instead
+   */
+  compact?: boolean;
+}
+
+const DeleteVisitActionItem: React.FC<DeleteVisitActionItemProps> = ({ visit, compact }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+
+  const deleteVisit = () => {
+    const dispose = showModal('delete-visit-dialog', {
+      visit,
+      closeModal: () => dispose(),
+    });
+  };
+
+  if (visit?.encounters?.length) {
+    return null;
+  }
+
+  return (
+    <UserHasAccess privilege="Delete Visits">
+      {compact ? (
+        <IconButton
+          onClick={deleteVisit}
+          label={getCoreTranslation('delete')}
+          kind="ghost"
+          size={responsiveSize}
+          align="top-end"
+        >
+          <TrashCanIcon size={16} />
+        </IconButton>
+      ) : (
+        <Button onClick={deleteVisit} kind="danger--ghost" renderIcon={TrashCanIcon} size={responsiveSize}>
+          {t('deleteVisit', 'Delete visit')}
+        </Button>
+      )}
+    </UserHasAccess>
+  );
+};
+
+export default DeleteVisitActionItem;

package/src/visit/visit-action-items/delete-visit-action-item.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showModal, type Visit } from '@openmrs/esm-framework';
+import { mockCurrentVisit } from '__mocks__';
+import DeleteVisitActionItem from './delete-visit-action-item.component';
+
+const mockShowModal = vi.mocked(showModal);
+
+describe('DeleteVisitActionItem', () => {
+  it('renders a delete visit button when the visit has no encounters', () => {
+    render(<DeleteVisitActionItem patientUuid="some-uuid" visit={mockCurrentVisit} />);
+
+    expect(screen.getByRole('button', { name: /delete visit/i })).toBeInTheDocument();
+  });
+
+  it('renders a compact icon button when compact is true', () => {
+    render(<DeleteVisitActionItem patientUuid="some-uuid" visit={mockCurrentVisit} compact />);
+
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+  });
+
+  it('renders nothing when the visit has encounters', () => {
+    const visitWithEncounters = {
+      ...mockCurrentVisit,
+      encounters: [{ uuid: 'enc-1' }],
+    } as Visit;
+
+    const { container } = render(<DeleteVisitActionItem patientUuid="some-uuid" visit={visitWithEncounters} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('opens the delete visit modal with the visit when clicked', async () => {
+    const user = userEvent.setup();
+    mockShowModal.mockReturnValue(vi.fn());
+
+    render(<DeleteVisitActionItem patientUuid="some-uuid" visit={mockCurrentVisit} />);
+
+    await user.click(screen.getByRole('button', { name: /delete visit/i }));
+
+    expect(mockShowModal).toHaveBeenCalledWith('delete-visit-dialog', {
+      visit: mockCurrentVisit,
+      closeModal: expect.any(Function),
+    });
+  });
+});

package/src/visit/visit-action-items/edit-visit-details.component.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Button, IconButton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  EditIcon,
+  UserHasAccess,
+  type Visit,
+  getCoreTranslation,
+  launchWorkspace2,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { type VisitFormProps } from '../visit-form/visit-form.workspace';
+import {
+  invalidateVisitAndEncounterData,
+  invalidateVisitByUuid,
+  type PatientWorkspaceGroupProps,
+} from '@openmrs/esm-patient-common-lib';
+import { useSWRConfig } from 'swr';
+
+interface EditVisitDetailsActionItemProps {
+  visit: Visit;
+  patient: fhir.Patient;
+
+  /**
+   * If true, renders as IconButton instead
+   */
+  compact?: boolean;
+}
+
+/**
+ * This component
+ */
+const EditVisitDetailsActionItem: React.FC<EditVisitDetailsActionItemProps> = ({ visit, patient, compact }) => {
+  const { t } = useTranslation();
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const isTablet = useLayoutType() === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+  const patientUuid = patient.id;
+
+  const editVisitDetails = () => {
+    launchWorkspace2<VisitFormProps, {}, PatientWorkspaceGroupProps>(
+      'start-visit-workspace-form',
+      { openedFrom: 'patient-chart-edit-visit' },
+      {},
+      {
+        patient,
+        patientUuid: patientUuid,
+        visitContext: visit,
+        mutateVisitContext: () => {
+          invalidateVisitByUuid(globalMutate, visit.uuid);
+          invalidateVisitAndEncounterData(globalMutate, patientUuid);
+        },
+      },
+    );
+  };
+
+  return (
+    <UserHasAccess privilege="Edit Visits">
+      {compact ? (
+        <IconButton
+          onClick={editVisitDetails}
+          label={getCoreTranslation('edit')}
+          size={responsiveSize}
+          kind="ghost"
+          align="top-end"
+        >
+          <EditIcon size={16} />
+        </IconButton>
+      ) : (
+        <Button onClick={editVisitDetails} kind="ghost" renderIcon={EditIcon} size={responsiveSize}>
+          {t('editVisitDetails', 'Edit visit details')}
+        </Button>
+      )}
+    </UserHasAccess>
+  );
+};
+
+export default EditVisitDetailsActionItem;

package/src/visit/visit-form/base-visit-type.component.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useMemo, useCallback, useEffect, useRef, type ChangeEvent } from 'react';
+import classNames from 'classnames';
+import { Layer, RadioButton, RadioButtonGroup, Search, StructuredListSkeleton, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useFormContext, Controller } from 'react-hook-form';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useDebounce, useLayoutType, usePagination, type VisitType } from '@openmrs/esm-framework';
+import { type VisitFormData } from './visit-form.resource';
+import styles from './base-visit-type.scss';
+
+interface BaseVisitTypeProps {
+  visitTypes: Array<VisitType>;
+}
+
+const BaseVisitType: React.FC<BaseVisitTypeProps> = ({ visitTypes }) => {
+  const { t } = useTranslation();
+  const { control, setValue } = useFormContext<VisitFormData>();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const searchResults = useMemo(() => {
+    if (!debouncedSearchTerm.trim()) {
+      return visitTypes;
+    }
+    const lowercasedTerm = debouncedSearchTerm.toLowerCase();
+    return visitTypes.filter((visitType) => visitType.display.toLowerCase().includes(lowercasedTerm));
+  }, [debouncedSearchTerm, visitTypes]);
+
+  const { results, currentPage, goTo } = usePagination(searchResults, 5);
+  const hasNoMatchingSearchResults = debouncedSearchTerm.trim() !== '' && searchResults.length === 0;
+  const prevSearchTermRef = useRef(debouncedSearchTerm);
+
+  const handleSearchTermChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  }, []);
+
+  useEffect(() => {
+    if (searchResults?.length === 1) {
+      setValue('visitType', searchResults[0].uuid);
+    }
+  }, [searchResults, setValue]);
+
+  // Reset pagination to page 1 when search term changes
+  useEffect(() => {
+    if (prevSearchTermRef.current !== debouncedSearchTerm && currentPage !== 1) {
+      goTo(1);
+    }
+    prevSearchTermRef.current = debouncedSearchTerm;
+  }, [debouncedSearchTerm, currentPage, goTo]);
+
+  const searchComponent = (
+    <Search
+      labelText={t('searchForAVisitType', 'Search for a visit type')}
+      onChange={handleSearchTermChange}
+      placeholder={t('searchForAVisitType', 'Search for a visit type')}
+      value={searchTerm}
+    />
+  );
+
+  return (
+    <div className={classNames(styles.visitTypeOverviewWrapper, isTablet ? styles.tablet : styles.desktop)}>
+      {visitTypes.length ? (
+        <>
+          {isTablet ? <Layer>{searchComponent}</Layer> : searchComponent}
+
+          {hasNoMatchingSearchResults ? (
+            <div className={styles.tileContainer}>
+              <Tile className={styles.tile}>
+                <div className={styles.tileContent}>
+                  <p className={styles.content}>{t('noVisitTypesToDisplay', 'No visit types to display')}</p>
+                  <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                </div>
+              </Tile>
+            </div>
+          ) : (
+            <Controller
+              name="visitType"
+              control={control}
+              render={({ field: { onChange, value } }) => (
+                <RadioButtonGroup
+                  className={styles.radioButtonGroup}
+                  name="visit-types"
+                  onChange={onChange}
+                  orientation="vertical"
+                  valueSelected={value}
+                >
+                  {results.map(({ display, uuid }) => (
+                    <RadioButton
+                      className={styles.radioButton}
+                      id={`visit-type-${uuid}`}
+                      key={uuid}
+                      labelText={display}
+                      value={uuid}
+                    />
+                  ))}
+                </RadioButtonGroup>
+              )}
+            />
+          )}
+
+          {!hasNoMatchingSearchResults && (
+            <div className={styles.paginationContainer}>
+              <PatientChartPagination
+                currentItems={results.length}
+                onPageNumberChange={({ page }) => goTo(page)}
+                pageNumber={currentPage}
+                pageSize={5}
+                totalItems={searchResults.length}
+              />
+            </div>
+          )}
+        </>
+      ) : (
+        <StructuredListSkeleton className={styles.skeleton} />
+      )}
+    </div>
+  );
+};
+
+export default BaseVisitType;

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

@@ -0,0 +1,75 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tablet {
+  background-color: $ui-02;
+}
+
+.desktop {
+  background-color: $ui-01;
+
+  .paginationContainer div {
+    background-color: $ui-01;
+  }
+}
+
+.visitTypeOverviewWrapper {
+  margin: layout.$spacing-03 0;
+  border: 0.0625rem solid $grey-2;
+
+  &:has(.skeleton) {
+    border-bottom: none !important;
+  }
+}
+
+.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: layout.$spacing-03;
+  min-height: layout.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: layout.$spacing-02 layout.$spacing-05;
+  margin: layout.$spacing-03 0;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { vi, describe, it, expect, test } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { useVisitTypes } from '@openmrs/esm-framework';
+import { mockVisitTypes } from '__mocks__';
+import BaseVisitType from './base-visit-type.component';
+
+vi.mock('lodash-es/debounce', () => vi.fn((fn) => fn));
+
+const mockUseVisitTypes = vi.mocked(useVisitTypes);
+
+vi.mock('react-hook-form', async () => ({
+  ...((await vi.importActual('react-hook-form')) as object),
+  useFormContext: vi.fn().mockImplementation(() => ({
+    handleSubmit: () => vi.fn(),
+    control: {
+      register: vi.fn(),
+      unregister: vi.fn(),
+      getFieldState: vi.fn(),
+      _names: {
+        array: new Set('test'),
+        mount: new Set('test'),
+        unMount: new Set('test'),
+        watch: new Set('test'),
+        focus: 'test',
+        watchAll: false,
+      },
+      _subjects: {
+        watch: vi.fn(),
+        array: vi.fn(),
+        state: vi.fn(),
+      },
+      _getWatch: vi.fn(),
+      _formValues: [],
+      _defaultValues: [],
+    },
+    getValues: () => {
+      return [];
+    },
+    setValue: () => vi.fn(),
+    formState: () => vi.fn(),
+    watch: () => vi.fn(),
+  })),
+  Controller: ({ render }) =>
+    render({
+      field: {
+        onChange: vi.fn(),
+        onBlur: vi.fn(),
+        value: '',
+        ref: vi.fn(),
+      },
+      formState: {
+        isSubmitted: false,
+      },
+      fieldState: {
+        isTouched: false,
+      },
+    }),
+  useSubscribe: () => ({
+    r: { current: { subject: { subscribe: () => vi.fn() } } },
+  }),
+}));
+
+describe('VisitTypeOverview', () => {
+  const renderVisitTypeOverview = () => {
+    mockUseVisitTypes.mockReturnValue(mockVisitTypes);
+    render(<BaseVisitType visitTypes={mockVisitTypes} />);
+  };
+
+  it('renders a list of the available visit types', () => {
+    renderVisitTypeOverview();
+
+    mockVisitTypes.forEach((visitType) => {
+      const radio = screen.getByRole('radio', { name: new RegExp(visitType.display, 'i') });
+      expect(radio).toBeInTheDocument();
+      expect(radio).not.toBeChecked();
+    });
+  });
+
+  it('allows keyboard navigation through visit types', async () => {
+    const user = userEvent.setup();
+
+    renderVisitTypeOverview();
+
+    const firstVisitType = screen.getByRole('radio', { name: new RegExp(mockVisitTypes[0].display, 'i') });
+    firstVisitType.focus();
+
+    await user.keyboard('{ArrowDown}');
+    expect(screen.getByRole('radio', { name: new RegExp(mockVisitTypes[1].display, 'i') })).toHaveFocus();
+
+    await user.keyboard('{ArrowUp}');
+    expect(firstVisitType).toHaveFocus();
+  });
+
+  it('clears the search input when the clear button is clicked', async () => {
+    const user = userEvent.setup();
+
+    renderVisitTypeOverview();
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'HIV');
+
+    const clearButton = screen.getByRole('button', { name: /clear/i });
+    await user.click(clearButton);
+
+    expect(searchInput).toHaveValue('');
+    mockVisitTypes.forEach((visitType) => {
+      expect(screen.getByRole('radio', { name: new RegExp(visitType.display, 'i') })).toBeInTheDocument();
+    });
+  });
+
+  it('searches for a matching visit type when the user types in the search input', async () => {
+    const user = userEvent.setup();
+
+    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');
+    await user.type(searchInput, 'HIV');
+
+    expect(outpatientVisit).toBeEmptyDOMElement();
+    expect(hivVisit).toBeInTheDocument();
+  });
+
+  it('renders an empty state when a search yields no matching results', async () => {
+    const user = userEvent.setup();
+
+    renderVisitTypeOverview();
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'NonexistentVisitType');
+
+    expect(screen.getByText(/no visit types to display/i)).toBeInTheDocument();
+    expect(screen.getByText(/check the filters above/i)).toBeInTheDocument();
+  });
+
+  it('selects a visit type when clicked', async () => {
+    const user = userEvent.setup();
+
+    renderVisitTypeOverview();
+
+    const hivVisit = screen.getByRole('radio', { name: /HIV Return Visit/i });
+    await user.click(hivVisit);
+
+    expect(hivVisit).toBeChecked();
+  });
+});