From df6ae054eeea49cb519b7f37c67cb3d374f933e1 Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Sat, 18 May 2024 00:50:47 +0530
Subject: [PATCH 1/5] feat: 3DS netcetra Part B

---
 src/Components/Modal.res         |   8 +-
 src/ThreeDSAuth.res              | 135 ++++++++++++++++++++++---------
 src/ThreeDSMethod.res            |   1 +
 src/Utilities/PaymentHelpers.res |   4 +
 4 files changed, 108 insertions(+), 40 deletions(-)

diff --git a/src/Components/Modal.res b/src/Components/Modal.res
index ae38c39b0..1fd319440 100644
--- a/src/Components/Modal.res
+++ b/src/Components/Modal.res
@@ -18,11 +18,11 @@ let make = (
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let closeModal = () => {
     setOpenModal(_ => false)
+    switch closeCallback {
+    | Some(fn) => fn()
+    | None => ()
+    }
     setTimeout(() => {
-      switch closeCallback {
-      | Some(fn) => fn()
-      | None => ()
-      }
       Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
     }, 450)->ignore
   }
diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
index b9903c789..a8efcbf89 100644
--- a/src/ThreeDSAuth.res
+++ b/src/ThreeDSAuth.res
@@ -5,8 +5,22 @@ let make = () => {
   let (openModal, setOpenModal) = React.useState(_ => false)
   let (loader, setloader) = React.useState(_ => true)
 
+  let threeDsAuthoriseUrl = React.useRef("")
+  let (expiryTime, setExpiryTime) = React.useState(_ => 600000.0)
+
   let logger = OrcaLogger.make(~source=Elements(Payment), ())
 
+  let handleFrictionLess = () => {
+    let ele = Window.querySelector("#threeDsAuthDiv")
+    switch ele->Nullable.toOption {
+    | Some(elem) => {
+        let form1 = elem->makeForm(threeDsAuthoriseUrl.current, "3dsFrictionLess")
+        form1.submit()
+      }
+    | None => ()
+    }
+  }
+
   React.useEffect0(() => {
     handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
     let handle = (ev: Window.event) => {
@@ -24,7 +38,7 @@ let make = () => {
           ->getJsonObjectFromDict("headers")
           ->JSON.Decode.object
           ->Option.getOr(Dict.make())
-        let threeDsAuthoriseUrl =
+        threeDsAuthoriseUrl.current =
           metaDataDict
           ->getJsonObjectFromDict("threeDSData")
           ->JSON.Decode.object
@@ -48,38 +62,47 @@ let make = () => {
         )
         ->then(json => {
           let dict = json->JSON.Decode.object->Option.getOr(Dict.make())
-          let creq = dict->getString("challenge_request", "")
-          let transStatus = dict->getString("trans_status", "Y")
-          let acsUrl = dict->getString("acs_url", "")
+          if dict->Dict.get("error")->Option.isSome {
+            let errorObj = PaymentError.itemToObjMapper(dict)
+            handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+            postFailedSubmitResponse(
+              ~errortype=errorObj.error.type_,
+              ~message=errorObj.error.message,
+            )
+            JSON.Encode.null->resolve
+          } else {
+            let creq = dict->getString("challenge_request", "")
+            let transStatus = dict->getString("trans_status", "Y")
+            let acsUrl = dict->getString("acs_url", "")
 
-          let ele = Window.querySelector("#threeDsAuthDiv")
+            let ele = Window.querySelector("#threeDsAuthDiv")
 
-          LoggerUtils.handleLogging(
-            ~optLogger=Some(logger),
-            ~eventName=DISPLAY_THREE_DS_SDK,
-            ~value=transStatus,
-            ~paymentMethod="CARD",
-            (),
-          )
+            LoggerUtils.handleLogging(
+              ~optLogger=Some(logger),
+              ~eventName=DISPLAY_THREE_DS_SDK,
+              ~value=transStatus,
+              ~paymentMethod="CARD",
+              (),
+            )
 
-          switch ele->Nullable.toOption {
-          | Some(elem) =>
-            if transStatus === "C" {
-              setloader(_ => false)
-              let form = elem->makeForm(acsUrl, "3dsChallenge")
-              let input = Types.createElement("input")
-              input.name = "creq"
-              input.value = creq
-              form.target = "threeDsAuthFrame"
-              form.appendChild(input)
-              form.submit()
-            } else {
-              let form1 = elem->makeForm(threeDsAuthoriseUrl, "3dsFrictionLess")
-              form1.submit()
+            switch ele->Nullable.toOption {
+            | Some(elem) =>
+              if transStatus === "C" {
+                setloader(_ => false)
+                let form = elem->makeForm(acsUrl, "3dsChallenge")
+                let input = Types.createElement("input")
+                input.name = "creq"
+                input.value = creq
+                form.target = "threeDsAuthFrame"
+                form.appendChild(input)
+                form.submit()
+              } else {
+                handleFrictionLess()
+              }
+            | None => ()
             }
-          | None => ()
+            resolve(json)
           }
-          resolve(json)
         })
         ->catch(err => {
           let exceptionMessage = err->formatException
@@ -91,6 +114,8 @@ let make = () => {
             ~logType=ERROR,
             (),
           )
+          let errorObj = PaymentError.itemToObjMapper(dict)
+          postFailedSubmitResponse(~errortype=errorObj.error.type_, ~message=errorObj.error.message)
           JSON.Encode.null->resolve
         })
         ->ignore
@@ -100,12 +125,50 @@ let make = () => {
     Some(() => {Window.removeEventListener("message", handle)})
   })
 
-  <Modal loader={loader} showClose=false openModal setOpenModal>
-    <div className="backdrop-blur-xl">
-      <div id="threeDsAuthDiv" className="hidden" />
-      <iframe
-        id="threeDsAuthFrame" name="threeDsAuthFrame" style={minHeight: "500px"} width="100%"
-      />
-    </div>
-  </Modal>
+  React.useEffect(() => {
+    if expiryTime < 1000.0 {
+      handleFrictionLess()
+    }
+    let intervalID = setInterval(() => {
+      setExpiryTime(prev => prev -. 1000.0)
+    }, 1000)
+    Some(
+      () => {
+        clearInterval(intervalID)
+      },
+    )
+  }, [expiryTime])
+
+  let expiryString = React.useMemo(() => {
+    let minutes = (expiryTime /. 60000.0)->Belt.Float.toInt->Belt.Int.toString
+
+    let seconds =
+      mod(expiryTime->Belt.Float.toInt, 60000)->Belt.Int.toString->String.slice(~start=0, ~end=-3)
+    Console.log(mod(expiryTime->Belt.Float.toInt, 60000))
+    let secondsString =
+      seconds->String.length == 1 ? `0${seconds}` : seconds->String.length == 0 ? "00" : seconds
+    `${minutes}:${secondsString}`
+  }, [expiryTime])
+  <>
+    <RenderIf condition={loader}>
+      <PaymentLoader />
+    </RenderIf>
+    <Modal loader={loader} showClose=true openModal setOpenModal closeCallback={handleFrictionLess}>
+      <div className="backdrop-blur-xl">
+        <div
+          className="flex flex-row w-full justify-center items-start font-medium text-2xl mb-2 font-semibold text-[#151A1F] opacity-50">
+          {expiryString->React.string}
+        </div>
+        <div className="w-full font-medium text-xs text-[#151A1F] opacity-50 mb-2">
+          {React.string(
+            " Please complete the payment within next 10 minutes, after which you will be automatically redirected. ",
+          )}
+        </div>
+        <div id="threeDsAuthDiv" className="hidden" />
+        <iframe
+          id="threeDsAuthFrame" name="threeDsAuthFrame" style={minHeight: "500px"} width="100%"
+        />
+      </div>
+    </Modal>
+  </>
 }
diff --git a/src/ThreeDSMethod.res b/src/ThreeDSMethod.res
index 62874dfe4..82f9dae3e 100644
--- a/src/ThreeDSMethod.res
+++ b/src/ThreeDSMethod.res
@@ -106,6 +106,7 @@ let make = () => {
   })
 
   <>
+    <PaymentLoader />
     <div id="threeDsInvisibleDiv" className="hidden" />
     <iframe
       id="threeDsInvisibleIframe"
diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
index b9f0b2259..63f9d4012 100644
--- a/src/Utilities/PaymentHelpers.res
+++ b/src/Utilities/PaymentHelpers.res
@@ -121,6 +121,10 @@ let threeDsAuth = (~clientSecret, ~optLogger, ~threeDsMethodComp, ~headers) => {
           ~logCategory=API,
           (),
         )
+        let dict = data->getDictFromJson
+        let errorObj = PaymentError.itemToObjMapper(dict)
+        closePaymentLoaderIfAny()
+        postFailedSubmitResponse(~errortype=errorObj.error.type_, ~message=errorObj.error.message)
         JSON.Encode.null->resolve
       })
     } else {

From c94fe96756553bf0826169873eb3a7b9d0ba1b7f Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Sat, 18 May 2024 01:20:55 +0530
Subject: [PATCH 2/5] fix: small changes

---
 src/Components/Modal.res | 7 +++----
 src/ThreeDSAuth.res      | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Components/Modal.res b/src/Components/Modal.res
index 1fd319440..7cc38c4ae 100644
--- a/src/Components/Modal.res
+++ b/src/Components/Modal.res
@@ -20,11 +20,10 @@ let make = (
     setOpenModal(_ => false)
     switch closeCallback {
     | Some(fn) => fn()
-    | None => ()
+    | None => setTimeout(() => {
+        Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+      }, 450)->ignore
     }
-    setTimeout(() => {
-      Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
-    }, 450)->ignore
   }
 
   React.useEffect(() => {
diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
index a8efcbf89..e45f70791 100644
--- a/src/ThreeDSAuth.res
+++ b/src/ThreeDSAuth.res
@@ -153,7 +153,7 @@ let make = () => {
     <RenderIf condition={loader}>
       <PaymentLoader />
     </RenderIf>
-    <Modal loader={loader} showClose=true openModal setOpenModal closeCallback={handleFrictionLess}>
+    <Modal loader={loader} openModal setOpenModal closeCallback={handleFrictionLess}>
       <div className="backdrop-blur-xl">
         <div
           className="flex flex-row w-full justify-center items-start font-medium text-2xl mb-2 font-semibold text-[#151A1F] opacity-50">

From ed9734662f676716744c424492a32cf225b23525 Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Sat, 18 May 2024 01:22:12 +0530
Subject: [PATCH 3/5] fix: removed logs

---
 src/ThreeDSAuth.res | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
index e45f70791..86d1191e0 100644
--- a/src/ThreeDSAuth.res
+++ b/src/ThreeDSAuth.res
@@ -141,10 +141,8 @@ let make = () => {
 
   let expiryString = React.useMemo(() => {
     let minutes = (expiryTime /. 60000.0)->Belt.Float.toInt->Belt.Int.toString
-
     let seconds =
       mod(expiryTime->Belt.Float.toInt, 60000)->Belt.Int.toString->String.slice(~start=0, ~end=-3)
-    Console.log(mod(expiryTime->Belt.Float.toInt, 60000))
     let secondsString =
       seconds->String.length == 1 ? `0${seconds}` : seconds->String.length == 0 ? "00" : seconds
     `${minutes}:${secondsString}`

From 53e482c54e2341afbdf607d0e46697e4438c283b Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Mon, 20 May 2024 13:30:44 +0530
Subject: [PATCH 4/5] fix: removed loaders and timer

---
 src/ThreeDSAuth.res          | 40 ++++++++----------------------------
 src/ThreeDSMethod.res        |  1 -
 src/orca-loader/Elements.res |  5 -----
 3 files changed, 9 insertions(+), 37 deletions(-)

diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
index 86d1191e0..2961125a2 100644
--- a/src/ThreeDSAuth.res
+++ b/src/ThreeDSAuth.res
@@ -6,7 +6,7 @@ let make = () => {
   let (loader, setloader) = React.useState(_ => true)
 
   let threeDsAuthoriseUrl = React.useRef("")
-  let (expiryTime, setExpiryTime) = React.useState(_ => 600000.0)
+  let (expiryTime, setExpiryTime) = React.useState(_ => 60000.0)
 
   let logger = OrcaLogger.make(~source=Elements(Payment), ())
 
@@ -139,34 +139,12 @@ let make = () => {
     )
   }, [expiryTime])
 
-  let expiryString = React.useMemo(() => {
-    let minutes = (expiryTime /. 60000.0)->Belt.Float.toInt->Belt.Int.toString
-    let seconds =
-      mod(expiryTime->Belt.Float.toInt, 60000)->Belt.Int.toString->String.slice(~start=0, ~end=-3)
-    let secondsString =
-      seconds->String.length == 1 ? `0${seconds}` : seconds->String.length == 0 ? "00" : seconds
-    `${minutes}:${secondsString}`
-  }, [expiryTime])
-  <>
-    <RenderIf condition={loader}>
-      <PaymentLoader />
-    </RenderIf>
-    <Modal loader={loader} openModal setOpenModal closeCallback={handleFrictionLess}>
-      <div className="backdrop-blur-xl">
-        <div
-          className="flex flex-row w-full justify-center items-start font-medium text-2xl mb-2 font-semibold text-[#151A1F] opacity-50">
-          {expiryString->React.string}
-        </div>
-        <div className="w-full font-medium text-xs text-[#151A1F] opacity-50 mb-2">
-          {React.string(
-            " Please complete the payment within next 10 minutes, after which you will be automatically redirected. ",
-          )}
-        </div>
-        <div id="threeDsAuthDiv" className="hidden" />
-        <iframe
-          id="threeDsAuthFrame" name="threeDsAuthFrame" style={minHeight: "500px"} width="100%"
-        />
-      </div>
-    </Modal>
-  </>
+  <Modal loader={loader} openModal setOpenModal closeCallback={handleFrictionLess}>
+    <div className="backdrop-blur-xl">
+      <div id="threeDsAuthDiv" className="hidden" />
+      <iframe
+        id="threeDsAuthFrame" name="threeDsAuthFrame" style={minHeight: "500px"} width="100%"
+      />
+    </div>
+  </Modal>
 }
diff --git a/src/ThreeDSMethod.res b/src/ThreeDSMethod.res
index 82f9dae3e..62874dfe4 100644
--- a/src/ThreeDSMethod.res
+++ b/src/ThreeDSMethod.res
@@ -106,7 +106,6 @@ let make = () => {
   })
 
   <>
-    <PaymentLoader />
     <div id="threeDsInvisibleDiv" className="hidden" />
     <iframe
       id="threeDsInvisibleIframe"
diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res
index 2eafd6c8f..134e80c94 100644
--- a/src/orca-loader/Elements.res
+++ b/src/orca-loader/Elements.res
@@ -604,11 +604,6 @@ let make = (
           }
           switch eventDataObject->getOptionalJsonFromJson("poll_status") {
           | Some(val) => {
-              handlePostMessage([
-                ("fullscreen", true->JSON.Encode.bool),
-                ("param", "paymentloader"->JSON.Encode.string),
-                ("iframeId", selectorString->JSON.Encode.string),
-              ])
               let dict = val->getDictFromJson
               let pollId = dict->getString("poll_id", "")
               let interval =

From 94ba5f0dfc2449657fe52971be4d8733f57f6c25 Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Mon, 20 May 2024 16:09:35 +0530
Subject: [PATCH 5/5] fix: timeout changed

---
 src/ThreeDSAuth.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
index 2961125a2..2ba9db986 100644
--- a/src/ThreeDSAuth.res
+++ b/src/ThreeDSAuth.res
@@ -6,7 +6,7 @@ let make = () => {
   let (loader, setloader) = React.useState(_ => true)
 
   let threeDsAuthoriseUrl = React.useRef("")
-  let (expiryTime, setExpiryTime) = React.useState(_ => 60000.0)
+  let (expiryTime, setExpiryTime) = React.useState(_ => 600000.0)
 
   let logger = OrcaLogger.make(~source=Elements(Payment), ())