fix: show go back button after expiry (#13833)

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,

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 () => {

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