From 77a157a12bab689b6c723964bde8d7897f465aa8 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sat, 24 Feb 2024 03:50:46 +0530
Subject: [PATCH] fix: show go back button after expiry (#13833)

---
 packages/features/bookings/Booker/Booker.tsx           |  5 ++---
 .../components/RedirectToInstantMeetingModal.tsx       |  4 ++--
 .../bookings/Booker/components/hooks/useBookings.ts    | 10 +++++-----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 2acb06150c..554613ad94 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -123,7 +123,8 @@ const BookerComponent = ({
 
   const { bookerFormErrorRef, key, formEmail, bookingForm, errors: formErrors } = bookerForm;
 
-  const { handleBookEvent, hasInstantMeetingTokenExpired, errors, loadingStates, expiryTime } = bookings;
+  const { handleBookEvent, errors, loadingStates, expiryTime } = bookings;
+
   const {
     isEmailVerificationModalVisible,
     setEmailVerificationModalVisible,
@@ -180,7 +181,6 @@ const BookerComponent = ({
           />
           <RedirectToInstantMeetingModal
             expiryTime={expiryTime}
-            hasInstantMeetingTokenExpired={hasInstantMeetingTokenExpired}
             bookingId={parseInt(getQueryParam("bookingId") || "0")}
             onGoBack={() => {
               onGoBackInstantMeeting();
@@ -203,7 +203,6 @@ const BookerComponent = ({
     formErrors,
     handleBookEvent,
     handleVerifyEmail,
-    hasInstantMeetingTokenExpired,
     isEmailVerificationModalVisible,
     key,
     loadingStates,
diff --git a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx
index c10cc6eca3..44fc386f91 100644
--- a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx
+++ b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx
@@ -12,18 +12,17 @@ const handleBeforeUnload = (event: BeforeUnloadEvent) => {
 };
 
 export const RedirectToInstantMeetingModal = ({
-  hasInstantMeetingTokenExpired,
   bookingId,
   onGoBack,
   expiryTime,
 }: {
-  hasInstantMeetingTokenExpired: boolean;
   bookingId: number;
   onGoBack: () => void;
   expiryTime?: Date;
 }) => {
   const { t } = useLocale();
   const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
+  const [hasInstantMeetingTokenExpired, setHasInstantMeetingTokenExpired] = useState(false);
 
   function calculateTimeRemaining() {
     const now = dayjs();
@@ -37,6 +36,7 @@ export const RedirectToInstantMeetingModal = ({
 
     const timer = setInterval(() => {
       setTimeRemaining(calculateTimeRemaining());
+      setHasInstantMeetingTokenExpired(expiryTime && new Date(expiryTime) < new Date());
     }, 1000);
 
     return () => {
diff --git a/packages/features/bookings/Booker/components/hooks/useBookings.ts b/packages/features/bookings/Booker/components/hooks/useBookings.ts
index e4daf08bdb..b20b41f544 100644
--- a/packages/features/bookings/Booker/components/hooks/useBookings.ts
+++ b/packages/features/bookings/Booker/components/hooks/useBookings.ts
@@ -56,7 +56,7 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata }: IUseBo
   const { t, i18n } = useLocale();
   const bookingSuccessRedirect = useBookingSuccessRedirect();
   const bookerFormErrorRef = useRef<HTMLDivElement>(null);
-  const [expiryTime, setExpiryTime] = useState<Date | undefined>();
+  const [instantMeetingTokenExpiryTime, setExpiryTime] = useState<Date | undefined>();
   const recurringEventCount = useBookerStore((state) => state.recurringEventCount);
   const isInstantMeeting = useBookerStore((state) => state.isInstantMeeting);
   const duration = useBookerStore((state) => state.selectedDuration);
@@ -66,13 +66,13 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata }: IUseBo
   const isRescheduling = !!rescheduleUid && !!bookingData;
 
   const bookingId = parseInt(getQueryParam("bookingId") || "0");
-  const hasInstantMeetingTokenExpired = expiryTime && new Date(expiryTime) < new Date();
+
   const _instantBooking = trpc.viewer.bookings.getInstantBookingLocation.useQuery(
     {
       bookingId: bookingId,
     },
     {
-      enabled: !!bookingId && !hasInstantMeetingTokenExpired,
+      enabled: !!bookingId,
       refetchInterval: 2000,
       refetchIntervalInBackground: true,
     }
@@ -80,6 +80,7 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata }: IUseBo
   useEffect(
     function refactorMeWithoutEffect() {
       const data = _instantBooking.data;
+
       if (!data) return;
       try {
         showToast(t("something_went_wrong_on_our_end"), "error");
@@ -301,11 +302,10 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata }: IUseBo
 
   return {
     handleBookEvent,
-    expiryTime,
+    expiryTime: instantMeetingTokenExpiryTime,
     bookingForm,
     bookerFormErrorRef,
     errors,
     loadingStates,
-    hasInstantMeetingTokenExpired: Boolean(hasInstantMeetingTokenExpired),
   };
 };