@openmrs/esm-appointments-app 10.0.2 → 10.0.3-pre.1

package/src/appointments/common-components/appointments-table.component.tsx

@@ -1,19 +1,16 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import isToday from 'dayjs/plugin/isToday';
-import utc from 'dayjs/plugin/utc';
 import {
   Button,
   DataTable,
   DataTableSkeleton,
   Layer,
+  MultiSelect,
   OverflowMenu,
   OverflowMenuItem,
   Pagination,
   Table,
   TableBatchAction,
-  TableBatchActions,
   TableBody,
   TableCell,
   TableContainer,
@@ -33,7 +30,6 @@ import {
 import { Calendar, Download } from '@carbon/react/icons';
 import {
   ConfigurableLink,
-  EmptyCard,
   formatDate,
   formatDatetime,
   isDesktop,
@@ -43,136 +39,126 @@ import {
   launchWorkspace2,
   usePagination,
   showModal,
+  TableBatchActions,
 } from '@openmrs/esm-framework';
 import { exportAppointmentsToSpreadsheet } from '../../helpers/excel';
-import { useTodaysVisits } from '../../hooks/useTodaysVisits';
-import { type Appointment } from '../../types';
+import { AppointmentStatus, type Appointment } from '../../types';
 import { type ConfigObject } from '../../config-schema';
 import { getPageSizes, useAppointmentSearchResults } from '../utils';
-import { launchCreateAppointmentForm } from '../../helpers';
 import AppointmentActions from './appointments-actions.component';
 import AppointmentDetails from '../details/appointment-details.component';
+import { useAppointmentsStore } from '../../store';
+import { useActiveVisits } from '../../hooks/useActiveVisits';
 import styles from './appointments-table.scss';
 
-dayjs.extend(utc);
-dayjs.extend(isToday);
-
 interface AppointmentsTableProps {
   appointments: Array<Appointment>;
   isLoading: boolean;
   tableHeading: string;
-  hasActiveFilters?: boolean;
 }
 
-const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
-  appointments,
-  isLoading,
-  tableHeading,
-  hasActiveFilters,
-}) => {
+const AppointmentsTable: React.FC<AppointmentsTableProps> = ({ appointments, isLoading, tableHeading }) => {
   const { t } = useTranslation();
   const [pageSize, setPageSize] = useState(25);
   const [searchString, setSearchString] = useState('');
+  const { selectedAppointmentStatuses, setSelectedAppointmentStatuses } = useAppointmentsStore();
   const config = useConfig<ConfigObject>();
   const { appointmentsTableColumns } = config;
-  const searchResults = useAppointmentSearchResults(appointments, searchString);
+  const searchResults = useAppointmentSearchResults(appointments, searchString, selectedAppointmentStatuses);
   const { results, goTo, currentPage } = usePagination(searchResults, pageSize);
   const { customPatientChartUrl, patientIdentifierType } = useConfig<ConfigObject>();
-  const { visits } = useTodaysVisits();
   const [selectedAppointmentUuids, setSelectedAppointmentUuids] = useState(new Set<string>());
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const { visits, mutateVisits } = useActiveVisits();
+
+  const activeVisitsByPatientUuid = useMemo(
+    () =>
+      new Map(
+        visits
+          ?.filter((visit) => visit?.startDatetime && !visit?.stopDatetime)
+          .map((visit) => [visit.patient.uuid, visit]),
+      ),
+    [visits],
+  );
 
   useEffect(() => {
     setSelectedAppointmentUuids(new Set());
   }, [appointments]);
 
+  const unsortableColumns = ['actions', 'overflowMenu'];
+
   const headerData = appointmentsTableColumns.map((columnKey) => ({
     header: t(columnKey, columnKey),
     key: columnKey,
   }));
+  headerData.push({ header: '', key: 'overflowMenu' });
 
   const rowData = useMemo(
     () =>
-      results?.map((appointment) => ({
-        id: appointment.uuid,
-        patientName: (
-          <ConfigurableLink
-            className={styles.link}
-            to={customPatientChartUrl}
-            templateParams={{ patientUuid: appointment.patient.uuid }}>
-            {appointment.patient.name}
-          </ConfigurableLink>
-        ),
-        nextAppointmentDate: '--',
-        identifier: patientIdentifierType
-          ? (appointment.patient[patientIdentifierType.replaceAll(' ', '')] ?? appointment.patient.identifier)
-          : appointment.patient.identifier,
-        dateTime: formatDatetime(new Date(appointment.startDateTime)),
-        serviceType: appointment.service.name,
-        location: appointment.location?.name,
-        provider: appointment.providers?.[0]?.name ?? '--',
-        status: <AppointmentActions appointment={appointment} />,
-        appointment,
-      })),
-    [results, customPatientChartUrl, patientIdentifierType],
+      results?.map((appointment) => {
+        return {
+          id: appointment.uuid,
+          patientName: (
+            <ConfigurableLink
+              className={styles.link}
+              to={customPatientChartUrl}
+              templateParams={{ patientUuid: appointment.patient.uuid }}>
+              {appointment.patient.name}
+            </ConfigurableLink>
+          ),
+          nextAppointmentDate: '--',
+          identifier: patientIdentifierType
+            ? (appointment.patient[patientIdentifierType.replaceAll(' ', '')] ?? appointment.patient.identifier)
+            : appointment.patient.identifier,
+          dateTime: formatDatetime(new Date(appointment.startDateTime)),
+          visitStartTime: activeVisitsByPatientUuid.has(appointment.patient.uuid)
+            ? formatDatetime(new Date(activeVisitsByPatientUuid.get(appointment.patient.uuid).startDatetime))
+            : '--',
+          serviceType: appointment.service.name,
+          location: appointment.location?.name,
+          provider: appointment.providers?.[0]?.name ?? '--',
+          status: t(appointment.status),
+          actions: (
+            <div className={styles.actionsCell}>
+              <AppointmentActions
+                appointment={appointment}
+                hasActiveVisit={activeVisitsByPatientUuid.has(appointment.patient.uuid)}
+                mutateVisits={mutateVisits}
+              />
+            </div>
+          ),
+          overflowMenu: (
+            <OverflowMenu align="left" aria-label={t('actions', 'Actions')} flipped size={responsiveSize}>
+              <OverflowMenuItem
+                className={styles.menuItem}
+                itemText={t('editAppointment', 'Edit appointment')}
+                onClick={() =>
+                  launchWorkspace2('appointments-form-workspace', {
+                    patientUuid: appointment.patient.uuid,
+                    appointment: appointment,
+                  })
+                }
+              />
+            </OverflowMenu>
+          ),
+          appointment,
+        };
+      }),
+    [results, customPatientChartUrl, patientIdentifierType, responsiveSize, t, activeVisitsByPatientUuid, mutateVisits],
   );
 
-  const appointmentUuidsWithChangeableStatus = useMemo(() => {
-    return appointments
-      .filter((appointment) => {
-        const visitDate = dayjs(appointment.startDateTime);
-        const isFutureAppointment = visitDate.isAfter(dayjs());
-        const isTodayAppointment = visitDate.isToday();
-        const hasActiveVisitToday = visits?.some(
-          (visit) => visit?.patient?.uuid === appointment.patient?.uuid && visit?.startDatetime,
-        );
-        return isFutureAppointment || (isTodayAppointment && !hasActiveVisitToday);
-      })
-      .map((appointment) => appointment.uuid);
-  }, [appointments, visits]);
-
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" rowCount={5} />;
   }
 
-  if (hasActiveFilters && !appointments?.length) {
-    return (
-      <div className={styles.filterEmptyState}>
-        <Layer level={0}>
-          <Tile className={styles.filterEmptyStateTile}>
-            <p className={styles.filterEmptyStateContent}>
-              {t('noMatchingAppointments', 'No matching appointments found')}
-            </p>
-            <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
-          </Tile>
-        </Layer>
-      </div>
-    );
-  }
-
-  if (!appointments?.length) {
-    const translatedHeading = t(tableHeading);
-    return (
-      <EmptyCard
-        headerTitle={`${translatedHeading} ${t('appointments_lower', 'appointments')}`}
-        displayText={
-          tableHeading === t('todays', "Today's")
-            ? t('appointmentsScheduledForToday', 'appointments scheduled for today')
-            : t('appointments_lower', 'appointments')
-        }
-        launchForm={() => launchCreateAppointmentForm(t)}
-      />
-    );
-  }
-
   return (
     <Layer className={styles.container}>
-      <Tile className={styles.headerContainer}>
+      <div className={styles.headerContainer}>
         <div className={isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading}>
-          <h2>{`${t(tableHeading)} ${t('appointments', 'Appointments')}`}</h2>
+          <h2>{tableHeading}</h2>
         </div>
-      </Tile>
+      </div>
       <DataTable
         aria-label={t('appointmentsTable', 'Appointments table')}
         data-floating-menu-container
@@ -222,6 +208,18 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
                     persistent
                     size={responsiveSize}
                   />
+                  <MultiSelect
+                    id="statusMultiSelect"
+                    size={responsiveSize}
+                    items={Object.values(AppointmentStatus).map((status) => ({ id: status, label: t(status) }))}
+                    itemToString={(item) => (item ? item.label : '')}
+                    label={t('filterAppointmentsByStatus', 'Filter appointments by status')}
+                    onChange={({ selectedItems }) =>
+                      setSelectedAppointmentStatuses([...new Set(selectedItems.map((item) => item.id))])
+                    }
+                    type="inline"
+                    selectedItems={selectedAppointmentStatuses.map((status) => ({ id: status, label: t(status) }))}
+                  />
                   <Button
                     size={responsiveSize}
                     kind="tertiary"
@@ -245,22 +243,20 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
                     <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
                     <TableSelectAll
                       {...getSelectionProps()}
-                      checked={
-                        selectedAppointmentUuids.size === appointmentUuidsWithChangeableStatus.length &&
-                        selectedAppointmentUuids.size > 0
-                      }
+                      checked={selectedAppointmentUuids.size === rows.length && selectedAppointmentUuids.size > 0}
                       onSelect={() => {
-                        if (selectedAppointmentUuids.size < appointmentUuidsWithChangeableStatus.length) {
-                          setSelectedAppointmentUuids(new Set(appointmentUuidsWithChangeableStatus));
+                        if (selectedAppointmentUuids.size < rows.length) {
+                          setSelectedAppointmentUuids(new Set(rows.map((row) => row.id)));
                         } else {
                           setSelectedAppointmentUuids(new Set());
                         }
                       }}
                     />
                     {headers.map((header) => (
-                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                      <TableHeader {...getHeaderProps({ header, isSortable: !unsortableColumns.includes(header.key) })}>
+                        {header.header}
+                      </TableHeader>
                     ))}
-                    <TableHeader aria-label={t('actions', 'Actions')} />
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -271,15 +267,12 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
                       return null;
                     }
 
-                    const canChangeStatus = appointmentUuidsWithChangeableStatus.includes(matchingAppointment.uuid);
-
                     return (
                       <React.Fragment key={row.id}>
                         <TableExpandRow {...getRowProps({ row })}>
                           <TableSelectRow
                             {...getSelectionProps({ row })}
                             checked={selectedAppointmentUuids.has(row.id)}
-                            disabled={!canChangeStatus}
                             onSelect={() => {
                               if (selectedAppointmentUuids.has(row.id)) {
                                 setSelectedAppointmentUuids(
@@ -293,26 +286,6 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
                           {row.cells.map((cell) => (
                             <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                           ))}
-                          <TableCell className="cds--table-column-menu">
-                            {canChangeStatus ? (
-                              <OverflowMenu
-                                align="left"
-                                aria-label={t('actions', 'Actions')}
-                                flipped
-                                size={responsiveSize}>
-                                <OverflowMenuItem
-                                  className={styles.menuItem}
-                                  itemText={t('editAppointment', 'Edit appointment')}
-                                  onClick={() =>
-                                    launchWorkspace2('appointments-form-workspace', {
-                                      patientUuid: matchingAppointment.patient.uuid,
-                                      appointment: matchingAppointment,
-                                    })
-                                  }
-                                />
-                              </OverflowMenu>
-                            ) : null}
-                          </TableCell>
                         </TableExpandRow>
                         {row.isExpanded ? (
                           <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 2}>
@@ -338,24 +311,25 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
                   </Tile>
                 </Layer>
               </div>
-            ) : null}
+            ) : (
+              <Pagination
+                backwardText={t('previousPage', 'Previous page')}
+                forwardText={t('nextPage', 'Next page')}
+                itemsPerPageText={t('itemsPerPage', 'Items per page') + ':'}
+                page={currentPage}
+                pageNumberText={t('pageNumber', 'Page number')}
+                pageSize={pageSize}
+                pageSizes={getPageSizes(appointments, pageSize) ?? []}
+                onChange={({ page, pageSize }) => {
+                  goTo(page);
+                  setPageSize(pageSize);
+                }}
+                totalItems={appointments.length ?? 0}
+              />
+            )}
           </>
         )}
       </DataTable>
-      <Pagination
-        backwardText={t('previousPage', 'Previous page')}
-        forwardText={t('nextPage', 'Next page')}
-        itemsPerPageText={t('itemsPerPage', 'Items per page') + ':'}
-        page={currentPage}
-        pageNumberText={t('pageNumber', 'Page number')}
-        pageSize={pageSize}
-        pageSizes={getPageSizes(appointments, pageSize) ?? []}
-        onChange={({ page, pageSize }) => {
-          goTo(page);
-          setPageSize(pageSize);
-        }}
-        totalItems={appointments.length ?? 0}
-      />
     </Layer>
   );
 };

package/src/appointments/common-components/appointments-table.scss

@@ -20,7 +20,8 @@
 }
 
 .container {
-  border: 1px solid colors.$gray-20;
+  background: colors.$gray-10;
+  padding: layout.$spacing-05;
 
   :global(.cds--table-toolbar) {
     position: relative;
@@ -32,8 +33,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
-  background-color: colors.$white-0;
+  padding: layout.$spacing-04 0;
+  background-color: colors.$gray-10;
 }
 
 .tabletHeading {
@@ -48,7 +49,6 @@
   display: flex;
   justify-content: space-between;
   text-align: left;
-  text-transform: capitalize;
 
   h2 {
     @include type.type-style('heading-compact-02');
@@ -73,7 +73,7 @@
 
 .searchbar {
   input {
-    background-color: colors.$gray-10;
+    background-color: $ui-02 !important;
   }
 }
 
@@ -92,6 +92,11 @@
   max-width: none;
 }
 
+.actionsCell {
+  display: flex;
+  align-items: center;
+}
+
 .content {
   @include type.type-style('heading-compact-02');
   color: $text-02;
@@ -126,7 +131,6 @@
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .headerContainer {
-    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
     svg {
       margin-left: 0;
       margin-right: layout.$spacing-03;

package/src/appointments/common-components/appointments-table.test.tsx

@@ -76,17 +76,14 @@ describe('AppointmentsTable', () => {
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
       customPatientChartUrl: 'url-to-patient-chart',
-      checkInButton: { enabled: false, showIfActiveVisit: false, customUrl: null },
+      checkInButton: { enabled: false, customUrl: null },
       checkOutButton: { enabled: false, customUrl: null },
     });
   });
 
   it('renders an empty state if appointments data is unavailable', async () => {
     renderAppointmentsTable();
-
-    await screen.findByRole('heading', { name: /scheduled appointment/i });
-
-    expect(getByTextWithMarkup('There are no appointments to display')).toBeInTheDocument();
+    expect(getByTextWithMarkup('No appointments to display')).toBeInTheDocument();
   });
 
   it('renders a loading state when fetching data', () => {
@@ -98,7 +95,6 @@ describe('AppointmentsTable', () => {
   it('renders a tabular overview of the scheduled appointments', async () => {
     renderAppointmentsTable({ appointments: mockAppointments });
 
-    await screen.findByRole('heading', { name: /scheduled appointment/i });
     expect(screen.getByRole('search', { name: /filter table/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /download/i })).toBeInTheDocument();
     expect(screen.getByRole('row', { name: /john wilson 100gej hiv clinic outpatient/i })).toBeInTheDocument();
@@ -110,8 +106,6 @@ describe('AppointmentsTable', () => {
     const user = userEvent.setup();
 
     renderAppointmentsTable({ appointments: mockAppointments });
-
-    await screen.findByRole('heading', { name: /scheduled appointment/i });
     const searchInput = screen.getByRole('searchbox');
     await user.type(searchInput, 'John');
     expect(searchInput).toHaveValue('John');
@@ -122,7 +116,6 @@ describe('AppointmentsTable', () => {
 
     renderAppointmentsTable({ appointments: mockAppointments });
 
-    await screen.findByRole('heading', { name: /scheduled appointment/i });
     const downloadButton = screen.getByRole('button', { name: /download/i });
     await user.click(downloadButton);
     expect(downloadButton).toBeInTheDocument();

package/src/appointments/common-components/batch-change-appointment-statuses.modal.tsx

@@ -24,7 +24,7 @@ import { changeAppointmentStatus } from '../../patient-appointments/patient-appo
 import { getActiveVisitsForPatient } from './batch-change-appointment-statuses.resources';
 import { type Appointment, AppointmentStatus } from '../../types';
 import { type ConfigObject } from '../../config-schema';
-import { useMutateAppointments } from '../../form/appointments-form.resource';
+import { useMutateAppointments } from '../../hooks/useMutateAppointments';
 import styles from './batch-change-appointment-statuses.scss';
 
 interface BatchChangeAppointmentStatusesModalProps {

package/src/appointments/common-components/batch-change-appointment-statuses.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { getDefaultsFromConfigSchema, showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
-import { useMutateAppointments } from '../../form/appointments-form.resource';
+import { useMutateAppointments } from '../../hooks/useMutateAppointments';
 import { type Appointment, AppointmentKind, AppointmentStatus } from '../../types';
 import { type ConfigObject, configSchema } from '../../config-schema';
 import BatchChangeAppointmentStatusesModal from './batch-change-appointment-statuses.modal';
@@ -19,14 +19,14 @@ jest.mock('../../patient-appointments/patient-appointments.resource', () => ({
   changeAppointmentStatus: jest.fn(),
 }));
 
-jest.mock('../../form/appointments-form.resource', () => ({
-  useMutateAppointments: jest.fn(),
-}));
-
 jest.mock('./batch-change-appointment-statuses.resources', () => ({
   getActiveVisitsForPatient: jest.fn(),
 }));
 
+jest.mock('../../hooks/useMutateAppointments', () => ({
+  useMutateAppointments: jest.fn(),
+}));
+
 const mockAppointment1: Appointment = {
   uuid: 'appointment-1',
   appointmentNumber: '0001',
@@ -86,11 +86,13 @@ const mockAppointment2: Appointment = {
 describe('BatchChangeAppointmentStatusesModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseMutateAppointments.mockReturnValue({ mutateAppointments: mockMutateAppointments });
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
       checkOutButton: { enabled: true, customUrl: '' },
     });
+    mockUseMutateAppointments.mockReturnValue({
+      mutateAppointments: mockMutateAppointments,
+    });
   });
 
   it('renders the modal with appointment list', () => {

package/src/appointments/common-components/checkin-button.component.tsx

@@ -2,45 +2,76 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type Appointment } from '../../types';
-import dayjs from 'dayjs';
-import isToday from 'dayjs/plugin/isToday';
-import utc from 'dayjs/plugin/utc';
-import { navigate, useConfig, launchWorkspace2 } from '@openmrs/esm-framework';
+import { navigate, useConfig, launchWorkspace2, showSnackbar } from '@openmrs/esm-framework';
+import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
+import { useMutateAppointments } from '../../hooks/useMutateAppointments';
 import { type ConfigObject } from '../../config-schema';
-dayjs.extend(utc);
-dayjs.extend(isToday);
 
 interface CheckInButtonProps {
   patientUuid: string;
   appointment: Appointment;
+  hasActiveVisit?: boolean;
+  mutateVisits: () => void;
 }
 
-const CheckInButton: React.FC<CheckInButtonProps> = ({ appointment, patientUuid }) => {
+const CheckInButton: React.FC<CheckInButtonProps> = ({ appointment, patientUuid, hasActiveVisit, mutateVisits }) => {
   const { checkInButton } = useConfig<ConfigObject>();
   const { t } = useTranslation();
+  const { mutateAppointments } = useMutateAppointments();
+
   return (
-    <>
-      {checkInButton.enabled &&
-        (dayjs(appointment.startDateTime).isAfter(dayjs()) || dayjs(appointment.startDateTime).isToday()) && (
-          <Button
-            size="sm"
-            kind="tertiary"
-            onClick={() =>
-              checkInButton.customUrl
-                ? navigate({
-                    to: checkInButton.customUrl,
-                    templateParams: { patientUuid: appointment.patient.uuid, appointmentUuid: appointment.uuid },
-                  })
-                : launchWorkspace2('appointments-start-visit-workspace', {
-                    patientUuid: patientUuid,
-                    showPatientHeader: true,
-                    openedFrom: 'appointments-check-in',
-                  })
-            }>
-            {t('checkIn', 'Check in')}
-          </Button>
-        )}
-    </>
+    <Button
+      size="sm"
+      kind="tertiary"
+      onClick={() => {
+        // customUrl always takes priority — operator-configured override for entire check-in flow
+        if (checkInButton.customUrl) {
+          navigate({
+            to: checkInButton.customUrl,
+            templateParams: { patientUuid: appointment.patient.uuid, appointmentUuid: appointment.uuid },
+          });
+          return;
+        }
+
+        // Patient already has an active visit — only update appointment status, do not start a new visit
+        if (hasActiveVisit) {
+          changeAppointmentStatus('CheckedIn', appointment.uuid)
+            .then(() => {
+              showSnackbar({
+                title: t('checkedIn', 'Checked in'),
+                subtitle: t(
+                  'appointmentCheckedInWithExistingVisit',
+                  'Appointment checked in using existing active visit',
+                ),
+                kind: 'success',
+                isLowContrast: true,
+              });
+              mutateAppointments?.();
+            })
+            .catch((error) => {
+              console.error('Check-in failed:', error);
+              showSnackbar({
+                title: t('checkInFailed', 'Check-in failed'),
+                subtitle:
+                  error?.message ??
+                  t('appointmentCheckInFailed', 'An error occurred while checking in the appointment'),
+                kind: 'error',
+                isLowContrast: false,
+              });
+            });
+          return;
+        }
+
+        // No active visit, no customUrl — launch default start visit workspace
+        launchWorkspace2('appointments-start-visit-workspace', {
+          patientUuid,
+          showPatientHeader: true,
+          openedFrom: 'appointments-check-in',
+          onVisitStarted: mutateVisits,
+        });
+      }}>
+      {t('checkIn', 'Check in')}
+    </Button>
   );
 };
 

package/src/appointments/common-components/end-appointment.modal.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
-import { useMutateAppointments } from '../../form/appointments-form.resource';
+import { useMutateAppointments } from '../../hooks/useMutateAppointments';
 
 interface EndAppointmentModalProps {
   patientUuid: string;

package/src/appointments/common-components/end-appointment.test.tsx

@@ -20,7 +20,7 @@ jest.mock('../../patient-appointments/patient-appointments.resource', () => ({
   changeAppointmentStatus: jest.fn().mockResolvedValue({}),
 }));
 
-jest.mock('../../form/appointments-form.resource', () => ({
+jest.mock('../../hooks/useMutateAppointments', () => ({
   useMutateAppointments: jest.fn().mockReturnValue({ mutateAppointments: jest.fn() }),
 }));