From 68a1e158256a1e3a09e816dac622dea2dd76434e Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Tue, 12 Nov 2024 17:09:46 +0530
Subject: [PATCH] refactor: async await refactoring - 1 (#768)

Co-authored-by: Shiva Nandan <shiva.nandan@juspay.in>
---
 src/Components/SavedMethodItem.res        |   2 +-
 src/Components/SavedPaymentManagement.res |  50 ++++-----
 src/Payments/PazeButton.res               |  56 +++++-----
 src/Payments/PlaidSDKIframe.res           | 127 ++++++++++------------
 src/Payments/QRCodeDisplay.res            | 119 ++++++++++----------
 src/Utilities/PaymentUtils.res            |  36 +++---
 6 files changed, 183 insertions(+), 207 deletions(-)

diff --git a/src/Components/SavedMethodItem.res b/src/Components/SavedMethodItem.res
index 287e712b1..9de1eee78 100644
--- a/src/Components/SavedMethodItem.res
+++ b/src/Components/SavedMethodItem.res
@@ -69,7 +69,7 @@ let make = (~brandIcon, ~paymentItem: PaymentType.customerMethods, ~handleDelete
               name="delete"
               style={color: themeObj.colorDanger}
               className="cursor-pointer ml-4 mb-[6px]"
-              onClick={_ => paymentItem->handleDelete}
+              onClick={_ => handleDelete(paymentItem)->ignore}
             />
           </div>
           <div className="w-full">
diff --git a/src/Components/SavedPaymentManagement.res b/src/Components/SavedPaymentManagement.res
index f213bef33..cca4e1afc 100644
--- a/src/Components/SavedPaymentManagement.res
+++ b/src/Components/SavedPaymentManagement.res
@@ -2,35 +2,31 @@
 let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods) => {
   open CardUtils
   open Utils
+  open RecoilAtoms
 
-  let {iframeId} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
-  let {config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let customPodUri = Recoil.useRecoilValueFromAtom(RecoilAtoms.customPodUri)
-  let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+  let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
+  let {config} = Recoil.useRecoilValueFromAtom(configAtom)
+  let customPodUri = Recoil.useRecoilValueFromAtom(customPodUri)
+  let logger = Recoil.useRecoilValueFromAtom(loggerAtom)
 
-  let removeSavedMethod = (
-    savedMethods: array<PaymentType.customerMethods>,
-    paymentMethodId,
-  ) => {
-    savedMethods->Array.filter(savedMethod => {
-      savedMethod.paymentMethodId !== paymentMethodId
-    })
-  }
+  let removeSavedMethod = (savedMethods: array<PaymentType.customerMethods>, paymentMethodId) =>
+    savedMethods->Array.filter(savedMethod => savedMethod.paymentMethodId !== paymentMethodId)
 
-  let handleDelete = (paymentItem: PaymentType.customerMethods) => {
+  let handleDelete = async (paymentItem: PaymentType.customerMethods) => {
     messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("param", "paymentloader"->JSON.Encode.string),
       ("iframeId", iframeId->JSON.Encode.string),
     ])
-    open Promise
-    PaymentHelpers.deletePaymentMethod(
-      ~ephemeralKey=config.ephemeralKey,
-      ~paymentMethodId=paymentItem.paymentMethodId,
-      ~logger,
-      ~customPodUri,
-    )
-    ->then(res => {
+
+    try {
+      let res = await PaymentHelpers.deletePaymentMethod(
+        ~ephemeralKey=config.ephemeralKey,
+        ~paymentMethodId=paymentItem.paymentMethodId,
+        ~logger,
+        ~customPodUri,
+      )
+
       let dict = res->getDictFromJson
       let paymentMethodId = dict->getString("payment_method_id", "")
       let isDeleted = dict->getBool("deleted", false)
@@ -44,19 +40,15 @@ let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods)
       } else {
         logger.setLogError(~value=res->JSON.stringify, ~eventName=DELETE_SAVED_PAYMENT_METHOD)
       }
-      messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
-      resolve()
-    })
-    ->catch(err => {
+    } catch {
+    | err =>
       let exceptionMessage = err->formatException->JSON.stringify
       logger.setLogError(
         ~value=`Error Deleting Saved Payment Method: ${exceptionMessage}`,
         ~eventName=DELETE_SAVED_PAYMENT_METHOD,
       )
-      messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
-      resolve()
-    })
-    ->ignore
+    }
+    messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
   }
 
   savedMethods
