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);
},