feat: add functionality for removing any beforeunload listeners once payment form is submitted

src/Hooks/UtilityHooks.res

@@ -62,16 +62,29 @@ let useSendEventsToParent = eventsToSendToParent => {
   })
 }
 
-let useUpdateShouldUseTopRedirection = () => {
-  let setShouldUseTopRedirection = Recoil.useSetRecoilState(RecoilAtoms.shouldUseTopRedirectionAtom)
-  let updateTopRedirectionAtom = paymentOptions => {
+let useUpdateRedirectionFlags = () => {
+  let setRedirectionFlags = Recoil.useSetRecoilState(RecoilAtoms.redirectionFlagsAtom)
+  let updateRedirectionFlagsAtom = paymentOptions => {
     paymentOptions
     ->Dict.get("shouldUseTopRedirection")
     ->Option.flatMap(JSON.Decode.bool)
     ->Option.map(useTop => {
-      setShouldUseTopRedirection(_ => useTop)
+      setRedirectionFlags(cv => {
+        shouldUseTopRedirection: useTop,
+        shouldRemoveBeforeUnloadEvents: cv.shouldRemoveBeforeUnloadEvents,
+      })
+    })
+    ->ignore
+    paymentOptions
+    ->Dict.get("shouldRemoveBeforeUnloadEvents")
+    ->Option.flatMap(JSON.Decode.bool)
+    ->Option.map(removeEvent => {
+      setRedirectionFlags(cv => {
+        shouldUseTopRedirection: cv.shouldUseTopRedirection,
+        shouldRemoveBeforeUnloadEvents: removeEvent,
+      })
     })
     ->ignore
   }
-  updateTopRedirectionAtom
+  updateRedirectionFlagsAtom
 }

src/LoaderController.res

@@ -149,7 +149,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     }
   }
 
