added join event button to EventDetails page

src/IsaacApiTypesCustom.tsx

@@ -51,6 +51,8 @@ export interface IsaacEventPageDTO extends AutoGeneratedIsaacEventPageDTO {
   // We don't want to use event thumbnail alt text for WCAG compliance (it's a decorative image, and conveys no meaning)
   eventThumbnail?: Omit<ImageDTO, "altText">;
   children?: ContentDTO[];
+  // TEMPORARY UNTIL API CHANGES MADE
+  meetingUrl?: string;
 }
 
 // temporary changes to the MisuseStatisticDTO and AssignmentStatusDTO until typescript generator plugin is correctly giving required properties

src/app/components/pages/EventDetails.tsx

@@ -157,7 +157,7 @@ const EventDetails = ({
                           src={event.eventThumbnail.src}
                           data-testid="event-details-image"
                         />
-                        <div className="border px-2 py-1 mt-3 bg-light" data-testid="event-details-title">
+                        <div className="border px-2 py-1 mt-3 bg-light text-center" data-testid="event-details-title">
                           <strong>{event.title}</strong>
                           {event.isPrivateEvent && (
                             <Row className="mx-0 mt-2">
@@ -167,6 +167,15 @@ const EventDetails = ({
                             </Row>
                           )}
                         </div>
+
+                        {event.userBookingStatus === "CONFIRMED" && event.meetingUrl && (
+                          <a href={event.meetingUrl} className="w-100" target="_blank" rel="noopener noreferrer">
+                            <Button color="primary" className="mt-2 w-100">
+                              Join event now
+                            </Button>
+                          </a>
+                        )}
+
                         {isDefined(event.location) &&
                           isDefined(event.location?.latitude) &&
                           isDefined(event.location?.longitude) && (

src/test/pages/EventDetails.test.tsx

@@ -22,6 +22,7 @@ const eventDate = () => screen.getByTestId("event-date");
 const placesAvailable = () => screen.queryByTestId("event-availability");
 const privateBadge = () => screen.queryByText("Private Event");
 const bookingDeadline = () => screen.queryByTestId("event-booking-deadline");
+const joinEventButton = () => screen.queryByRole("link", { name: "Join event now" });
 
 describe("EventDetails", () => {
   const setupTest = async ({ role, event }: { role: TestUserRole; event: IsaacEventPageDTO }) => {
@@ -253,4 +254,56 @@ describe("EventDetails", () => {
     await setupTest({ role: "STUDENT", event });
     expect(getButton("Leave waiting list")).toBeInTheDocument();
   });
+
+  it("does not offer a 'join event now' button if user is not logged in", async () => {
+    const event = {
+      ...mockEvent,
+      meetingUrl: "https://example-meeting-link.com",
+    };
+    await setupTest({ role: "ANONYMOUS", event });
+    expect(joinEventButton()).toBeNull();
+  });
+
+  it("does not offer a 'join event now' button if user is not booked on the event", async () => {
+    const event = {
+      ...mockEvent,
+      meetingUrl: "https://example-meeting-link.com",
+    };
+    await setupTest({ role: "STUDENT", event });
+    expect(joinEventButton()).toBeNull();
+  });
+
+  it.each(["RESERVED", "CANCELLED", "WAITING_LIST", "ATTENDED", "ABSENT"] as BookingStatus[])(
+    "does not offer a 'join event now' button if user's booking status is %s",
+    async (bookingStatus) => {
+      const event = {
+        ...mockEvent,
+        meetingUrl: "https://example-meeting-link.com",
+        userBookingStatus: bookingStatus,
+      };
+      await setupTest({ role: "STUDENT", event });
+      const joinEventButton = screen.queryByRole("link", { name: "Join event now" });
+      expect(joinEventButton).toBeNull();
+    },
+  );
+
+  it("does not offer a 'join event now' button if a meetingUrl is not provided", async () => {
+    const event = {
+      ...mockEvent,
+      userBookingStatus: "CONFIRMED" as BookingStatus,
+    };
+    await setupTest({ role: "STUDENT", event });
+    expect(joinEventButton()).toBeNull();
+  });
+
+  it("offers a 'join event now' button if a meetingUrl is provided and user's booking status is CONFIRMED", async () => {
+    const event = {
+      ...mockEvent,
+      meetingUrl: "https://example-meeting-link.com",
+      userBookingStatus: "CONFIRMED" as BookingStatus,
+    };
+    await setupTest({ role: "STUDENT", event });
+    expect(joinEventButton()).toBeInTheDocument();
+    expect(joinEventButton()).toHaveAttribute("href", event.meetingUrl);
+  });
 });