diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index bfe7464c1f..398e85ee7d 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -2168,7 +2168,7 @@ "select_time": "Select Time", "select_date": "Select Date", "connecting_you_to_someone": "We are connecting you to someone.", - "please_do_not_close_this_tab": "Please do not close this tab", + "please_do_not_close_this_tab": "Please do not close or refresh this page", "see_all_available_times": "See all available times", "org_team_names_example_1": "e.g. Marketing Team", "org_team_names_example_2": "e.g. Sales Team", diff --git a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx index 6311a039b5..33ce5a1ded 100644 --- a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx +++ b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx @@ -94,7 +94,7 @@ export const RedirectToInstantMeetingModal = ({ ) : (

{t("connecting_you_to_someone")}

-

{t("please_do_not_close_this_tab")}

+

{t("please_do_not_close_this_tab")}

{t("please_schedule_future_call", { seconds: formatTime(timeRemaining), diff --git a/packages/features/bookings/Booker/components/hooks/useBookings.ts b/packages/features/bookings/Booker/components/hooks/useBookings.ts index e21cedb301..e0653cc50b 100644 --- a/packages/features/bookings/Booker/components/hooks/useBookings.ts +++ b/packages/features/bookings/Booker/components/hooks/useBookings.ts @@ -13,6 +13,7 @@ import type { BookerEvent } from "@calcom/features/bookings/types"; import { getFullName } from "@calcom/features/form-builder/utils"; import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect"; import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { localStorage } from "@calcom/lib/webstorage"; import { BookingStatus } from "@calcom/prisma/enums"; import { bookingMetadataSchema } from "@calcom/prisma/zod-utils"; import { trpc } from "@calcom/trpc"; @@ -85,22 +86,63 @@ export interface IUseBookingErrors { } export type UseBookingsReturnType = ReturnType; +const STORAGE_KEY = "instantBookingData"; + +const storeInLocalStorage = ({ + eventTypeId, + expiryTime, + bookingId, +}: { + eventTypeId: number; + expiryTime: Date; + bookingId: number; +}) => { + const value = JSON.stringify({ eventTypeId, expiryTime, bookingId }); + localStorage.setItem(STORAGE_KEY, value); +}; + export const useBookings = ({ event, hashedLink, bookingForm, metadata, teamMemberEmail }: IUseBookings) => { const router = useRouter(); const eventSlug = useBookerStore((state) => state.eventSlug); + const eventTypeId = useBookerStore((state) => state.eventId); + const isInstantMeeting = useBookerStore((state) => state.isInstantMeeting); + const rescheduleUid = useBookerStore((state) => state.rescheduleUid); const bookingData = useBookerStore((state) => state.bookingData); const timeslot = useBookerStore((state) => state.selectedTimeslot); const { t } = useLocale(); const bookingSuccessRedirect = useBookingSuccessRedirect(); const bookerFormErrorRef = useRef(null); + const [instantMeetingTokenExpiryTime, setExpiryTime] = useState(); const [instantVideoMeetingUrl, setInstantVideoMeetingUrl] = useState(); const duration = useBookerStore((state) => state.selectedDuration); const isRescheduling = !!rescheduleUid && !!bookingData; - const bookingId = parseInt(getQueryParam("bookingId") || "0"); + const bookingId = parseInt(getQueryParam("bookingId") ?? "0"); + + useEffect(() => { + if (!isInstantMeeting) return; + + const storedInfo = localStorage.getItem(STORAGE_KEY); + + if (storedInfo) { + const parsedInfo = JSON.parse(storedInfo); + + const parsedInstantBookingInfo = + parsedInfo.eventTypeId === eventTypeId && + isInstantMeeting && + new Date(parsedInfo.expiryTime) > new Date() + ? parsedInfo + : null; + + if (parsedInstantBookingInfo) { + setExpiryTime(parsedInstantBookingInfo.expiryTime); + updateQueryParam("bookingId", parsedInstantBookingInfo.bookingId); + } + } + }, [eventTypeId, isInstantMeeting]); const _instantBooking = trpc.viewer.bookings.getInstantBookingLocation.useQuery( { @@ -239,6 +281,14 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata, teamMemb const createInstantBookingMutation = useMutation({ mutationFn: createInstantBooking, onSuccess: (responseData) => { + if (eventTypeId) { + storeInLocalStorage({ + eventTypeId, + expiryTime: responseData.expires, + bookingId: responseData.bookingId, + }); + } + updateQueryParam("bookingId", responseData.bookingId); setExpiryTime(responseData.expires); },