diff --git a/src/Payments/PazeButton.res b/src/Payments/PazeButton.res
index 411beee9e..4c0b0772e 100644
--- a/src/Payments/PazeButton.res
+++ b/src/Payments/PazeButton.res
@@ -5,47 +5,40 @@ let make = (~token: SessionsType.token) => {
   let {iframeId, publishableKey, clientSecret} = Recoil.useRecoilValueFromAtom(keys)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let options = Recoil.useRecoilValueFromAtom(optionAtom)
-  let (showLoader, setShowLoader) = React.useState(() => false)
-  let setIsShowOrPayUsing = Recoil.useSetRecoilState(RecoilAtoms.isShowOrPayUsing)
+  let setIsShowOrPayUsing = Recoil.useSetRecoilState(isShowOrPayUsing)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
-  let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paze)
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(isManualRetryEnabled)
+  let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paze)
   let paymentIntentID = clientSecret->Option.getOr("")->getPaymentId
-
-  React.useEffect0(() => {
-    setIsShowOrPayUsing(_ => true)
-    None
-  })
-
+  let (showLoader, setShowLoader) = React.useState(() => false)
   let onClick = _ => {
     setShowLoader(_ => true)
+    let metadata =
+      [
+        ("wallet", (token.walletName :> string)->JSON.Encode.string),
+        ("clientId", token.clientId->JSON.Encode.string),
+        ("clientName", token.clientName->JSON.Encode.string),
+        ("clientProfileId", token.clientProfileId->JSON.Encode.string),
+        ("sessionId", paymentIntentID->JSON.Encode.string),
+        ("publishableKey", publishableKey->JSON.Encode.string),
+        ("emailAddress", token.email_address->JSON.Encode.string),
+        ("transactionAmount", token.transaction_amount->JSON.Encode.string),
+        ("transactionCurrencyCode", token.transaction_currency_code->JSON.Encode.string),
+      ]->getJsonFromArrayOfJson
+
     messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("param", "pazeWallet"->JSON.Encode.string),
       ("iframeId", iframeId->JSON.Encode.string),
-      (
-        "metadata",
-        [
-          ("wallet", (token.walletName :> string)->JSON.Encode.string),
-          ("clientId", token.clientId->JSON.Encode.string),
-          ("clientName", token.clientName->JSON.Encode.string),
-          ("clientProfileId", token.clientProfileId->JSON.Encode.string),
-          ("sessionId", paymentIntentID->JSON.Encode.string),
-          ("publishableKey", publishableKey->JSON.Encode.string),
-          ("emailAddress", token.email_address->JSON.Encode.string),
-          ("transactionAmount", token.transaction_amount->JSON.Encode.string),
-          ("transactionCurrencyCode", token.transaction_currency_code->JSON.Encode.string),
-        ]->getJsonFromArrayOfJson,
-      ),
+      ("metadata", metadata),
     ])
   }
 