-  let updateShouldUseTopRedirection = UtilityHooks.useUpdateShouldUseTopRedirection()
+  let updateRedirectionFlags = UtilityHooks.useUpdateRedirectionFlags()
 
   React.useEffect0(() => {
     messageParentWindow([("iframeMounted", true->JSON.Encode.bool)])
@@ -281,7 +281,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
                 logger.setClientSecret(clientSecret)
 
                 // Update top redirection atom
-                updateShouldUseTopRedirection(paymentOptions)
+                updateRedirectionFlags(paymentOptions)
 
                 switch getThemePromise(paymentOptions) {
                 | Some(promise) =>
@@ -331,7 +331,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
             logger.setClientSecret(clientSecret)
 
             // Update top redirection atom
-            updateShouldUseTopRedirection(paymentOptions)
+            updateRedirectionFlags(paymentOptions)
 
             switch getThemePromise(paymentOptions) {
             | Some(promise) =>

src/Types/RecoilAtomTypes.res

@@ -11,3 +11,33 @@ type paymentToken = {
   paymentToken: string,
   customerId: string,
 }
+
+type redirectionFlags = {
+  shouldUseTopRedirection: bool,
+  shouldRemoveBeforeUnloadEvents: bool,
+}
+
+let decodeRedirectionFlags = (
+  json: JSON.t,
+  defaultRedirectionFlags: redirectionFlags,
+): redirectionFlags => {
+  json
+  ->JSON.Decode.object
+  ->Option.flatMap(obj => {
+    let shouldUseTopRedirection =
+      obj
+      ->Dict.get("shouldUseTopRedirection")
+      ->Option.flatMap(JSON.Decode.bool)
+      ->Option.getOr(defaultRedirectionFlags.shouldUseTopRedirection)
+    let shouldRemoveBeforeUnloadEvents =
+      obj
+      ->Dict.get("shouldRemoveBeforeUnloadEvents")
+      ->Option.flatMap(JSON.Decode.bool)
+      ->Option.getOr(defaultRedirectionFlags.shouldRemoveBeforeUnloadEvents)
+    Some({
+      shouldRemoveBeforeUnloadEvents,
+      shouldUseTopRedirection,
+    })
+  })
+  ->Option.getOr(defaultRedirectionFlags)
+}

src/Utilities/PaymentHelpers.res

@@ -296,7 +296,7 @@ let rec intentCall = (
   ~isPaymentSession=false,
   ~isCallbackUsedVal=?,
   ~componentName="payment",
-  ~shouldUseTopRedirection,
+  ~redirectionFlags,
 ) => {
   open Promise
   let isConfirm = uri->String.includes("/confirm")
@@ -324,7 +324,7 @@ let rec intentCall = (
   )
   let handleOpenUrl = url => {
     if isPaymentSession {
-      Window.replaceRootHref(url, shouldUseTopRedirection)
+      Utils.replaceRootHref(url, redirectionFlags)
     } else {
       openUrl(url)
     }
@@ -451,7 +451,7 @@ let rec intentCall = (
                 ~sdkHandleOneClickConfirmPayment,
                 ~counter=counter + 1,
                 ~componentName,
-                ~shouldUseTopRedirection,
+                ~redirectionFlags,
               )
               ->then(
                 res => {
@@ -881,7 +881,7 @@ let rec intentCall = (
             ~counter=counter + 1,
             ~isPaymentSession,
             ~componentName,
-            ~shouldUseTopRedirection,
+            ~redirectionFlags,
           )
           ->then(
             res => {
@@ -912,7 +912,7 @@ let usePaymentSync = (optLogger: option<HyperLogger.loggerMake>, paymentType: pa
   let keys = Recoil.useRecoilValueFromAtom(keys)
   let isCallbackUsedVal = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCompleteCallbackUsed)
   let customPodUri = Recoil.useRecoilValueFromAtom(customPodUri)
-  let shouldUseTopRedirection = Recoil.useRecoilValueFromAtom(shouldUseTopRedirectionAtom)
+  let redirectionFlags = Recoil.useRecoilValueFromAtom(redirectionFlagsAtom)
   let setIsManualRetryEnabled = Recoil.useSetRecoilState(isManualRetryEnabled)
   (~handleUserError=false, ~confirmParam: ConfirmType.confirmParams, ~iframeId="") => {
     switch keys.clientSecret {
@@ -940,7 +940,7 @@ let usePaymentSync = (optLogger: option<HyperLogger.loggerMake>, paymentType: pa
           ~sdkHandleOneClickConfirmPayment=keys.sdkHandleOneClickConfirmPayment,
           ~counter=0,
           ~isCallbackUsedVal,
-          ~shouldUseTopRedirection,
+          ~redirectionFlags,
         )->ignore
       }
       switch paymentMethodList {
@@ -988,7 +988,7 @@ let usePaymentIntent = (optLogger, paymentType) => {
   let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let keys = Recoil.useRecoilValueFromAtom(keys)
   let isCallbackUsedVal = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCompleteCallbackUsed)
-  let shouldUseTopRedirection = Recoil.useRecoilValueFromAtom(shouldUseTopRedirectionAtom)
+  let redirectionFlags = Recoil.useRecoilValueFromAtom(redirectionFlagsAtom)
 
   let setIsManualRetryEnabled = Recoil.useSetRecoilState(isManualRetryEnabled)
   (
@@ -1088,7 +1088,7 @@ let usePaymentIntent = (optLogger, paymentType) => {
             ~counter=0,
             ~isCallbackUsedVal,
             ~componentName,
-            ~shouldUseTopRedirection,
+            ~redirectionFlags,
           )
           ->then(val => {
             intentCallback(val)
@@ -1174,7 +1174,7 @@ let useCompleteAuthorize = (optLogger: option<HyperLogger.loggerMake>, paymentTy
   let setIsManualRetryEnabled = Recoil.useSetRecoilState(isManualRetryEnabled)
   let url = RescriptReactRouter.useUrl()
   let isCallbackUsedVal = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCompleteCallbackUsed)
-  let shouldUseTopRedirection = Recoil.useRecoilValueFromAtom(shouldUseTopRedirectionAtom)
+  let redirectionFlags = Recoil.useRecoilValueFromAtom(redirectionFlagsAtom)
   let paymentTypeFromUrl =
     CardUtils.getQueryParamsDictforKey(url.search, "componentName")->CardThemeType.getPaymentMode
   (
@@ -1219,7 +1219,7 @@ let useCompleteAuthorize = (optLogger: option<HyperLogger.loggerMake>, paymentTy
           ~sdkHandleOneClickConfirmPayment=keys.sdkHandleOneClickConfirmPayment,
           ~counter=0,
           ~isCallbackUsedVal,
-          ~shouldUseTopRedirection,
+          ~redirectionFlags,
         )->ignore
       }
       switch paymentMethodList {
@@ -1612,7 +1612,7 @@ let paymentIntentForPaymentSession = (
   ~clientSecret,
   ~logger,
   ~customPodUri,
-  ~shouldUseTopRedirection,
+  ~redirectionFlags,
 ) => {
   let confirmParams =
     payload
@@ -1669,7 +1669,7 @@ let paymentIntentForPaymentSession = (
     ~sdkHandleOneClickConfirmPayment=false,
     ~counter=0,
     ~isPaymentSession=true,
-    ~shouldUseTopRedirection,
+    ~redirectionFlags,
   )
 }
 
@@ -2106,9 +2106,7 @@ let usePostSessionTokens = (
   let customPodUri = Recoil.useRecoilValueFromAtom(customPodUri)
   let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let keys = Recoil.useRecoilValueFromAtom(keys)
-  let shouldUseTopRedirection = Recoil.useRecoilValueFromAtom(
-    RecoilAtoms.shouldUseTopRedirectionAtom,
-  )
+  let redirectionFlags = Recoil.useRecoilValueFromAtom(RecoilAtoms.redirectionFlagsAtom)
 
   let setIsManualRetryEnabled = Recoil.useSetRecoilState(isManualRetryEnabled)
   (
@@ -2200,7 +2198,7 @@ let usePostSessionTokens = (
           ~customPodUri,
           ~sdkHandleOneClickConfirmPayment=keys.sdkHandleOneClickConfirmPayment,
           ~counter=0,
-          ~shouldUseTopRedirection,
+          ~redirectionFlags
         )
         ->then(val => {
           intentCallback(val)

src/Utilities/RecoilAtoms.res

@@ -12,7 +12,6 @@ let sessionId = Recoil.atom("sessionId", "")
 let isConfirmBlocked = Recoil.atom("isConfirmBlocked", false)
 let customPodUri = Recoil.atom("customPodUri", "")
 let selectedOptionAtom = Recoil.atom("selectedOption", "")
-let shouldUseTopRedirectionAtom = Recoil.atom("shouldUseTopRedirection", false)
 let paymentTokenAtom = Recoil.atom(
   "paymentToken",
   {
@@ -100,3 +99,9 @@ let areOneClickWalletsRendered = Recoil.atom(
   "areOneClickWalletsBtnRendered",
   defaultAreOneClickWalletsRendered,
 )
+
+let defaultRedirectionFlags: redirectionFlags = {
+  shouldUseTopRedirection: false,
+  shouldRemoveBeforeUnloadEvents: false,
+}
+let redirectionFlagsAtom = Recoil.atom("redirectionFlags", defaultRedirectionFlags)

src/Utilities/Utils.res

@@ -60,6 +60,11 @@ let handleOnConfirmPostMessage = (~targetOrigin="*", ~isOneClick=false) => {
   let message = isOneClick ? "oneClickConfirmTriggered" : "confirmTriggered"
   messageParentWindow([(message, true->JSON.Encode.bool)], ~targetOrigin)
 }
+
+let handleBeforeRedirectPostMessage = (~targetOrigin="*") => {
+  messageTopWindow([("disableBeforeUnloadEventListener", true->JSON.Encode.bool)], ~targetOrigin)
+}
+
 let getOptionString = (dict, key) => {
   dict->Dict.get(key)->Option.flatMap(JSON.Decode.string)
 }
@@ -1457,3 +1462,28 @@ let isDigitLimitExceeded = (val, ~digit) => {
   | None => false
   }
 }
+
+/* Redirect Handling */
+let replaceRootHref = (href: string, redirectionFlags: RecoilAtomTypes.redirectionFlags) => {
+  if redirectionFlags.shouldRemoveBeforeUnloadEvents {
+    handleBeforeRedirectPostMessage()
+  }
+  switch redirectionFlags.shouldUseTopRedirection {
+  | true =>
+    try {
+      setTimeout(() => {
+        Window.Top.Location.replace(href)
+      }, 100)->ignore
+    } catch {
+    | e => {
+        Js.Console.error3(
+          "Failed to redirect root document",
+          e,
+          `Using [window.location.replace] for redirection`,
+        )
+        Window.Location.replace(href)
+      }
+    }
+  | false => Window.Location.replace(href)
+  }
+}

src/Window.res

@@ -203,23 +203,3 @@ let getRootHostName = () =>
     }
   | false => Location.hostname
   }
-
-/* Redirect Handling */
-let replaceRootHref = (href: string, shouldUseTopRedirection: bool) => {
-  switch shouldUseTopRedirection {
-  | true =>
-    try {
-      Top.Location.replace(href)
-    } catch {
-    | e => {
-        Js.Console.error3(
-          "Failed to redirect root document",
-          e,
-          `Using [window.location.replace] for redirection`,
-        )
-        Location.replace(href)
-      }
-    }
-  | false => Location.replace(href)
-  }
-}

src/hyper-loader/Elements.res

@@ -19,7 +19,7 @@ let make = (
   ~logger: option<HyperLogger.loggerMake>,
   ~analyticsMetadata,
   ~customBackendUrl,
-  ~shouldUseTopRedirection,
+  ~redirectionFlags: RecoilAtomTypes.redirectionFlags,
 ) => {
   try {
     let iframeRef = []
@@ -310,15 +310,29 @@ let make = (
       ) => {
         open Promise
 
-        let widgetOptions =
-          [
-            ("clientSecret", clientSecret->JSON.Encode.string),
-            ("appearance", appearance),
-            ("locale", locale),
-            ("loader", loader),
-            ("fonts", fonts),
-            ("shouldUseTopRedirection", shouldUseTopRedirection->JSON.Encode.bool),
-          ]->getJsonFromArrayOfJson
+        let widgetOptions = [
+          ("clientSecret", clientSecret->JSON.Encode.string),
+          ("appearance", appearance),
+          ("locale", locale),
+          ("loader", loader),
+          ("fonts", fonts),
+          (
+            "redirectionFlags",
+            {
+              let dict = Dict.fromArray([
+                (
+                  "shouldUseTopRedirection",
+                  JSON.Encode.bool(redirectionFlags.shouldUseTopRedirection),
+                ),
+                (
+                  "shouldRemoveBeforeUnloadEvents",
+                  JSON.Encode.bool(redirectionFlags.shouldRemoveBeforeUnloadEvents),
+                ),
+              ])
+              JSON.Encode.object(dict)
+            },
+          ),
+        ]->getJsonFromArrayOfJson
         let message = [
           (
             "paymentElementCreate",
@@ -675,7 +689,7 @@ let make = (
             let returnUrl = dict->getString("return_url", "")
             let redirectUrl = `${returnUrl}?payment_intent_client_secret=${clientSecret}&status=${status}`
             if redirect.contents === "always" {
-              Window.replaceRootHref(redirectUrl, shouldUseTopRedirection)
+              Utils.replaceRootHref(redirectUrl, redirectionFlags)
               resolve(JSON.Encode.null)
             } else {
               messageCurrentWindow([
@@ -703,7 +717,7 @@ let make = (
 
               let handleErrorResponse = err => {
                 if redirect.contents === "always" {
-                  Window.replaceRootHref(url, shouldUseTopRedirection)
+                  Utils.replaceRootHref(url, redirectionFlags)
                 }
                 messageCurrentWindow([
                   ("submitSuccessful", false->JSON.Encode.bool),
@@ -764,9 +778,9 @@ let make = (
             ->then(json => json->handleRetrievePaymentResponse)
             ->catch(err => {
               if redirect.contents === "always" {
-                Window.replaceRootHref(
+                Utils.replaceRootHref(
                   redirectUrl->JSON.Decode.string->Option.getOr(""),
-                  shouldUseTopRedirection,
+                  redirectionFlags,
                 )
                 resolve(JSON.Encode.null)
               } else {
@@ -1288,7 +1302,7 @@ let make = (
         setElementIframeRef,
         iframeRef,
         mountPostMessage,
-        ~shouldUseTopRedirection,
+        ~redirectionFlags: RecoilAtomTypes.redirectionFlags,
       )
       savedPaymentElement->Dict.set(componentType, paymentElement)
       paymentElement