refactor: remove rescript-webapi as a dependency

bsconfig.json

@@ -20,7 +20,6 @@
   "bs-dependencies": [
     "@rescript/react",
     "@ryyppy/rescript-promise",
-    "rescript-webapi",
     "@rescript/core",
     "@glennsl/rescript-fetch"
   ]

package.json

@@ -17,7 +17,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recoil": "^0.1.2",
-    "rescript-webapi": "^0.7.0",
     "webpack-merge": "^5.9.0"
   },
   "scripts": {

src/Hooks/OutsideClick.res

@@ -1,5 +1,6 @@
-external ffToDomType: Dom.eventTarget => Dom.node_like<'a> = "%identity"
-external ffToWebDom: Js.Nullable.t<Dom.element> => Js.Nullable.t<Webapi.Dom.Element.t> = "%identity"
+external ffToDomType: {..} => Dom.node_like<'a> = "%identity"
+@send external contains: (Dom.element, {..}) => bool = "contains"
+
 type ref =
   | ArrayOfRef(array<React.ref<Js.Nullable.t<Dom.element>>>)
   | RefArray(React.ref<array<Js.Nullable.t<Dom.element>>>)
@@ -27,14 +28,14 @@ let useOutsideClick = (
   let eventCallback = useEvent0(callback)
   React.useEffect1(() => {
     if isActive {
-      let handleClick = (e: Dom.event) => {
-        let targ = Webapi.Dom.Event.target(e)
+      let handleClick = (e: ReactEvent.Mouse.t) => {
+        let targ = e->ReactEvent.Mouse.target
 
         let isInsideClick = switch refs {
         | ArrayOfRef(refs) =>
           refs->Js.Array2.reduce((acc, ref: React.ref<Js.Nullable.t<Dom.element>>) => {
-            let isClickInsideRef = switch ffToWebDom(ref.current)->Js.Nullable.toOption {
-            | Some(element) => element->Webapi.Dom.Element.contains(~child=ffToDomType(targ))
+            let isClickInsideRef = switch ref.current->Js.Nullable.toOption {
+            | Some(element) => element->contains(targ)
             | None => false
             }
             acc || isClickInsideRef
@@ -43,8 +44,8 @@ let useOutsideClick = (
           refs.current
           ->Js.Array2.slice(~start=0, ~end_=-1)
           ->Js.Array2.reduce((acc, ref: Js.Nullable.t<Dom.element>) => {
-            let isClickInsideRef = switch ffToWebDom(ref)->Js.Nullable.toOption {
-            | Some(element) => element->Webapi.Dom.Element.contains(~child=ffToDomType(targ))
+            let isClickInsideRef = switch ref->Js.Nullable.toOption {
+            | Some(element) => element->contains(targ)
             | None => false
             }
             acc || isClickInsideRef
@@ -53,8 +54,8 @@ let useOutsideClick = (
 
         let isClickInsideOfContainer = switch containerRefs {
         | Some(ref) =>
-          switch ffToWebDom(ref.current)->Js.Nullable.toOption {
-          | Some(element) => element->Webapi.Dom.Element.contains(~child=ffToDomType(targ))
+          switch ref.current->Js.Nullable.toOption {
+          | Some(element) => element->contains(targ)
           | None => false
           }
         | None => true
@@ -66,18 +67,18 @@ let useOutsideClick = (
       }
 
       Js.Global.setTimeout(() => {
-        events->Js.Array2.forEach(
+        events->Array.forEach(
           event => {
-            Webapi.Dom.window->Webapi.Dom.Window.addEventListener(event, handleClick)
+            Window.addEventListener(event, handleClick)
           },
         )
       }, 50)->ignore
 
       Some(
         () => {
-          events->Js.Array2.forEach(event =>
-            Webapi.Dom.window->Webapi.Dom.Window.removeEventListener(event, handleClick)
-          )
+          events->Array.forEach(event => {
+            Window.removeEventListener(event, handleClick)
+          })
         },
       )
     } else {

src/PaymentOptions.res

@@ -59,7 +59,7 @@ let make = (
   let (toggleIconElement, setToggleIconElement) = React.useState(_ => false)
   React.useEffect2(() => {
     let width = switch payOptionsRef.current->Js.Nullable.toOption {
-    | Some(ref) => Webapi.Dom.Element.clientWidth(ref)
+    | Some(ref) => ref->Window.Element.clientWidth
     | None => 0
     }
     setCardsContainerWidth(_ => width)
@@ -87,9 +87,12 @@ let make = (
         setMoreIconIndex(prev => mod(prev + 1, dropDownOptionsDetails->Belt.Array.length))
 
         setToggleIconElement(_ => true)
-        Js.Global.setTimeout(() => {
-          setToggleIconElement(_ => false)
-        }, 10)->ignore
+        Js.Global.setTimeout(
+          () => {
+            setToggleIconElement(_ => false)
+          },
+          10,
+        )->ignore
       }
     }, 5000)
 

src/Utilities/PaymentHelpers.res

@@ -135,7 +135,7 @@ let rec intentCall = (
   )
   let handleOpenUrl = url => {
     if isPaymentSession {
-      Window.location.replace(. url)
+      Window.Location.replace(. url)
     } else {
       openUrl(url)
     }

src/Window.res

@@ -126,5 +126,10 @@ let isInteg = hostname === "dev.hyperswitch.io"
 
 let isProd = hostname === "checkout.hyperswitch.io"
 
-type location = {replace: (. string) => unit}
-@val @scope("window") external location: location = "location"
+module Location = {
+  @val @scope(("window", "location")) external replace: (. string) => unit = "replace"
+}
+
+module Element = {
+  @get external clientWidth: Dom.element => int = "clientWidth"
+}

src/orca-loader/LoaderPaymentElement.res

@@ -185,7 +185,7 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
         switch eventDataObject->getOptionalJsonFromJson("openurl") {
         | Some(val) => {
             let url = val->getStringfromjson("")
-            Window.location.replace(. url)
+            Window.Location.replace(. url)
           }
         | None => ()
         }