@openmrs/esm-patient-chart-app 11.3.1-pre.9283 → 11.3.1-pre.9296

package/src/visit/visit-form/visit-form.workspace.tsx

@@ -36,8 +36,10 @@ import {
 } from '@openmrs/esm-framework';
 import {
   createOfflineVisitForPatient,
+  invalidateVisitByUuid,
   invalidateVisitAndEncounterData,
   useActivePatientEnrollment,
+  usePatientChartStore,
   type DefaultPatientWorkspaceProps,
 } from '@openmrs/esm-patient-common-lib';
 import { MemoizedRecommendedVisitType } from './recommended-visit-type.component';
@@ -120,9 +122,10 @@ const VisitForm: React.FC<VisitFormProps> = ({
   );
   const visitHeaderSlotState = useMemo(() => ({ patientUuid }), [patientUuid]);
   const { activePatientEnrollment, isLoading } = useActivePatientEnrollment(patientUuid);
-  const { mutate: mutateCurrentVisit } = useVisit(patientUuid);
+  const { mutate: mutateActiveVisit } = useVisit(patientUuid);
   const { mutate: globalMutate } = useSWRConfig();
   const allVisitTypes = useConditionalVisitTypes();
+  const { setVisitContext } = usePatientChartStore(patientUuid);
 
   const [errorFetchingResources, setErrorFetchingResources] = useState<{
     blockSavingForm: boolean;
@@ -327,12 +330,15 @@ const VisitForm: React.FC<VisitFormProps> = ({
             // 1. Current visit data (for critical components like visit summary, action buttons)
             // 2. Visit history table (for the paginated visit list)
 
-            // Update current visit data for critical components (useVisit hook)
-            mutateCurrentVisit();
+            // Update patient's visit data for critical components
+            const mutateSavedOrUpdatedVisit = () => invalidateVisitByUuid(globalMutate, visit.uuid);
+            mutateActiveVisit();
+            setVisitContext?.(visit, mutateSavedOrUpdatedVisit);
+            visitToEdit && mutateSavedOrUpdatedVisit();
 
             // Use targeted SWR invalidation instead of global mutateVisit
             // This will invalidate visit history and encounter tables for this patient
-            // (current visit is already updated with mutateCurrentVisit)
+            // (if visitContext is updated, it should have been invalidated with mutateSavedOrUpdatedVisit)
             invalidateVisitAndEncounterData(globalMutate, patientUuid);
 
             // handleVisitAttributes already has code to show error snackbar when attribute fails to update
@@ -371,9 +377,12 @@ const VisitForm: React.FC<VisitFormProps> = ({
           config.offlineVisitTypeUuid,
           payload.startDatetime,
         ).then(
-          () => {
+          (visit) => {
             // Use same targeted approach for offline visits for consistency
-            mutateCurrentVisit();
+            const mutateSavedOrUpdatedVisit = () => invalidateVisitByUuid(globalMutate, visit.uuid);
+            mutateActiveVisit();
+            setVisitContext?.(visit, mutateSavedOrUpdatedVisit);
+            visitToEdit && mutateSavedOrUpdatedVisit();
 
             // Also invalidate visit history and encounter tables
             invalidateVisitAndEncounterData(globalMutate, patientUuid);
@@ -407,12 +416,13 @@ const VisitForm: React.FC<VisitFormProps> = ({
       globalMutate,
       handleVisitAttributes,
       isOnline,
-      mutateCurrentVisit,
+      setVisitContext,
       patientUuid,
       t,
       visitFormCallbacks,
       visitToEdit,
       isValidVisitAttributesArray,
+      mutateActiveVisit,
     ],
   );
 

package/src/visit/visit-prompt/delete-visit-dialog.component.tsx

@@ -8,12 +8,18 @@ import styles from './start-visit-dialog.scss';
 interface DeleteVisitDialogProps {
   closeModal: () => void;
   patientUuid: string;
-  visit: Visit;
+  activeVisit: Visit;
+  mutateActiveVisit: () => void;
 }
 
-const DeleteVisitDialog: React.FC<DeleteVisitDialogProps> = ({ closeModal, patientUuid, visit }) => {
+const DeleteVisitDialog: React.FC<DeleteVisitDialogProps> = ({
+  closeModal,
+  mutateActiveVisit,
+  patientUuid,
+  activeVisit,
+}) => {
   const { t } = useTranslation();
-  const { isDeletingVisit, initiateDeletingVisit } = useDeleteVisit(visit, closeModal);
+  const { isDeletingVisit, initiateDeletingVisit } = useDeleteVisit(activeVisit, mutateActiveVisit, closeModal);
 
   return (
     <div>
@@ -24,7 +30,7 @@ const DeleteVisitDialog: React.FC<DeleteVisitDialogProps> = ({ closeModal, patie
       <ModalBody>
         <p className={styles.body}>
           {t('confirmDeleteVisitText', 'Deleting this {{visit}} will delete its associated encounters.', {
-            visit: visit?.visitType?.display ?? t('visit', 'Visit'),
+            visit: activeVisit?.visitType?.display ?? t('visit', 'Visit'),
           })}
         </p>
       </ModalBody>

package/src/visit/visit-prompt/delete-visit-dialog.test.tsx

@@ -9,6 +9,7 @@ import DeleteVisitDialog from './delete-visit-dialog.component';
 const mockCloseModal = jest.fn();
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockActiveVisit = jest.fn();
 
 describe('Delete visit', () => {
   it('voids the visit and voids its associated encounters', async () => {
@@ -21,7 +22,14 @@ describe('Delete visit', () => {
 
     mockOpenmrsFetch.mockResolvedValue(response as FetchResponse);
 
-    render(<DeleteVisitDialog visit={mockCurrentVisit} closeModal={mockCloseModal} patientUuid={mockPatient.id} />);
+    render(
+      <DeleteVisitDialog
+        activeVisit={mockCurrentVisit}
+        mutateActiveVisit={mockActiveVisit}
+        closeModal={mockCloseModal}
+        patientUuid={mockPatient.id}
+      />,
+    );
 
     const cancelButton = screen.getByRole('button', { name: /^cancel$/i });
     const deleteVisitButton = screen.getByRole('button', { name: /delete visit$/i });
@@ -46,6 +54,7 @@ describe('Delete visit', () => {
         subtitle: 'Facility Visit deleted successfully',
       }),
     );
+    expect(mockActiveVisit).toHaveBeenCalledTimes(1);
   });
 
   it('displays an error notification if there was problem with deleting a visit', async () => {
@@ -53,7 +62,14 @@ describe('Delete visit', () => {
 
     mockOpenmrsFetch.mockRejectedValueOnce({ message: 'Internal server error', status: 500 });
 
-    render(<DeleteVisitDialog visit={mockCurrentVisit} closeModal={mockCloseModal} patientUuid={mockPatient.id} />);
+    render(
+      <DeleteVisitDialog
+        activeVisit={mockCurrentVisit}
+        mutateActiveVisit={mockActiveVisit}
+        closeModal={mockCloseModal}
+        patientUuid={mockPatient.id}
+      />,
+    );
 
     const cancelButton = screen.getByRole('button', { name: /^cancel$/i });
     const deleteVisitButton = screen.getByRole('button', { name: /delete visit$/i });
@@ -74,5 +90,7 @@ describe('Delete visit', () => {
       kind: 'error',
       title: 'Error deleting visit',
     });
+
+    expect(mockActiveVisit).toHaveBeenCalledTimes(1);
   });
 });

package/src/visit/visit-prompt/end-visit-dialog.component.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import styles from './end-visit-dialog.scss';
 
 interface EndVisitDialogProps {
@@ -13,10 +14,13 @@ interface EndVisitDialogProps {
  * This modal shows up when user clicks on the "End visit" button in the action menu within the
  * patient banner. It should only show when the patient has an active visit. See stop-visit.component.tsx
  * for the button.
+ *
+ * This dialog uses the patient chart store and SHOULD only be mounted within the patient chart
  */
 const EndVisitDialog: React.FC<EndVisitDialogProps> = ({ patientUuid, closeModal }) => {
   const { t } = useTranslation();
   const { activeVisit, mutate } = useVisit(patientUuid);
+  const { visitContext, setVisitContext } = usePatientChartStore(patientUuid);
 
   const handleEndVisit = () => {
     if (activeVisit) {
@@ -31,7 +35,9 @@ const EndVisitDialog: React.FC<EndVisitDialogProps> = ({ patientUuid, closeModal
           mutate();
           window.dispatchEvent(new CustomEvent('queue-entry-updated'));
           closeModal();
-
+          if (visitContext?.uuid === activeVisit.uuid) {
+            setVisitContext(null, null);
+          }
           showSnackbar({
             isLowContrast: true,
             kind: 'success',

package/src/visit/visit-prompt/end-visit-dialog.test.tsx

@@ -4,6 +4,7 @@ import { screen, render } from '@testing-library/react';
 import { showSnackbar, updateVisit, useVisit, type Visit, type FetchResponse } from '@openmrs/esm-framework';
 import { mockCurrentVisit } from '__mocks__';
 import EndVisitDialog from './end-visit-dialog.component';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 const endVisitPayload = {
   stopDatetime: expect.any(Date),
@@ -15,6 +16,22 @@ const mockShowSnackbar = jest.mocked(showSnackbar);
 const mockUseVisit = jest.mocked(useVisit);
 const mockUpdateVisit = jest.mocked(updateVisit);
 
+const mockUsePatientChartStore = jest.mocked(usePatientChartStore);
+const mockSetVisitContext = jest.fn();
+
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  usePatientChartStore: jest.fn(),
+}));
+
+mockUsePatientChartStore.mockReturnValue({
+  patientUuid: 'patient-123',
+  patient: null,
+  visitContext: mockCurrentVisit,
+  mutateVisitContext: jest.fn(),
+  setPatient: jest.fn(),
+  setVisitContext: mockSetVisitContext,
+});
+
 describe('End visit dialog', () => {
   beforeEach(() => {
     mockUseVisit.mockReturnValue({
@@ -66,6 +83,8 @@ describe('End visit dialog', () => {
       kind: 'success',
       title: 'Visit ended',
     });
+
+    expect(mockSetVisitContext).toHaveBeenCalledTimes(1);
   });
 
   test('displays an error snackbar if there was a problem ending a visit', async () => {

package/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.tsx

@@ -20,13 +20,14 @@ const ActiveVisitActions: React.FC<ActiveVisitActionsInterface> = ({ visit, pati
   const isTablet = layout === 'tablet';
   const isMobile = layout === 'phone';
 
-  const launchAllergiesFormWorkspace = useLaunchWorkspaceRequiringVisit('patient-allergy-form-workspace');
-  const launchAppointmentsFormWorkspace = useLaunchWorkspaceRequiringVisit('appointments-form-workspace');
-  const launchClinicalFormsWorkspace = useLaunchWorkspaceRequiringVisit('clinical-forms-workspace');
-  const launchConditionsFormWorkspace = useLaunchWorkspaceRequiringVisit('conditions-form-workspace');
-  const launchOrderBasketFormWorkspace = useLaunchWorkspaceRequiringVisit('order-basket');
-  const launchVisitNotesFormWorkspace = useLaunchWorkspaceRequiringVisit('visit-notes-form-workspace');
+  const launchAllergiesFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'patient-allergy-form-workspace');
+  const launchAppointmentsFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'appointments-form-workspace');
+  const launchClinicalFormsWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'clinical-forms-workspace');
+  const launchConditionsFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'conditions-form-workspace');
+  const launchOrderBasketFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
+  const launchVisitNotesFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'visit-notes-form-workspace');
   const launchVitalsAndBiometricsFormWorkspace = useLaunchWorkspaceRequiringVisit(
+    patientUuid,
     'patient-vitals-biometrics-form-workspace',
   );
 

package/src/visit/visits-widget/{current-visit-summary.component.tsx → current-visit-summary.extension.tsx}

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { InlineLoading } from '@carbon/react';
-import { ErrorState, launchWorkspace, useVisit } from '@openmrs/esm-framework';
-import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import VisitSummary from './past-visits-components/visit-summary.component';
 import styles from './current-visit-summary.scss';
 
@@ -10,29 +9,23 @@ interface CurrentVisitSummaryProps {
   patientUuid: string;
 }
 
+/**
+ * This extension is not used in the refapp.
+ * This extension uses the patient chart store and SHOULD only be mounted within the patient chart
+ */
 const CurrentVisitSummary: React.FC<CurrentVisitSummaryProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { isLoading, currentVisit, error, isValidating } = useVisit(patientUuid);
+  const { patientUuid: storePatientUuid, visitContext } = usePatientChartStore(patientUuid);
 
-  if (isLoading) {
-    return (
-      <InlineLoading
-        status="active"
-        iconDescription={t('loading', 'Loading')}
-        description={t('loadingVisit', 'Loading current visit...')}
-      />
-    );
-  }
-
-  if (!!error) {
-    return <ErrorState headerTitle={t('failedToLoadCurrentVisit', 'Failed loading current visit')} error={error} />;
+  if (patientUuid !== storePatientUuid) {
+    return null;
   }
 
-  if (!currentVisit) {
+  if (!visitContext) {
     return (
       <EmptyState
         headerTitle={t('currentVisit', 'Current visit')}
-        displayText={t('noActiveVisitMessage', 'active visit')}
+        displayText={t('activeVisits__lower', 'active visits')}
         launchForm={() =>
           launchWorkspace('start-visit-workspace-form', { openedFrom: 'patient-chart-current-visit-summary' })
         }
@@ -43,10 +36,10 @@ const CurrentVisitSummary: React.FC<CurrentVisitSummaryProps> = ({ patientUuid }
   return (
     <div className={styles.container}>
       <CardHeader title={t('currentVisit', 'Current visit')}>
-        <span>{isValidating ? <InlineLoading /> : null}</span>
+        <span />
       </CardHeader>
       <div className={styles.visitSummaryCard}>
-        <VisitSummary visit={currentVisit} patientUuid={patientUuid} />
+        <VisitSummary visit={visitContext} patientUuid={patientUuid} />
       </div>
     </div>
   );

package/src/visit/visits-widget/current-visit-summary.test.tsx

@@ -1,34 +1,52 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useVisit, getConfig } from '@openmrs/esm-framework';
-import { waitForLoadingToFinish } from 'tools';
-import CurrentVisitSummary from './current-visit-summary.component';
+import { getConfig } from '@openmrs/esm-framework';
+import { mockPatient, waitForLoadingToFinish } from 'tools';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import CurrentVisitSummary from './current-visit-summary.extension';
 
 const mockGetConfig = jest.mocked(getConfig);
-const mockUseVisits = jest.mocked(useVisit);
+const mockUsePatientChartStore = jest.mocked(usePatientChartStore);
+
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  ...jest.requireActual('@openmrs/esm-patient-common-lib'),
+  usePatientChartStore: jest.fn(),
+}));
 
 describe('CurrentVisitSummary', () => {
   test('renders an empty state when there is no active visit', () => {
-    mockUseVisits.mockReturnValueOnce({
-      activeVisit: null,
-      currentVisit: null,
-      currentVisitIsRetrospective: false,
-      error: null,
-      isLoading: false,
-      isValidating: false,
-      mutate: jest.fn(),
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+      setPatient: jest.fn(),
+      setVisitContext: jest.fn(),
     });
-
-    render(<CurrentVisitSummary patientUuid="some-uuid" />);
+    render(<CurrentVisitSummary patientUuid={mockPatient.id} />);
     expect(screen.getByText(/current visit/i)).toBeInTheDocument();
-    expect(screen.getByText('There are no active visit to display for this patient')).toBeInTheDocument();
+    expect(screen.getByText('There are no active visits to display for this patient')).toBeInTheDocument();
+  });
+
+  test('returns null when patientUuid does not match store patientUuid', () => {
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: 'different-patient-id',
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+      setPatient: jest.fn(),
+      setVisitContext: jest.fn(),
+    });
+    render(<CurrentVisitSummary patientUuid={mockPatient.id} />);
+    expect(screen.queryByText(/current visit/i)).not.toBeInTheDocument();
   });
 
-  test('renders a visit summary when for the active visit', async () => {
+  test('renders a visit summary when visit context exists', async () => {
     mockGetConfig.mockResolvedValue({ htmlFormEntryForms: [] });
-    mockUseVisits.mockReturnValueOnce({
-      activeVisit: null,
-      currentVisit: {
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: {
         uuid: 'some-uuid',
         display: 'Visit 1',
         startDatetime: '2021-03-23T10:00:00.000+0300',
@@ -42,15 +60,17 @@ describe('CurrentVisitSummary', () => {
           display: 'Visit Type 1',
         },
         encounters: [],
+        patient: {
+          uuid: mockPatient.id,
+          display: 'Test Patient',
+        },
       },
-      currentVisitIsRetrospective: false,
-      error: null,
-      isLoading: false,
-      isValidating: false,
-      mutate: jest.fn(),
+      mutateVisitContext: null,
+      setPatient: jest.fn(),
+      setVisitContext: jest.fn(),
     });
 
-    render(<CurrentVisitSummary patientUuid="some-uuid" />);
+    render(<CurrentVisitSummary patientUuid={mockPatient.id} />);
 
     await waitForLoadingToFinish();
 

package/src/visit/visits-widget/past-visits-components/encounters-table/encounters-table.component.tsx

@@ -44,6 +44,7 @@ import {
   type HtmlFormEntryForm,
   launchFormEntryOrHtmlForms,
   invalidateVisitAndEncounterData,
+  usePatientChartStore,
 } from '@openmrs/esm-patient-common-lib';
 import { jsonSchemaResourceName } from '../../../../constants';
 import {
@@ -80,7 +81,7 @@ const EncountersTable: React.FC<EncountersTableProps> = ({
   const pageSizes = [10, 20, 30, 40, 50];
   const desktopLayout = isDesktop(useLayoutType());
   const session = useSession();
-  const { mutate: mutateCurrentVisit } = useVisit(patientUuid);
+  const { mutateVisitContext } = usePatientChartStore(patientUuid);
   const { mutate } = useSWRConfig();
   const responsiveSize = desktopLayout ? 'sm' : 'lg';
   const { data: encounterTypes, isLoading: isLoadingEncounterTypes } = useEncounterTypes();
@@ -133,7 +134,7 @@ const EncountersTable: React.FC<EncountersTableProps> = ({
           deleteEncounter(encounterUuid, abortController)
             .then(() => {
               // Update current visit data for critical components
-              mutateCurrentVisit();
+              mutateVisitContext?.();
 
               // Also invalidate visit history and encounter tables since the encounter was deleted
               invalidateVisitAndEncounterData(mutate, patientUuid);
@@ -160,7 +161,7 @@ const EncountersTable: React.FC<EncountersTableProps> = ({
         },
       });
     },
-    [mutate, mutateCurrentVisit, patientUuid, t],
+    [mutate, mutateVisitContext, patientUuid, t],
   );
 
   if (isLoadingEncounterTypes || isLoading) {

package/src/visit/visits-widget/past-visits-components/encounters-table/encounters-table.resource.ts

@@ -8,7 +8,6 @@ import {
   type Encounter,
   type EncounterType,
   type Obs,
-  type OpenmrsResource,
   useOpenmrsFetchAll,
   useOpenmrsPagination,
 } from '@openmrs/esm-framework';

package/src/visit/visits-widget/visit-context/retrospective-data-date-time-picker/retrospective-date-time-picker.component.tsx

@@ -1,10 +1,9 @@
 import { SelectItem, TimePickerSelect, TimePicker, Checkbox } from '@carbon/react';
-import { OpenmrsDatePicker, ResponsiveWrapper, useFeatureFlag, useVisit } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, ResponsiveWrapper, useFeatureFlag, type Visit } from '@openmrs/esm-framework';
 import React, { useEffect, useState } from 'react';
 import { type Control, Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import styles from './restrospective-date-time-picker.scss';
-import { useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
 
 type FormValues = {
   retrospectiveDate: Date;
@@ -13,23 +12,22 @@ type FormValues = {
 };
 
 type RetrospectiveDateTimePickerProps = {
-  patientUuid: string;
+  visitContext: Visit;
   control?: Control<FormValues>;
   onChange?: (data: FormValues) => void;
 };
 
 const RetrospectiveDateTimePicker = ({
-  patientUuid,
+  visitContext,
   control: propControl,
   onChange,
 }: RetrospectiveDateTimePickerProps) => {
   const { t } = useTranslation();
   const isRdeEnabled = useFeatureFlag('rde');
 
-  const { currentVisit } = useVisit(patientUuid);
-  const isActiveVisit = !Boolean(currentVisit && currentVisit.stopDatetime);
-  const maxDate = currentVisit?.stopDatetime;
-  const minDate = currentVisit?.startDatetime;
+  const isActiveVisit = !Boolean(visitContext && visitContext.stopDatetime);
+  const maxDate = visitContext?.stopDatetime;
+  const minDate = visitContext?.startDatetime;
 
   const [manuallyEnableDateTimePicker, setManuallyEnableDateTimePicker] = useState<boolean>(false);
 

package/src/visit/visits-widget/visit-context/{visit-context-header.component.tsx → visit-context-header.extension.tsx}

@@ -1,24 +1,33 @@
-import { Button, Loading } from '@carbon/react';
-import { showModal, useFeatureFlag, useVisit } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import { showModal, useFeatureFlag } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './visit-context-header.scss';
 import VisitContextInfo from './visit-context-info.component';
-import { useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
+import { usePatientChartStore, useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
 
 interface VisitContextHeaderProps {
   patientUuid: string;
 }
 
+/**
+ * The visit context header displays the currently select visit context in the patient chart store.
+ * When creating encounters (ex: visit notes, order entry, vitals), they are associated
+ * with the visit in context.
+ *
+ * This extension uses the patient chart store and should only be shown within the patient chart.
+ * It does not render when mounted outside the patient chart.
+ */
 const VisitContextHeader: React.FC<VisitContextHeaderProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const { systemVisitEnabled } = useSystemVisitSetting();
   const isRdeEnabled = useFeatureFlag('rde');
-  const showVisitContextHeader = systemVisitEnabled && isRdeEnabled;
 
-  const { currentVisit, isLoading } = useVisit(showVisitContextHeader ? patientUuid : null);
-  const isActiveVisit = !Boolean(currentVisit && currentVisit.stopDatetime);
+  const { visitContext } = usePatientChartStore(patientUuid);
+  const isActiveVisit = Boolean(visitContext && !visitContext.stopDatetime);
+
+  const showVisitContextHeader = systemVisitEnabled && isRdeEnabled && visitContext;
 
   const openVisitSwitcherModal = () => {
     const dispose = showModal('visit-context-switcher', {
@@ -31,26 +40,19 @@ const VisitContextHeader: React.FC<VisitContextHeaderProps> = ({ patientUuid })
   if (!showVisitContextHeader) {
     return null;
   }
-  if (isLoading) {
-    return (
-      <div className={styles.visitContextHeader}>
-        <Loading small />
-      </div>
-    );
-  }
   return (
     <div
       className={classNames(styles.visitContextHeader, isActiveVisit ? styles.activeVisit : styles.retroactiveVisit)}
     >
       <div className={styles.addingTo}>{t('addingToVisit', 'Adding to:')}</div>
-      <div className={styles.visitType}>{currentVisit.visitType.display}</div>
+      <div className={styles.visitType}>{visitContext.visitType?.display}</div>
       <div className={styles.changeVisitButton}>
         <Button kind="ghost" size="sm" onClick={openVisitSwitcherModal}>
           {t('change', 'Change')}
         </Button>
       </div>
       <div className={styles.visitInfo}>
-        <VisitContextInfo visit={currentVisit} />
+        <VisitContextInfo visit={visitContext} />
       </div>
     </div>
   );

package/src/visit/visits-widget/visit-context/visit-context-header.test.tsx

@@ -1,51 +1,57 @@
-import { useVisit, useVisitContextStore } from '@openmrs/esm-framework';
-import { useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
+import { usePatientChartStore, useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
 import { render, screen } from '@testing-library/react';
 import { mockCurrentVisit } from '__mocks__';
 import React from 'react';
-import VisitContextHeader from './visit-context-header.component';
+import VisitContextHeader from './visit-context-header.extension';
+import { mockPatient } from 'tools';
 
-const mockUseSystemVisitSetting = jest.fn(useSystemVisitSetting).mockReturnValue({
-  systemVisitEnabled: true,
-  errorFetchingSystemVisitSetting: null,
-  isLoadingSystemVisitSetting: false,
-});
-
-jest.mocked(useVisitContextStore).mockReturnValue({
-  manuallySetVisitUuid: null,
-  mutateVisitCallbacks: {},
-  patientUuid: null,
-  setVisitContext: jest.fn(),
-  mutateVisit: jest.fn(),
-});
-
-jest.mocked(useVisit).mockReturnValue({
-  currentVisit: mockCurrentVisit,
-  error: null,
-  mutate: jest.fn(),
-  isValidating: false,
-  activeVisit: null,
-  currentVisitIsRetrospective: false,
-  isLoading: false,
-});
+const mockUsePatientChartStore = jest.mocked(usePatientChartStore);
+const mockUseSystemVisitSetting = jest.mocked(useSystemVisitSetting);
 
-jest.mock('@openmrs/esm-patient-common-lib/src/useSystemVisitSetting', () => ({
-  useSystemVisitSetting: () => mockUseSystemVisitSetting(),
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  usePatientChartStore: jest.fn(),
+  useSystemVisitSetting: jest.fn(),
 }));
 
 describe('VisitContextHeader', () => {
+  beforeEach(() => {
+    mockUseSystemVisitSetting.mockReturnValue({
+      systemVisitEnabled: true,
+      errorFetchingSystemVisitSetting: null,
+      isLoadingSystemVisitSetting: false,
+    });
+  });
+
   it('should not show header if system does not support visits', () => {
     mockUseSystemVisitSetting.mockReturnValueOnce({
       systemVisitEnabled: false,
       errorFetchingSystemVisitSetting: null,
       isLoadingSystemVisitSetting: false,
     });
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+      setPatient: jest.fn(),
+      setVisitContext: jest.fn(),
+    });
+
     render(<VisitContextHeader patientUuid="some-uuid" />);
     expect(screen.queryByText('Adding to')).not.toBeInTheDocument();
   });
 
   it('should show the current visit', () => {
-    render(<VisitContextHeader patientUuid="some-uuid" />);
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: mockCurrentVisit,
+      mutateVisitContext: null,
+      setPatient: jest.fn(),
+      setVisitContext: jest.fn(),
+    });
+
+    render(<VisitContextHeader patientUuid={mockPatient.id} />);
     expect(screen.getByText(/Adding to/i)).toBeInTheDocument();
     expect(screen.getByText(mockCurrentVisit.visitType.display)).toBeInTheDocument();
   });