From df73473c7f65c605d5233d8a47d4f559db24ec3b Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 8 Dec 2022 23:02:44 +0530
Subject: [PATCH] Avoid redirect in cancellation and visit from Bookings list
 (#5928)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/pages/booking/[uid].tsx | 56 +++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index b174822e1a..34829228a4 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -57,26 +57,41 @@ function redirectToExternalUrl(url: string) {
 function RedirectionToast({ url }: { url: string }) {
   const [timeRemaining, setTimeRemaining] = useState(10);
   const [isToastVisible, setIsToastVisible] = useState(true);
-  const parsedSuccessUrl = new URL(document.URL);
-  const parsedExternalUrl = new URL(url);
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  /* @ts-ignore */ //https://stackoverflow.com/questions/49218765/typescript-and-iterator-type-iterableiteratort-is-not-an-array-type
-  for (const [name, value] of parsedExternalUrl.searchParams.entries()) {
-    parsedSuccessUrl.searchParams.set(name, value);
-  }
-
-  const urlWithSuccessParams =
-    parsedExternalUrl.origin +
-    parsedExternalUrl.pathname +
-    "?" +
-    parsedSuccessUrl.searchParams.toString() +
-    parsedExternalUrl.hash;
 
   const { t } = useLocale();
   const timerRef = useRef<number | null>(null);
+  const router = useRouter();
+  const { cancel: isCancellationMode } = querySchema.parse(router.query);
+  const urlWithSuccessParamsRef = useRef<string | null>();
+  if (isCancellationMode && timerRef.current) {
+    setIsToastVisible(false);
+  }
 
   useEffect(() => {
+    if (!isToastVisible && timerRef.current) {
+      window.clearInterval(timerRef.current);
+    }
+  }, [isToastVisible]);
+
+  useEffect(() => {
+    const parsedExternalUrl = new URL(url);
+
+    const parsedSuccessUrl = new URL(document.URL);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    /* @ts-ignore */ //https://stackoverflow.com/questions/49218765/typescript-and-iterator-type-iterableiteratort-is-not-an-array-type
+    for (const [name, value] of parsedExternalUrl.searchParams.entries()) {
+      parsedSuccessUrl.searchParams.set(name, value);
+    }
+
+    const urlWithSuccessParams =
+      parsedExternalUrl.origin +
+      parsedExternalUrl.pathname +
+      "?" +
+      parsedSuccessUrl.searchParams.toString() +
+      parsedExternalUrl.hash;
+    urlWithSuccessParamsRef.current = urlWithSuccessParams;
+
     timerRef.current = window.setInterval(() => {
       if (timeRemaining > 0) {
         setTimeRemaining((timeRemaining) => {
@@ -90,7 +105,7 @@ function RedirectionToast({ url }: { url: string }) {
     return () => {
       window.clearInterval(timerRef.current as number);
     };
-  }, [timeRemaining, urlWithSuccessParams]);
+  }, [timeRemaining, url]);
 
   if (!isToastVisible) {
     return null;
@@ -113,7 +128,9 @@ function RedirectionToast({ url }: { url: string }) {
               <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
                 <button
                   onClick={() => {
-                    redirectToExternalUrl(urlWithSuccessParams);
+                    if (urlWithSuccessParamsRef.current) {
+                      redirectToExternalUrl(urlWithSuccessParamsRef.current);
+                    }
                   }}
                   className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
                   {t("continue")}
@@ -124,7 +141,6 @@ function RedirectionToast({ url }: { url: string }) {
                   type="button"
                   onClick={() => {
                     setIsToastVisible(false);
-                    window.clearInterval(timerRef.current as number);
                   }}
                   className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
                   <Icon.FiX className="h-6 w-6 text-white" />
@@ -349,7 +365,9 @@ export default function Success(props: SuccessProps) {
       <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
       <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
         <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
-          {eventType.successRedirectUrl ? <RedirectionToast url={eventType.successRedirectUrl} /> : null}{" "}
+          {isSuccessBookingPage && !isCancellationMode && eventType.successRedirectUrl ? (
+            <RedirectionToast url={eventType.successRedirectUrl} />
+          ) : null}{" "}
           <div
             className={classNames(
               shouldAlignCentrally ? "text-center" : "",