Videochat page updates

packages/telemed-intake/app/src/features/video-call/video-call.queries.ts

@@ -6,6 +6,7 @@ import { PromiseReturnType } from 'ottehr-utils';
 export const useJoinCall = (
   apiClient: ZapEHRAPIClient | null,
   onSuccess: (data: PromiseReturnType<ReturnType<ZapEHRAPIClient['joinCall']>>) => void,
+  setError: (err: Error) => void,
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 ) => {
   return useQuery(
@@ -21,7 +22,8 @@ export const useJoinCall = (
     },
     {
       onSuccess,
-      onError: (err) => {
+      onError: (err: Error) => {
+        setError(err);
         console.error('Error during executing joinCall: ', err);
       },
     },

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

@@ -16,9 +16,9 @@ import { isPaperworkPageComplete } from '../utils/paperworkCompleted';
 
 const ReviewPaperwork = (): JSX.Element => {
   const navigate = useNavigate();
-  const { appointmentID, scheduleType, visitType } = getSelectors(useAppointmentStore, [
+  const { appointmentID, visitService, visitType } = getSelectors(useAppointmentStore, [
     'appointmentID',
-    'scheduleType',
+    'visitService',
     'visitType',
   ]);
   const fileURLs = useFilesStore((state) => state.fileURLs);
@@ -91,7 +91,7 @@ const ReviewPaperwork = (): JSX.Element => {
         onSuccess: async () => {
           usePaperworkStore.setState({ paperworkQuestions: undefined, completedPaperwork: undefined });
           useFilesStore.setState({ fileURLs: undefined });
-          if (scheduleType === 'provider' && visitType === 'now') {
+          if (visitService === 'telemedicine' && visitType === 'now') {
             navigate(`${IntakeFlowPageRoute.WaitingRoom.path}?appointment_id=${appointmentID}`);
           } else {
             navigate(IntakeFlowPageRoute.ThankYou.path);

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { Container } from '@mui/material';
+import { FC, useState } from 'react';
+import { Container, Typography } from '@mui/material';
 import { useSearchParams } from 'react-router-dom';
 import { getSelectors } from 'ottehr-utils';
 import { IntakeFlowPageRoute } from '../App';
@@ -17,6 +17,8 @@ const VideoChatPage: FC = () => {
   const videoCallState = getSelectors(useVideoCallStore, ['meetingData']);
   const meetingManager = useMeetingManager();
 
+  const [error, setError] = useState<Error | null>(null);
+
   const apiClient = useZapEHRAPIClient();
   const [searchParams] = useSearchParams();
   const urlAppointmentID = searchParams.get('appointmentID');
@@ -25,18 +27,32 @@ const VideoChatPage: FC = () => {
     useAppointmentStore.setState(() => ({ appointmentID: urlAppointmentID }));
   }
 
-  useJoinCall(apiClient, async (response) => {
-    useVideoCallStore.setState({ meetingData: response });
+  useJoinCall(
+    apiClient,
+    async (response) => {
+      useVideoCallStore.setState({ meetingData: response });
+
+      const meetingSessionConfiguration = new MeetingSessionConfiguration(response.Meeting, response.Attendee);
+      const options = {
+        deviceLabels: DeviceLabels.AudioAndVideo,
+      };
 
-    const meetingSessionConfiguration = new MeetingSessionConfiguration(response.Meeting, response.Attendee);
-    const options = {
-      deviceLabels: DeviceLabels.AudioAndVideo,
-    };
+      await meetingManager.join(meetingSessionConfiguration, options);
 
-    await meetingManager.join(meetingSessionConfiguration, options);
+      await meetingManager.start();
+    },
+    setError,
+  );
 
-    await meetingManager.start();
-  });
+  if (error) {
+    return (
+      <CustomContainer useEmptyBody title="" bgVariant={IntakeFlowPageRoute.VideoCall.path}>
+        <Typography sx={{ color: 'primary.contrast' }} variant="h6">
+          {error.message}
+        </Typography>
+      </CustomContainer>
+    );
+  }
 
   if (!videoCallState.meetingData) {
     return (

packages/telemed-intake/app/vite.config.ts

@@ -53,6 +53,9 @@ export default (env) => {
         open: 'patient-portal',
       },
       plugins,
+      define: {
+        global: 'window',
+      },
     }),
   );
 };