feat: improve video conference UI in EventModal

- Replace 'Meeting link generated' text with 'Join Visio conference' button
- Button opens video conference link in new tab when clicked
- Use contained variant styling to match Save button appearance
- Maintain copy and delete functionality for meeting links

src/features/Calendars/CalendarSlice.ts

@@ -121,10 +121,7 @@ export const putEventAsync = createAsyncThunk<
   { calId: string; events: CalendarEvent[]; calType?: "temp" }, // Return type
   { cal: Calendars; newEvent: CalendarEvent; calType?: "temp" } // Arg type
 >("calendars/putEvent", async ({ cal, newEvent, calType }) => {
-  const response = await putEvent(
-    newEvent,
-    cal.ownerEmails ? cal.ownerEmails[0] : undefined
-  );
+  await putEvent(newEvent, cal.ownerEmails ? cal.ownerEmails[0] : undefined);
   const eventDate = new Date(newEvent.start);
 
   const weekStart = new Date(eventDate);
@@ -184,7 +181,7 @@ export const patchCalendarAsync = createAsyncThunk<
     patch: { name: string; desc: string; color: string };
   } // Arg type
 >("calendars/patchCalendar", async ({ calId, calLink, patch }) => {
-  const response = await proppatchCalendar(calLink, patch);
+  await proppatchCalendar(calLink, patch);
   return {
     calId,
     calLink,
@@ -201,7 +198,7 @@ export const removeCalendarAsync = createAsyncThunk<
     calLink: string;
   }
 >("calendars/removeCalendar", async ({ calId, calLink }) => {
-  const response = await removeCalendar(calLink);
+  await removeCalendar(calLink);
   return {
     calId,
     calLink,
@@ -212,7 +209,7 @@ export const moveEventAsync = createAsyncThunk<
   { calId: string; events: CalendarEvent[] }, // Return type
   { cal: Calendars; newEvent: CalendarEvent; newURL: string } // Arg type
 >("calendars/moveEvent", async ({ cal, newEvent, newURL }) => {
-  const response = await moveEvent(newEvent, newURL);
+  await moveEvent(newEvent, newURL);
   const calEvents = (await getCalendar(cal.id, {
     start: formatDateToYYYYMMDDTHHMMSS(new Date(newEvent.start)),
     end: formatDateToYYYYMMDDTHHMMSS(
@@ -239,7 +236,7 @@ export const deleteEventAsync = createAsyncThunk<
   { calId: string; eventId: string }, // Return type
   { calId: string; eventId: string; eventURL: string } // Arg type
 >("calendars/delEvent", async ({ calId, eventId, eventURL }) => {
-  const response = await deleteEvent(eventURL);
+  await deleteEvent(eventURL);
   return { calId, eventId };
 });
 
@@ -255,7 +252,7 @@ export const createCalendarAsync = createAsyncThunk<
   }, // Return type
   { userId: string; calId: string; color: string; name: string; desc: string } // Arg type
 >("calendars/createCalendar", async ({ userId, calId, color, name, desc }) => {
-  const response = await postCalendar(userId, calId, color, name, desc);
+  await postCalendar(userId, calId, color, name, desc);
   const ownerData: any = await getUserDetails(userId.split("/")[0]);
 
   return {
@@ -283,7 +280,7 @@ export const addSharedCalendarAsync = createAsyncThunk<
   }, // Return type
   { userId: string; calId: string; cal: Record<string, any> } // Arg type
 >("calendars/addSharedCalendar", async ({ userId, calId, cal }) => {
-  const response = await addSharedCalendar(userId, calId, cal);
+  await addSharedCalendar(userId, calId, cal);
   const ownerData: any = await getUserDetails(
     cal.cal._links.self.href
       .replace("/calendars/", "")

src/features/Events/EventDisplay.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import {
   deleteEventAsync,
-  getEventAsync,
   moveEventAsync,
   putEventAsync,
   removeEvent,
@@ -9,7 +8,6 @@ import {
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
 import {
-  Popover,
   Button,
   Box,
   Typography,
@@ -41,7 +39,6 @@ import CircleIcon from "@mui/icons-material/Circle";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { userAttendee } from "../User/userDataTypes";
-import { TIMEZONES } from "../../utils/timezone-data";
 import { Calendars } from "../Calendars/CalendarTypes";
 import { CalendarEvent, RepetitionObject } from "./EventsTypes";
 import { isValidUrl } from "../../utils/apiUtils";
@@ -94,7 +91,7 @@ export default function EventDisplayModal({
   const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
   const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
-  const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
+  const [timezone] = useState(event?.timezone ?? "UTC");
   const [newCalId, setNewCalId] = useState(event?.calId);
   const [calendarid, setCalendarid] = useState(
     calId.split("/")[0] === user.userData?.openpaasId

src/features/Events/EventDisplayPreview.tsx

@@ -15,8 +15,6 @@ import {
   CardContent,
   Divider,
   IconButton,
-  Avatar,
-  Badge,
   PopoverPosition,
 } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
@@ -29,18 +27,13 @@ import LocationOnIcon from "@mui/icons-material/LocationOn";
 import VideocamIcon from "@mui/icons-material/Videocam";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import CircleIcon from "@mui/icons-material/Circle";
-import CancelIcon from "@mui/icons-material/Cancel";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { userAttendee } from "../User/userDataTypes";
 import EventDisplayModal, {
   InfoRow,
   renderAttendeeBadge,
-  stringAvatar,
 } from "./EventDisplay";
-import { dlEvent, getEvent } from "./EventApi";
-import { CalendarEvent } from "./EventsTypes";
+import { dlEvent } from "./EventApi";
 import EventDuplication from "../../components/Event/EventDuplicate";
-import { getCalendar } from "../Calendars/CalendarApi";
 
 export default function EventPreviewModal({
   eventId,

src/features/Events/EventModal.tsx

@@ -610,9 +610,18 @@ function EventPopover({
 
           {hasVideoConference && meetingLink && (
             <>
-              <Typography sx={{ color: "text.secondary", mr: 1 }}>
-                Meeting link generated
-              </Typography>
+              <Button
+                startIcon={<VideocamIcon />}
+                onClick={() => window.open(meetingLink, "_blank")}
+                size="medium"
+                variant="contained"
+                sx={{
+                  textTransform: "none",
+                  mr: 1,
+                }}
+              >
+                Join Visio conference
+              </Button>
               <IconButton
                 onClick={handleCopyMeetingLink}
                 size="small"

src/features/User/LoginCallback.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { Callback } from "./oidcAuth";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch } from "../../app/hooks";
 import { push } from "redux-first-history";
 import { getOpenPaasUserDataAsync, setTokens, setUserData } from "./userSlice";
 import { Loading } from "../../components/Loading/Loading";