Fixes cancel appointment buttons

packages/telemed-ehr/app/src/components/AppointmentStatusSwitcher.tsx

@@ -8,7 +8,6 @@ import { getPatchBinary, getStatusFromExtension } from 'ehr-utils';
 import { VisitStatus, STATI } from '../helpers/mappingUtils';
 import { useApiClients } from '../hooks/useAppClients';
 import { getAppointmentStatusChip } from './AppointmentTableRow';
-import { Box } from '@mui/system';
 
 const statuses = STATI;
 
@@ -113,7 +112,7 @@ export default function AppointmentStatusSwitcher({
           }}
         >
           {statuses
-            .filter((status) => status !== 'unknown')
+            .filter((status) => status !== 'unknown' && status !== 'cancelled')
             .map((status) => (
               <MenuItem key={status} value={status}>
                 {getAppointmentStatusChip(status)}

packages/telemed-ehr/app/src/telemed/components/CancelVisitDialog.tsx

@@ -21,7 +21,7 @@ import { telemedCancellationReasons, inPersonCancellationReasons } from '../../t
 
 interface CancelVisitDialogProps {
   onClose: () => void;
-  appointmentType: 'telemed' | 'in-person';
+  appointmentType: 'telemedicine' | 'in-person';
 }
 
 const CancelVisitDialog = ({ onClose, appointmentType }: CancelVisitDialogProps): ReactElement => {
@@ -33,7 +33,8 @@ const CancelVisitDialog = ({ onClose, appointmentType }: CancelVisitDialogProps)
   const { id: appointmentID } = useParams();
   const navigate = useNavigate();
 
-  const cancellationReasons = appointmentType === 'telemed' ? telemedCancellationReasons : inPersonCancellationReasons;
+  const cancellationReasons =
+    appointmentType === 'telemedicine' ? telemedCancellationReasons : inPersonCancellationReasons;
 
   const handleReasonChange = (event: SelectChangeEvent<string>): void => {
     setReason(event.target.value);
@@ -56,7 +57,7 @@ const CancelVisitDialog = ({ onClose, appointmentType }: CancelVisitDialogProps)
     if (!zambdaIntakeClient) throw new Error('Zambda client not found');
     try {
       let response;
-      if (appointmentType === 'telemed') {
+      if (appointmentType === 'telemedicine') {
         console.log('canceling telemed appointment', appointmentID, reason, otherReason);
         response = await cancelTelemedAppointment(zambdaIntakeClient, {
           appointmentID: appointmentID || '',
@@ -76,7 +77,7 @@ const CancelVisitDialog = ({ onClose, appointmentType }: CancelVisitDialogProps)
       console.error('Failed to cancel appointment', error);
     } finally {
       setIsCancelling(false);
-      if (appointmentType === 'telemed') {
+      if (appointmentType === 'telemedicine') {
         navigate('/telemed/appointments');
       } else if (appointmentType === 'in-person') {
         navigate('/in-person/appointments');

packages/telemed-ehr/app/src/telemed/features/appointment/AppointmentSidePanel.tsx

@@ -54,7 +54,7 @@ enum Gender {
 }
 
 interface AppointmentSidePanelProps {
-  appointmentType: 'telemed' | 'in-person';
+  appointmentType: 'telemedicine' | 'in-person';
 }
 
 export const AppointmentSidePanel: FC<AppointmentSidePanelProps> = ({ appointmentType }) => {
@@ -160,7 +160,7 @@ export const AppointmentSidePanel: FC<AppointmentSidePanelProps> = ({ appointmen
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, p: 3, overflow: 'auto' }}>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-            {appointmentType === 'telemed' &&
+            {appointmentType === 'telemedicine' &&
               getAppointmentStatusChip(mapStatusToTelemed(encounter.status, appointment?.status))}
 
             {appointment?.id && (
@@ -179,9 +179,11 @@ export const AppointmentSidePanel: FC<AppointmentSidePanelProps> = ({ appointmen
             )}
           </Box>
 
-          {appointmentType === 'in-person' && (
+          {appointmentType === 'in-person' && isPractitionerAllowedToCancelThisVisit && (
             <AppointmentStatusSwitcher appointment={appointment as Appointment} encounter={encounter} />
           )}
+          {!isPractitionerAllowedToCancelThisVisit &&
+            getAppointmentStatusChip(mapStatusToTelemed(encounter.status, appointment?.status))}
 
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="h4" color="primary.dark">

packages/telemed-ehr/app/src/telemed/pages/AppointmentPage.tsx

@@ -165,7 +165,7 @@ export const AppointmentPage: FC = () => {
       <HearingRelayPopup isOpen={isHearingRelayPopupOpen} onClose={closeHearingRelayPopup} />
 
       <Box sx={{ display: 'flex', flex: 1 }}>
-        <AppointmentSidePanel appointmentType="telemed" />
+        <AppointmentSidePanel appointmentType="telemedicine" />
 
         <Box
           sx={{

packages/telemed-intake/app/env/.env.local-template

@@ -8,7 +8,8 @@ VITE_APP_FHIR_API_URL='https://fhir-api.zapehr.com'
 VITE_APP_PROJECT_API_URL='http://localhost:3000/local'
 VITE_APP_CHECK_IN_ZAMBDA_ID='check-in'
 VITE_APP_CREATE_APPOINTMENT_ZAMBDA_ID='create-appointment'
-VITE_APP_CANCEL_APPOINTMENT_ZAMBDA_ID='cancel-appointment'
+VITE_APP_CANCEL_TELEMED_APPOINTMENT_ZAMBDA_ID=cancel-telemed-appointment
+VITE_APP_CANCEL_IN_PERSON_APPOINTMENT_ZAMBDA_ID=cancel-in-person-appointment
 VITE_APP_GET_PATIENTS_ZAMBDA_ID='get-patients'
 VITE_APP_GET_PROVIDERS_ZAMBDA_ID='get-providers'
 VITE_APP_GET_LOCATIONS_ZAMBDA_ID='get-locations'

packages/telemed-intake/app/src/components/CancelVisitDialog.tsx

@@ -10,7 +10,7 @@ import { useAppointmentStore } from '../features/appointments';
 import { useNavigate } from 'react-router-dom';
 import { IntakeFlowPageRoute } from '../App';
 
-type CancelVisitDialogProps = { onClose: () => void; appointmentType: 'telemed' | 'in-person' };
+type CancelVisitDialogProps = { onClose: () => void; appointmentType: 'telemedicine' | 'in-person' };
 
 export const CancelVisitDialog: FC<CancelVisitDialogProps> = ({ onClose, appointmentType }: CancelVisitDialogProps) => {
   const apiClient = useZapEHRAPIClient();
@@ -29,7 +29,6 @@ export const CancelVisitDialog: FC<CancelVisitDialogProps> = ({ onClose, appoint
       throw new Error('apiClient is not defined');
     }
 
-    navigate(IntakeFlowPageRoute.PatientPortal.path);
     cancelAppointment.mutate(
       {
         apiClient: apiClient,
@@ -47,8 +46,6 @@ export const CancelVisitDialog: FC<CancelVisitDialogProps> = ({ onClose, appoint
         },
       },
     );
-
-    handleClose();
   };
 
   const handleClose = (): void => {

packages/telemed-intake/app/src/features/appointments/appointment.queries.ts

@@ -67,9 +67,9 @@ export const useCancelAppointmentMutation = () =>
       apiClient: ZapEHRAPIClient;
       appointmentID: string;
       cancellationReason: string;
-      appointmentType: 'telemed' | 'in-person';
+      appointmentType: 'telemedicine' | 'in-person';
     }) => {
-      if (appointmentType === 'telemed') {
+      if (appointmentType === 'telemedicine') {
         return apiClient.cancelTelemedAppointment({
           appointmentID,
           cancellationReason,
@@ -101,7 +101,7 @@ export const useGetAppointments = (apiClient: ZapEHRAPIClient | null, enabled =
       onError: (err) => {
         console.error('Error during fetching appointments: ', err);
       },
-      staleTime: 1000 * 60 * 5,
+      refetchOnMount: true,
     },
   );
 

packages/telemed-intake/app/src/pages/PatientPortal.tsx

@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { IntakeFlowPageRoute } from '../App';
 import { otherColors } from '../IntakeThemeProvider';
-import { useGetAppointments } from '../features/appointments';
 import { CustomContainer, useIntakeCommonStore } from '../features/common';
 import HomepageOption from '../features/homepage/HomepageOption';
 import { useZapEHRAPIClient } from '../utils';
 import { requestVisit, pastVisits, contactSupport } from '@theme/icons';
 import { useGetPatients, usePatientsStore } from 'src/features/patients';
+import { useGetAppointments } from 'src/features/appointments';
 
 const PatientPortal = (): JSX.Element => {
   localStorage.removeItem('welcomePath');

packages/telemed-intake/app/src/pages/ThankYou.tsx

@@ -47,7 +47,7 @@ const ThankYou = (): JSX.Element => {
         {isCancelDialogOpen && (
           <CancelVisitDialog
             onClose={() => setIsCancelDialogOpen(false)}
-            appointmentType={visitService as 'in-person' | 'telemed'}
+            appointmentType={visitService as 'in-person' | 'telemedicine'}
           />
         )}
         <Button

packages/telemed-intake/app/src/pages/WaitingRoom.tsx

@@ -158,7 +158,7 @@ const WaitingRoom = (): JSX.Element => {
       {isUploadPhotosDialogOpen ? <UploadPhotosDialog onClose={() => setUploadPhotosDialogOpen(false)} /> : null}
       {isCancelVisitDialogOpen ? (
         <CancelVisitDialog
-          appointmentType={visitService as 'in-person' | 'telemed'}
+          appointmentType={visitService as 'in-person' | 'telemedicine'}
           onClose={() => setCancelVisitDialogOpen(false)}
         />
       ) : null}

packages/telemed-intake/zambdas/src/appointment/cancel-telemed-appointment/index.ts

@@ -142,7 +142,7 @@ async function performEffect(props: PerformEffectInput): Promise<APIGatewayProxy
     patchOperations: encounterPatchOperations,
   });
   const getAppointmentRequest: BatchInputGetRequest = {
-    url: `/Appointment?_id=${appointmentID}&_include=Appointment:patient&_include=Appointment:location`,
+    url: `/Appointment?_id=${appointmentID}&_include=Appointment:patient&_include=Appointment:location&_include=Appointment:practitioner&_include=Appointment:service-type`,
     method: 'GET',
   };
   console.log('making transaction request for getAppointmentRequest, appointmentPatchRequest, encounterPatchRequest');