(feat) re-use upcoming appointment work to mark appointments as Checked In

packages/esm-patient-chart-app/src/constants.ts

@@ -5,3 +5,4 @@ export const spaBasePath = `${window.spaBase}${basePath}`;
 export const moduleName = '@openmrs/esm-patient-chart-app';
 export const patientChartWorkspaceSlot = 'patient-chart-workspace-slot';
 export const patientChartWorkspaceHeaderSlot = 'patient-chart-workspace-header-slot';
+export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';

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

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
-import { openmrsFetch, restBaseUrl, type OpenmrsResource } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl, type OpenmrsResource, useAbortController } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../../constants';
 
 export interface AppointmentPayload {
   patientUuid: string;
@@ -17,13 +18,17 @@ export interface AppointmentPayload {
   dateHonored?: string;
 }
 
-export function saveAppointment(appointment: AppointmentPayload, abortController: AbortController) {
-  return openmrsFetch(`${restBaseUrl}/appointment`, {
+export const updateAppointmentStatus = async (
+  toStatus: string,
+  appointmentUuid: string,
+  abortController: AbortController,
+) => {
+  const statusChangeTime = dayjs().format(omrsDateFormat);
+  const url = `${restBaseUrl}/appointments/${appointmentUuid}/status-change`;
+  return await openmrsFetch(url, {
+    body: { toStatus, onDate: statusChangeTime },
     method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     signal: abortController.signal,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: appointment,
   });
-}
+};

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

@@ -44,7 +44,7 @@ import {
 import { MemoizedRecommendedVisitType } from './recommended-visit-type.component';
 import { type ChartConfig } from '../../config-schema';
 import { saveQueueEntry } from '../hooks/useServiceQueue';
-import { type AppointmentPayload, saveAppointment } from '../hooks/useUpcomingAppointments';
+import { updateAppointmentStatus } from '../hooks/useUpcomingAppointments';
 import { useLocations } from '../hooks/useLocations';
 import { useVisitQueueEntry } from '../queue-entry/queue.resource';
 import BaseVisitType from './base-visit-type.component';
@@ -375,28 +375,16 @@ const StartVisitForm: React.FC<StartVisitFormProps> = ({
                   );
                 }
                 if (config.showUpcomingAppointments && upcomingAppointment) {
-                  const appointmentPayload: AppointmentPayload = {
-                    appointmentKind: upcomingAppointment?.appointmentKind,
-                    serviceUuid: upcomingAppointment?.service.uuid,
-                    startDateTime: upcomingAppointment?.startDateTime,
-                    endDateTime: upcomingAppointment?.endDateTime,
-                    locationUuid: visitLocation?.uuid,
-                    patientUuid: patientUuid,
-                    uuid: upcomingAppointment?.uuid,
-                    dateHonored: dayjs(visitStartDate).format(),
-                  };
-                  saveAppointment(appointmentPayload, abortController).then(
-                    ({ status }) => {
-                      if (status === 201) {
-                        mutateCurrentVisit();
-                        mutateVisits();
-                        showSnackbar({
-                          isLowContrast: true,
-                          kind: 'success',
-                          subtitle: t('appointmentUpdate', 'Upcoming appointment updated successfully'),
-                          title: t('appointmentEdited', 'Appointment edited'),
-                        });
-                      }
+                  updateAppointmentStatus('CheckedIn', upcomingAppointment?.uuid, abortController).then(
+                    () => {
+                      mutateCurrentVisit();
+                      mutateVisits();
+                      showSnackbar({
+                        isLowContrast: true,
+                        kind: 'success',
+                        subtitle: t('appointmentMarkedChecked', 'Appointment marked as Checked In'),
+                        title: t('appointmentCheckedIn', 'Appointment Checked In'),
+                      });
                     },
                     (error) => {
                       showSnackbar({

packages/esm-patient-chart-app/translations/en.json

@@ -5,9 +5,9 @@
   "all": "All",
   "allEncounters": "All encounters",
   "Allergies dashboard": "Allergies dashboard",
-  "appointmentEdited": "Appointment edited",
+  "appointmentCheckedIn": "Appointment checked in",
+  "appointmentMarkedChecked": "Appointment marked as Checked In",
   "Appointments dashboard": "Appointments dashboard",
-  "appointmentUpdate": "Upcoming appointment updated successfully",
   "Attachments dashboard": "Attachments dashboard",
   "cancel": "Cancel",
   "cancelActiveVisitConfirmation": "Are you sure you want to cancel this active visit?",