contacts and meeting details pages now show joinUrl in a popup window

src/components/contacts/contacts-components/body-components/UpperBody.tsx

@@ -1,5 +1,14 @@
-import { Box, Button, IconButton, Typography } from "@mui/material";
+import {
-import React from "react";
+  Box,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import React, { useState } from "react";
 import PhoneIcon from "@mui/icons-material/Phone";
 import AddIcon from "@mui/icons-material/Add";
 import UserLite from "../../../../api-bodies/UserLite";
@@ -26,6 +35,7 @@ interface Props {
 
 const UpperBody: React.FC<Props> = ({ contactInfo }) => {
   const dispatch = useAppDispatch();
+  const [dialog, setDialog] = useState({ open: false, url: "" });
   const userStatus: UserStatus = useAppSelector((state) =>
     selectUserStatus(state, contactInfo.uuid)
   );
@@ -54,7 +64,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
         `/users/${me}/meetings`,
         JSON.stringify(newMeeting)
       );
-      window.open(response.data.joinUrl, "_blank")?.focus();
+      setDialog({ open: true, url: response.data.joinUrl });
     } catch (e) {
       console.log(e);
     }
@@ -141,6 +151,17 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           ) : null}
         </Box>
       </Box>
+      <Dialog
+        open={dialog.open}
+        onClose={() => {
+          setDialog({ open: false, url: "" });
+        }}
+      >
+        <DialogTitle>Join</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{dialog.url}</DialogContentText>
+        </DialogContent>
+      </Dialog>
     </Box>
   );
 };

src/components/meeting-details/meeting-details-components/Header.tsx

@@ -1,5 +1,15 @@
-import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material";
+import {
-import React from "react";
+  AppBar,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import React, { useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import { useAppDispatch } from "../../../redux/hooks";
 import { close } from "../../../redux/slices/meetingDetailsOpenSlice";
@@ -11,6 +21,7 @@ interface Props {
 
 const Header: React.FC<Props> = ({ meeting }) => {
   const dispatch = useAppDispatch();
+  const [dialog, setDialog] = useState({ open: false, url: "" });
 
   return (
     <AppBar sx={{ position: "relative" }}>
@@ -22,7 +33,7 @@ const Header: React.FC<Props> = ({ meeting }) => {
           variant="contained"
           color="secondary"
           onClick={() => {
-            window.open(meeting.joinUrl, "_blank")?.focus();
+            setDialog({ open: true, url: meeting.joinUrl });
           }}
         >
           Join
@@ -37,6 +48,17 @@ const Header: React.FC<Props> = ({ meeting }) => {
           <CloseIcon />
         </IconButton>
       </Toolbar>
+      <Dialog
+        open={dialog.open}
+        onClose={() => {
+          setDialog({ open: false, url: "" });
+        }}
+      >
+        <DialogTitle>Join</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{dialog.url}</DialogContentText>
+        </DialogContent>
+      </Dialog>
     </AppBar>
   );
 };