-  React.useEffect0(() => {
-    let onPazeCallback = (ev: Window.event) => {
+  React.useEffect(() => {
+    let handlePazeCallback = ev => {
       let json = ev.data->safeParse
       let dict = json->Utils.getDictFromJson->getDictFromDict("data")
-      let isPaze = dict->getBool("isPaze", false)
-      if isPaze {
+      if dict->getBool("isPaze", false) {
         setShowLoader(_ => false)
         if dict->getOptionString("completeResponse")->Option.isSome {
           let completeResponse = dict->getString("completeResponse", "")
@@ -61,14 +54,15 @@ let make = (~token: SessionsType.token) => {
         }
       }
     }
-    Window.addEventListener("message", onPazeCallback)
-    Some(() => Window.removeEventListener("message", ev => onPazeCallback(ev)))
-  })
 
+    setIsShowOrPayUsing(_ => true)
+    Window.addEventListener("message", handlePazeCallback)
+    Some(() => Window.removeEventListener("message", handlePazeCallback))
+  }, [])
   <button
     disabled={showLoader}
     onClick
-    className={`w-full flex flex-row justify-center items-center`}
+    className="w-full flex flex-row justify-center items-center"
     style={
       borderRadius: themeObj.buttonBorderRadius,
       backgroundColor: "#2B63FF",
diff --git a/src/Payments/PlaidSDKIframe.res b/src/Payments/PlaidSDKIframe.res
index 7b1c11ac1..45b9c1b32 100644
--- a/src/Payments/PlaidSDKIframe.res
+++ b/src/Payments/PlaidSDKIframe.res
@@ -8,40 +8,38 @@ let make = () => {
   let (publishableKey, setPublishableKey) = React.useState(_ => "")
   let (clientSecret, setClientSecret) = React.useState(_ => "")
   let (isForceSync, setIsForceSync) = React.useState(_ => false)
-  let logger = React.useMemo(() => {
-    HyperLogger.make(~source=Elements(Payment), ~clientSecret, ~merchantId=publishableKey)
-  }, (publishableKey, clientSecret))
+  let logger = React.useMemo(
+    () => HyperLogger.make(~source=Elements(Payment), ~clientSecret, ~merchantId=publishableKey),
+    (publishableKey, clientSecret),
+  )
 
-  React.useEffect0(() => {
-    let handle = (ev: Window.event) => {
+  React.useEffect(() => {
+    let handleParentWindowMessage = (ev: Window.event) => {
       let json = ev.data->safeParse
       let metaData = json->getDictFromJson->getDictFromDict("metadata")
       let linkToken = metaData->getString("linkToken", "")
-      if linkToken->String.length > 0 {
-        let pmAuthConnectorArray =
-          metaData
-          ->getArray("pmAuthConnectorArray")
-          ->Array.map(ele => ele->JSON.Decode.string)
 
+      if linkToken->String.length > 0 {
         setLinkToken(_ => linkToken)
-        setPmAuthConnectorsArr(_ => pmAuthConnectorArray)
+        setPmAuthConnectorsArr(_ =>
+          metaData->getArray("pmAuthConnectorArray")->Array.map(JSON.Decode.string)
+        )
         setPublishableKey(_ => metaData->getString("publishableKey", ""))
         setClientSecret(_ => metaData->getString("clientSecret", ""))
         setIsForceSync(_ => metaData->getBool("isForceSync", false))
       }
     }
-    Window.addEventListener("message", handle)
+    Window.addEventListener("message", handleParentWindowMessage)
     messageParentWindow([("iframeMountedCallback", true->JSON.Encode.bool)])
-    Some(() => {Window.removeEventListener("message", handle)})
-  })
+    Some(() => Window.removeEventListener("message", handleParentWindowMessage))
+  }, [])
 
   React.useEffect(() => {
     PmAuthConnectorUtils.mountAllRequriedAuthConnectorScripts(
       ~pmAuthConnectorsArr,
       ~onScriptLoaded=authConnector => {
-        switch authConnector->PmAuthConnectorUtils.pmAuthNameToTypeMapper {
-        | PLAID => setIsReady(_ => true)
-        | NONE => ()
+        if authConnector->PmAuthConnectorUtils.pmAuthNameToTypeMapper === PLAID {
+          setIsReady(_ => true)
         }
       },
       ~logger,
@@ -49,81 +47,72 @@ let make = () => {
     None
   }, [pmAuthConnectorsArr])
 
-  let callbackOnSuccessOfPlaidPaymentsFlow = () => {
-    open Promise
+  let callbackOnSuccessOfPlaidPaymentsFlow = async () => {
     let headers = [("Content-Type", "application/json"), ("api-key", publishableKey)]
 
-    PaymentHelpers.retrievePaymentIntent(
-      clientSecret,
-      headers,
-      ~optLogger=Some(logger),
-      ~customPodUri="",
-      ~isForceSync=true,
-    )
-    ->then(json => {
+    try {
+      let json = await PaymentHelpers.retrievePaymentIntent(
+        clientSecret,
+        headers,
+        ~optLogger=Some(logger),
+        ~customPodUri="",
+        ~isForceSync=true,
+      )
       let dict = json->getDictFromJson
       let status = dict->getString("status", "")
       let return_url = dict->getString("return_url", "")
 
-      if (
-        status === "succeeded" || status === "requires_customer_action" || status === "processing"
-      ) {
+      switch status {
+      | "succeeded" | "requires_customer_action" | "processing" =>
         postSubmitResponse(~jsonData=json, ~url=return_url)
-      } else if status === "failed" {
+      | "failed" =>
         postFailedSubmitResponse(
           ~errortype="confirm_payment_failed",
           ~message="Payment failed. Try again!",
         )
-      } else {
+      | _ =>
         postFailedSubmitResponse(
           ~errortype="sync_payment_failed",
           ~message="Payment is processing. Try again later!",
         )
       }
       messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
-      resolve(json)
-    })
-    ->then(_ => {
-      resolve(Nullable.null)
-    })
-    ->catch(e => {
-      logInfo(Console.log2("Retrieve Failed", e))
-      resolve(Nullable.null)
-    })
-    ->ignore
+    } catch {
+    | e => logInfo(Console.log2("Retrieve Failed", e))
+    }
   }
 
-  React.useEffect(() => {
-    if isReady && linkToken->String.length > 0 {
-      let handler = Plaid.create({
-        token: linkToken,
-        onLoad: _ => {
-          logger.setLogInfo(~value="Plaid SDK Loaded", ~eventName=PLAID_SDK)
-        },
-        onSuccess: (publicToken, _) => {
+  let initializePlaid = () => {
+    Plaid.create({
+      token: linkToken,
+      onLoad: _ => logger.setLogInfo(~value="Plaid SDK Loaded", ~eventName=PLAID_SDK),
+      onSuccess: (publicToken, _) => {
+        messageParentWindow([
+          ("isPlaid", true->JSON.Encode.bool),
+          ("publicToken", publicToken->JSON.Encode.string),
+        ])
+        if isForceSync {
+          callbackOnSuccessOfPlaidPaymentsFlow()->ignore
+        }
+      },
+      onExit: _ => {
+        if isForceSync {
+          callbackOnSuccessOfPlaidPaymentsFlow()->ignore
+        } else {
           messageParentWindow([
+            ("fullscreen", false->JSON.Encode.bool),
             ("isPlaid", true->JSON.Encode.bool),
-            ("publicToken", publicToken->JSON.Encode.string),
+            ("isExited", true->JSON.Encode.bool),
+            ("publicToken", ""->JSON.Encode.string),
           ])
-          if isForceSync {
-            callbackOnSuccessOfPlaidPaymentsFlow()
-          }
-        },
-        onExit: _ => {
-          if isForceSync {
-            callbackOnSuccessOfPlaidPaymentsFlow()
-          } else {
-            messageParentWindow([
-              ("fullscreen", false->JSON.Encode.bool),
-              ("isPlaid", true->JSON.Encode.bool),
-              ("isExited", true->JSON.Encode.bool),
-              ("publicToken", ""->JSON.Encode.string),
-            ])
-          }
-        },
-      })
+        }
+      },
+    }).open_()
+  }
 
-      handler.open_()
+  React.useEffect(() => {
+    if isReady && linkToken->String.length > 0 {
+      initializePlaid()
     }
 
     None
diff --git a/src/Payments/QRCodeDisplay.res b/src/Payments/QRCodeDisplay.res
index 7507f1f01..f12f65cdb 100644
--- a/src/Payments/QRCodeDisplay.res
+++ b/src/Payments/QRCodeDisplay.res
@@ -1,4 +1,5 @@
 open Utils
+
 let getKeyValue = (json, str) => {
   json
   ->Dict.get(str)
@@ -21,50 +22,54 @@ let make = () => {
   React.useEffect0(() => {
     messageParentWindow([("iframeMountedCallback", true->JSON.Encode.bool)])
     let handle = (ev: Window.event) => {
-      let json = ev.data->safeParse
-      let dict = json->Utils.getDictFromJson
-      if dict->Dict.get("fullScreenIframeMounted")->Option.isSome {
-        let metadata = dict->getJsonObjectFromDict("metadata")
-        let metaDataDict = metadata->JSON.Decode.object->Option.getOr(Dict.make())
-        let qrData = metaDataDict->getString("qrData", "")
-        setQrCode(_ => qrData)
-        let paymentIntentId = metaDataDict->getString("paymentIntentId", "")
-        setClientSecret(_ => paymentIntentId)
-        let headersDict =
-          metaDataDict
-          ->getJsonObjectFromDict("headers")
-          ->JSON.Decode.object
-          ->Option.getOr(Dict.make())
-        let headers = Dict.make()
-        setReturnUrl(_ => metadata->getDictFromJson->getString("url", ""))
-        headersDict
-        ->Dict.toArray
-        ->Array.forEach(entries => {
-          let (x, val) = entries
-          Dict.set(headers, x, val->getStringFromJson(""))
-        })
-        let expiryTime =
-          metaDataDict->getString("expiryTime", "")->Float.fromString->Option.getOr(0.0)
-        let timeExpiry = expiryTime -. Date.now()
-        if timeExpiry > 0.0 && timeExpiry < 900000.0 {
-          setExpiryTime(_ => timeExpiry)
+      let handleAsync = async () => {
+        let json = ev.data->safeParse
+        let dict = json->Utils.getDictFromJson
+        if dict->Dict.get("fullScreenIframeMounted")->Option.isSome {
+          let metadata = dict->getJsonObjectFromDict("metadata")
+          let metaDataDict = metadata->JSON.Decode.object->Option.getOr(Dict.make())
+          let qrData = metaDataDict->getString("qrData", "")
+          setQrCode(_ => qrData)
+          let paymentIntentId = metaDataDict->getString("paymentIntentId", "")
+          setClientSecret(_ => paymentIntentId)
+          let headersDict =
+            metaDataDict
+            ->getJsonObjectFromDict("headers")
+            ->JSON.Decode.object
+            ->Option.getOr(Dict.make())
+          let headers = Dict.make()
+          setReturnUrl(_ => metadata->getDictFromJson->getString("url", ""))
+          headersDict
+          ->Dict.toArray
+          ->Array.forEach(entries => {
+            let (x, val) = entries
+            Dict.set(headers, x, val->getStringFromJson(""))
+          })
+          let expiryTime =
+            metaDataDict->getString("expiryTime", "")->Float.fromString->Option.getOr(0.0)
+          let timeExpiry = expiryTime -. Date.now()
+          if timeExpiry > 0.0 && timeExpiry < 900000.0 {
+            setExpiryTime(_ => timeExpiry)
+          }
+          setHeaders(_ => headers->Dict.toArray)
+
+          try {
+            let res = await PaymentHelpers.pollRetrievePaymentIntent(
+              paymentIntentId,
+              headers->Dict.toArray,
+              ~optLogger=Some(logger),
+              ~customPodUri,
+            )
+            Modal.close(setOpenModal)
+            postSubmitResponse(~jsonData=res, ~url=return_url)
+          } catch {
+          | error => Console.log2("Error while polling payment intent:", error)
+          }
         }
-        open Promise
-        setHeaders(_ => headers->Dict.toArray)
-        PaymentHelpers.pollRetrievePaymentIntent(
-          paymentIntentId,
-          headers->Dict.toArray,
-          ~optLogger=Some(logger),
-          ~customPodUri,
-        )
-        ->then(res => {
-          Modal.close(setOpenModal)
-          postSubmitResponse(~jsonData=res, ~url=return_url)
-          resolve(res)
-        })
-        ->ignore
       }
+      handleAsync()->ignore
     }
+
     Window.addEventListener("message", handle)
     Some(() => {Window.removeEventListener("message", handle)})
   })
@@ -82,15 +87,14 @@ let make = () => {
     )
   }, [expiryTime])
 
-  let closeModal = () => {
-    open Promise
-    PaymentHelpers.retrievePaymentIntent(
-      clientSecret,
-      headers,
-      ~optLogger=Some(logger),
-      ~customPodUri,
-    )
-    ->then(json => {
+  let closeModal = async () => {
+    try {
+      let json = await PaymentHelpers.retrievePaymentIntent(
+        clientSecret,
+        headers,
+        ~optLogger=Some(logger),
+        ~customPodUri,
+      )
       let dict = json->getDictFromJson
       let status = dict->getString("status", "")
 
@@ -109,17 +113,10 @@ let make = () => {
           ~message="Payment is processing. Try again later!",
         )
       }
-      resolve(json)
-    })
-    ->then(_json => {
       Modal.close(setOpenModal)
-      resolve(Nullable.null)
-    })
-    ->catch(e => {
-      Console.log2("Retrieve Failed", e)
-      resolve(Nullable.null)
-    })
-    ->ignore
+    } catch {
+    | e => Console.log2("Retrieve Failed", e)
+    }
   }
 
   let expiryString = React.useMemo(() => {
@@ -152,7 +149,7 @@ let make = () => {
                 color: "#ffffff",
               }
               onClick={_ => {
-                closeModal()
+                closeModal()->ignore
               }}>
               {React.string("Done")}
             </button>
diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index 150978000..b1c071b66 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -406,24 +406,30 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
 }
 
 let useStatesJson = setStatesJson => {
-  open Promise
-  React.useEffect0(() => {
-    AddressPaymentInput.importStates("./../States.json")
-    ->then(res => {
-      setStatesJson(_ => res.states)
-      resolve()
-    })
-    ->ignore
+  React.useEffect0(_ => {
+    let fetchStates = async () => {
+      try {
+        let res = await AddressPaymentInput.importStates("./../States.json")
+        setStatesJson(_ => res.states)
+      } catch {
+      | err => Console.error2("Error importing states:", err)
+      }
+    }
 
+    fetchStates()->ignore
     None
   })
 }
 
-let getStateJson = () => {
-  open Promise
-  AddressPaymentInput.importStates("./../States.json")->then(res => {
-    res.states->resolve
-  })
+let getStateJson = async _ => {
+  try {
+    let res = await AddressPaymentInput.importStates("./../States.json")
+    res.states
+  } catch {
+  | err =>
+    Console.error2("Error importing states:", err)
+    JSON.Encode.null
+  }
 }
 
 let sortCustomerMethodsBasedOnPriority = (
@@ -477,9 +483,7 @@ let sortCustomerMethodsBasedOnPriority = (
   }
 }
 
-let getSupportedCardBrands = (
-  paymentMethodListValue: PaymentMethodsRecord.paymentMethodList,
-) => {
+let getSupportedCardBrands = (paymentMethodListValue: PaymentMethodsRecord.paymentMethodList) => {
   let cardPaymentMethod =
     paymentMethodListValue.payment_methods->Array.find(ele => ele.payment_method === "card")