feat: 3DS netcetra Part 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
   }

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>
+  </>
 }

src/ThreeDSMethod.res

@@ -106,6 +106,7 @@ let make = () => {
   })
 
   <>
+    <PaymentLoader />
     <div id="threeDsInvisibleDiv" className="hidden" />
     <iframe
       id="threeDsInvisibleIframe"

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 {