(Very annoying) Guest doesn't see updated meeting link on booking page

[RayBB]

Found a bug? Please fill out the sections below. 👍

Issue Summary

When you change the link of a meeting the meeting page still shows attendees link.

Steps to Reproduce

1. Set a custom link.

2. Someone books a meeting
3. You add the actual link to the booked meeting and click update

4. The guest visits the booking page and sees the wrong link

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

This is a bug because even if the actual meeting link is in the cal invite people for some reason open the booking page often and they see the wrong meeting link.

Actual Results

• Ivitee sees the wrong link

Expected Results

• They see the new updated link

Technical details

• I'm using the latest hosted version

Evidence

• How was this tested? Steps to reproduce make it pretty clear but I could add a video if anyone else is having trouble with this.

[dosubot]

Hey there, @RayBB! I'm here to help you with any bugs, questions, or contributions you may have. Let's tackle this issue together!

To ensure that the updated meeting link is displayed correctly on the booking page for attendees, you need to update the BookingReference table with the new meeting URL and password from the DailyEventReference table. The provided SQL script accomplishes this:

UPDATE "BookingReference"
SET "meetingUrl" = "dailyurl", "meetingPassword" = "dailytoken"
FROM "DailyEventReference"
WHERE "DailyEventReference"."bookingId" = "BookingReference"."bookingId" AND "BookingReference"."type" = 'daily_video'

Additionally, ensure that the addVideoCallDataToEvent function is used to update the event object with the video call data from the booking references. This function finds the video call reference and updates the event object accordingly:

export const addVideoCallDataToEvent = (bookingReferences: BookingReference[], evt: CalendarEvent) => {
  const videoCallReference = bookingReferences.find((reference) => reference.type.includes("_video"));

  if (videoCallReference) {
    evt.videoCallData = {
      type: videoCallReference.type,
      id: videoCallReference.meetingId,
      password: videoCallReference?.meetingPassword,
      url: videoCallReference.meetingUrl,
    };
  }

  return evt;
};

By using this function, you ensure that the event object is updated with the correct video call data, which will be displayed on the booking page for attendees ^[1][2][3][4].

There is also a caching mechanism in place that might cause the old meeting link to be displayed on the booking page even after it has been updated. The useQuery hook from trpc.viewer.bookings.getInstantBookingLocation is used with a refetchInterval of 2000 milliseconds (2 seconds) and refetchIntervalInBackground set to true. This means the data is periodically refetched, but there could be a delay in updating the displayed link if the new data has not yet been fetched ^[5].

Additionally, there are event listeners or hooks that trigger updates to the booking page when a meeting link is changed. Specifically, the useEffect hook is used to update the instantVideoMeetingUrl state when the meeting link changes:

useEffect(
  function refactorMeWithoutEffect() {
    const data = _instantBooking.data;

    if (!data) return;
    try {
      const locationVideoCallUrl: string | undefined = bookingMetadataSchema.parse(
        data.booking?.metadata || {}
      )?.videoCallUrl;

      if (locationVideoCallUrl) {
        setInstantVideoMeetingUrl(locationVideoCallUrl);
      } else {
        showToast(t("something_went_wrong_on_our_end"), "error");
      }
    } catch (err) {
      showToast(t("something_went_wrong_on_our_end"), "error");
    }
  },
  [_instantBooking.data]
);

These hooks ensure that the booking page is updated whenever the meeting link changes ^{[5][6][2][7][8]}.

To continue talking to Dosu, mention @dosu.