From c8ae50b0f680c93e2ead174f328df4ab82d8e41d Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 31 Jan 2024 16:57:23 +0530
Subject: [PATCH] chore: Nullable Core API Added.. (#315)

---
 src/components/ACLButton.resi                 |  2 +-
 src/components/AdvancedSearchComponent.res    |  8 ++---
 src/components/AdvancedSearchModal.res        |  4 +--
 src/components/Button.res                     |  4 +--
 src/components/Button.resi                    |  2 +-
 .../CustomCharts/HighchartBarChart.res        |  2 +-
 .../CustomCharts/HighchartTimeSeriesChart.res | 12 +++----
 src/components/DatePicker.res                 |  2 +-
 src/components/DateRangePicker.res            |  4 +--
 src/components/DynamicChart.res               |  2 +-
 src/components/DynamicTable.res               |  6 ++--
 src/components/DynamicTableUtils.res          |  4 +--
 src/components/DynamicTabs.res                | 14 ++++----
 src/components/HSwitchFeedBackModal.res       |  2 +-
 src/components/HSwitchSingleStatWidget.res    |  6 ++--
 src/components/HyperSwitchAuthWrapper.res     |  2 +-
 src/components/InfraCalendarList.res          |  8 ++---
 src/components/InputFields.resi               | 36 +++++++++----------
 src/components/LoadedTable.res                | 16 ++++-----
 src/components/LoadedTable.resi               | 12 +++----
 src/components/LocalFilters.res               |  2 +-
 src/components/Navbar.res                     |  2 +-
 src/components/ReactWindowTable.res           | 18 +++++-----
 src/components/RemoteFilter.res               | 25 ++++++-------
 src/components/RemoteFiltersUtils.res         |  2 +-
 src/components/RippleEffectBackground.res     | 12 +++----
 src/components/SearchInput.res                |  2 +-
 src/components/SelectBox.res                  | 26 +++++++-------
 src/components/SelectBox.resi                 |  8 ++---
 src/components/Table.res                      |  6 ++--
 src/components/Table.resi                     | 10 +++---
 src/components/TableLocalFilters.res          |  2 +-
 src/components/TableUtils.resi                | 28 +++++++--------
 src/components/Tabs.res                       | 16 ++++-----
 src/components/Tabs.resi                      |  2 +-
 src/components/form/FormRenderer.res          | 19 +++++-----
 src/components/form/NumericTextInput.res      |  4 +--
 .../form/PasswordStrengthInputAsChips.res     |  2 +-
 src/components/form/TextInput.res             |  6 ++--
 src/components/portal/PortalCapture.res       |  4 +--
 src/components/tooltip/ToolTip.res            | 10 +++---
 src/components/tooltip/ToolTip.resi           |  2 +-
 src/context/FilterContext.res                 |  4 +--
 src/context/LoadedTableContext.res            |  4 +--
 src/entities/EntityType.res                   |  6 ++--
 src/entities/analytics/AnalyticsUtils.res     |  2 +-
 .../hyperswitch/HyperSwitchApp.res            |  2 +-
 src/genericUtils/Form.res                     |  6 ++--
 src/genericUtils/Identity.res                 |  2 +-
 src/hooks/AuthHooks.res                       |  4 +--
 src/hooks/OutsideClick.res                    | 18 +++++-----
 src/libraries/Document.res                    |  2 +-
 src/libraries/Highcharts.res                  | 12 +++----
 src/libraries/HighchartsLine.res              |  4 +--
 src/libraries/LocalStorage.res                |  4 +--
 src/libraries/Lottie.res                      |  2 +-
 src/libraries/ReactFinalForm.res              | 24 ++++++-------
 .../HyperSwitch/Analytics/Analytics.res       | 14 ++++----
 .../Analytics/DownloadReportModal.res         |  2 +-
 .../HyperSwitch/Analytics/ErrorReasons.res    |  2 +-
 .../Analytics/HSAnalyticsUtils.res            |  4 +--
 .../ConnectorAccountDetailsHelper.res         |  4 +--
 .../HyperSwitch/Connectors/ConnectorList.res  | 10 +++---
 .../HyperSwitch/Connectors/ConnectorUtils.res |  2 +-
 .../Wallets/ApplePayWalletIntegration.res     |  4 +--
 .../HyperSwitch/Connectors/Wallets/Wallet.res |  2 +-
 .../HyperSwitch/Customers/Customers.res       |  2 +-
 .../Developer/APIKeys/KeyManagement.res       |  4 +--
 .../PaymentSettings/PaymentSettings.res       |  2 +-
 .../PaymentSettings/PaymentSettingsList.res   |  2 +-
 src/screens/HyperSwitch/Disputes/Disputes.res |  2 +-
 .../FraudAndRisk/FRMIntegrationFields.res     |  6 ++--
 .../FraudAndRisk/FRMPaymentMethods.res        |  2 +-
 .../HyperSwitch/FraudAndRisk/FRMSelect.res    |  8 ++---
 src/screens/HyperSwitch/HSLocalStorage.res    |  4 +--
 .../CommonConnectorFlow/SetupConnector.res    |  2 +-
 .../Home/ProdIntent/ProdVerifyModal.res       |  2 +-
 .../HyperSwitch/Home/QuickStart/GoLive.res    |  2 +-
 .../HyperSwitch/Hooks/EnumVariantHook.res     |  4 +--
 src/screens/HyperSwitch/MixpanelHook.res      |  2 +-
 .../HyperSwitch/Order/OrderRefundForm.res     |  2 +-
 .../HyperSwitch/Order/OrderUIUtils.res        |  6 ++--
 src/screens/HyperSwitch/Order/ShowOrder.res   |  4 +--
 .../PostLoginScreen/PostLoginScreen.res       |  2 +-
 .../HyperSwitch/Refunds/RefundUtils.res       |  6 ++--
 .../HyperSwitch/Refunds/ShowRefund.res        |  2 +-
 .../HyperSwitch/Routing/PriorityRouting.res   |  2 +-
 .../HyperSwitch/Routing/RoutingStack.res      |  2 +-
 .../HyperSwitch/Routing/RoutingUtils.res      |  8 ++---
 .../Routing/VolumeSplitRouting.res            |  2 +-
 .../RoutingRevamp/AdvancedRouting.res         |  2 +-
 .../RoutingRevamp/AdvancedRoutingUIUtils.res  |  8 ++---
 .../RoutingRevamp/AdvancedRoutingUtils.res    |  2 +-
 .../HyperSwitch/SDKPayment/SDKPage.res        |  2 +-
 .../SDKPayment/SDKPaymentTypes.res            |  8 ++---
 .../SDKPayment/SDKPaymentUtils.res            | 10 +++---
 src/screens/HyperSwitch/SDKPayment/WebSDK.res |  2 +-
 .../SetupConnectorCredentials.res             |  2 +-
 .../HyperSwitch/Settings/BusinessDetails.res  |  2 +-
 .../BusinessMapping/BusinessProfile.res       |  6 ++--
 .../Settings/MerchantAccountUtils.res         |  2 +-
 src/screens/HyperSwitch/Sidebar/Sidebar.res   |  8 ++---
 .../StripePlusPaypal/StripePlusPaypal.res     |  2 +-
 .../HyperSwitch/Surcharge/Surcharge.res       |  2 +-
 .../HyperSwitch/Surcharge/SurchargeUtils.res  |  9 ++---
 .../SwitchMerchant/SwitchMerchant.res         |  2 +-
 .../ThreeDSFlow/HSwitchThreeDS.res            |  2 +-
 .../UserManagement/InviteUsers.res            |  2 +-
 .../UserManagement/ShowUserData.res           |  4 +--
 .../UserManagement/UserRoleEntry.res          |  8 ++---
 .../HyperSwitch/Utils/TableSearchFilter.res   |  2 +-
 src/screens/componentsDemo/DragDrop.res       |  2 +-
 .../componentsDemo/DragDropComponent.res      |  2 +-
 src/screens/componentsDemo/DragNDropDemo.res  |  2 +-
 .../HSwitchLoginFlow/HyperSwitchAuth.res      | 14 ++++----
 .../HSwitchLoginFlow/HyperSwitchAuthUtils.res |  2 +-
 src/server/NodeJs.res                         |  2 +-
 src/utils/UserPrefUtils.res                   |  2 +-
 118 files changed, 339 insertions(+), 350 deletions(-)

diff --git a/src/components/ACLButton.resi b/src/components/ACLButton.resi
index 15359ffc5..c470a3eca 100644
--- a/src/components/ACLButton.resi
+++ b/src/components/ACLButton.resi
@@ -27,6 +27,6 @@ let make: (
   ~customBackColor: string=?,
   ~showBtnTextToolTip: bool=?,
   ~access: AuthTypes.authorization=?,
-  ~tooltipText: Js.String2.t=?,
+  ~tooltipText: string=?,
   ~toolTipPosition: ToolTip.toolTipPosition=?,
 ) => React.element
diff --git a/src/components/AdvancedSearchComponent.res b/src/components/AdvancedSearchComponent.res
index f97cc0e03..1109428f3 100644
--- a/src/components/AdvancedSearchComponent.res
+++ b/src/components/AdvancedSearchComponent.res
@@ -32,7 +32,7 @@ let make = (
     ->then(json => {
       let jsonData = json->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get("rows"))
       let newData = switch jsonData {
-      | Some(actualJson) => actualJson->getObjects->Array.map(obj => obj->Js.Nullable.return)
+      | Some(actualJson) => actualJson->getObjects->Array.map(obj => obj->Nullable.make)
       | None => []
       }
 
@@ -51,13 +51,13 @@ let make = (
       | None => ()
       }
       setShowModal(_ => false)
-      form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)
-      json->Js.Nullable.return->resolve
+      form.reset(JSON.Encode.object(Dict.make())->Nullable.make)
+      json->Nullable.make->resolve
     })
     ->catch(_err => {
       showToast(~message="Something went wrong. Please try again", ~toastType=ToastError, ())
 
-      Js.Nullable.null->resolve
+      Nullable.null->resolve
     })
   }
 
diff --git a/src/components/AdvancedSearchModal.res b/src/components/AdvancedSearchModal.res
index 21f3d16a1..53268d21d 100644
--- a/src/components/AdvancedSearchModal.res
+++ b/src/components/AdvancedSearchModal.res
@@ -73,12 +73,12 @@ module AdvanceSearch = {
         | _ =>
           showToast(~message="Something went wrong. Please try again", ~toastType=ToastError, ())
         }
-        json->Js.Nullable.return->resolve
+        json->Nullable.make->resolve
       })
       ->catch(_err => {
         showToast(~message="Something went wrong. Please try again", ~toastType=ToastError, ())
 
-        Js.Nullable.null->resolve
+        Nullable.null->resolve
       })
     }
 
diff --git a/src/components/Button.res b/src/components/Button.res
index e671b6870..0a01e21ec 100644
--- a/src/components/Button.res
+++ b/src/components/Button.res
@@ -364,8 +364,8 @@ let make = (
   ~tooltipText=?,
   ~toolTipPosition=ToolTip.Top,
 ) => {
-  let parentRef = React.useRef(Js.Nullable.null)
-  let dummyRef = React.useRef(Js.Nullable.null)
+  let parentRef = React.useRef(Nullable.null)
+  let dummyRef = React.useRef(Nullable.null)
   let buttonRef = disableRipple ? dummyRef : parentRef
   let rippleEffect = RippleEffectBackground.useHorizontalRippleHook(buttonRef)
   if !isPhoneDropdown {
diff --git a/src/components/Button.resi b/src/components/Button.resi
index 86e150f4c..ebae6e61e 100644
--- a/src/components/Button.resi
+++ b/src/components/Button.resi
@@ -116,6 +116,6 @@ let make: (
   ~isPhoneDropdown: bool=?,
   ~showBtnTextToolTip: bool=?,
   ~showTooltip: bool=?,
-  ~tooltipText: Js.String2.t=?,
+  ~tooltipText: string=?,
   ~toolTipPosition: ToolTip.toolTipPosition=?,
 ) => React.element
diff --git a/src/components/CustomCharts/HighchartBarChart.res b/src/components/CustomCharts/HighchartBarChart.res
index 09a6f8683..72cc7e441 100644
--- a/src/components/CustomCharts/HighchartBarChart.res
+++ b/src/components/CustomCharts/HighchartBarChart.res
@@ -31,7 +31,7 @@ module HighBarChart1D = {
       let barOption: JSON.t = {
         "chart": Highcharts.makebarChart(
           ~chartType={isHrizonatalBar ? "bar" : "column"},
-          ~backgroundColor=Js.Nullable.null,
+          ~backgroundColor=Nullable.null,
           (),
         ),
         "title": {
diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index 9d1f4634d..f10d512b8 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -7,7 +7,7 @@ type ele
 external toElement: Dom.element => ele = "%identity"
 
 @send
-external querySelectorAll: (DOMUtils.document, string) => array<Js.Nullable.t<domElement>> =
+external querySelectorAll: (DOMUtils.document, string) => array<Nullable.t<domElement>> =
   "querySelectorAll"
 
 @send external addEventListener: ('a, string, unit => unit) => unit = "addEventListener"
@@ -239,7 +239,7 @@ module LineChart1D = {
             data: chartDataItem.data->Array.map(
               item => {
                 let (x, y, _) = item
-                (x, y->Js.Nullable.return)
+                (x, y->Nullable.make)
               },
             ),
             legendIndex: chartDataItem.legendIndex,
@@ -468,7 +468,7 @@ module LineChart1D = {
               "type": chartType,
               "margin": None,
               "zoomType": "x",
-              "backgroundColor": Js.Nullable.null,
+              "backgroundColor": Nullable.null,
               "height": Some(chartHeight),
               "events": {
                 render: (
@@ -538,7 +538,7 @@ module LineChart1D = {
                 },
               },
               "lineWidth": 1.2,
-              "threshold": Js.Nullable.null,
+              "threshold": Nullable.null,
             }->genericObjectOrRecordToJson,
             "line": {
               "pointStart": None,
@@ -550,7 +550,7 @@ module LineChart1D = {
                 },
               },
               "lineWidth": 1.2,
-              "threshold": Js.Nullable.null,
+              "threshold": Nullable.null,
             }->genericObjectOrRecordToJson,
             "boxplot": {
               "visible": false,
@@ -716,7 +716,7 @@ module LineChart1D = {
                   : [GroupBY, fistLegend, secondLegend]}
                 title="High Chart Time Series Chart"
                 hideTitle=true
-                actualData={legendData->Array.map(Js.Nullable.return)}
+                actualData={legendData->Array.map(Nullable.make)}
                 entity=legendTableEntity
                 resultsPerPage=15
                 totalResults={legendData->Array.length}
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index f9f9b9140..186e13bae 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -20,7 +20,7 @@ let make = (
   ~showSeconds=true,
   ~fullLength=?,
 ) => {
-  let dropdownRef = React.useRef(Js.Nullable.null)
+  let dropdownRef = React.useRef(Nullable.null)
   let (isExpanded, setIsExpanded) = React.useState(_ => false)
   let customTimezoneToISOString = TimeZoneHook.useCustomTimeZoneToIsoString()
   let isoStringToCustomTimeZone = TimeZoneHook.useIsoStringToCustomTimeZone()
diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
index 2154efc1e..9dc01d26e 100644
--- a/src/components/DateRangePicker.res
+++ b/src/components/DateRangePicker.res
@@ -242,8 +242,8 @@ module Base = {
       None
     }, (localStartDate, localEndDate))
 
-    let dateRangeRef = React.useRef(Js.Nullable.null)
-    let dropdownRef = React.useRef(Js.Nullable.null)
+    let dateRangeRef = React.useRef(Nullable.null)
+    let dropdownRef = React.useRef(Nullable.null)
 
     useErroryValueResetter(startDateVal, setStartDateVal)
     useErroryValueResetter(endDateVal, setEndDateVal)
diff --git a/src/components/DynamicChart.res b/src/components/DynamicChart.res
index 4bc18f22d..adfacb1cb 100644
--- a/src/components/DynamicChart.res
+++ b/src/components/DynamicChart.res
@@ -802,7 +802,7 @@ let make = (
     <div>
       <ReactFinalForm.Form
         subscription=ReactFinalForm.subscribeToValues
-        onSubmit={(_, _) => Js.Nullable.null->Promise.resolve}
+        onSubmit={(_, _) => Nullable.null->Promise.resolve}
         render={({handleSubmit}) => {
           <form onSubmit={handleSubmit}>
             <AddDataAttributes attributes=[("data-chart-segment", "Chart-1")]>
diff --git a/src/components/DynamicTable.res b/src/components/DynamicTable.res
index 478cf218f..e072d61a6 100644
--- a/src/components/DynamicTable.res
+++ b/src/components/DynamicTable.res
@@ -251,11 +251,11 @@ let make = (
     })
     ->then(json => {
       switch json->JSON.Classify.classify {
-      | Array(_arr) => json->getObjects->Array.map(obj => obj->Js.Nullable.return)->setNewData
+      | Array(_arr) => json->getObjects->Array.map(obj => obj->Nullable.make)->setNewData
       | Object(dict) => {
           let flattenedObject = JsonFlattenUtils.flattenObject(json, false)
           switch Dict.get(flattenedObject, dataKey) {
-          | Some(x) => x->getObjects->Array.map(obj => obj->Js.Nullable.return)->setNewData
+          | Some(x) => x->getObjects->Array.map(obj => obj->Nullable.make)->setNewData
           | None => ()
           }
           let summary = switch Dict.get(dict, summaryKey) {
@@ -423,7 +423,7 @@ let make = (
         let newData = switch data {
         | Some(data) =>
           data->Array.filter(item => {
-            switch item->Js.Nullable.toOption {
+            switch item->Nullable.toOption {
             | Some(val) => filterCheck(val, keys)
             | _ => false
             }
diff --git a/src/components/DynamicTableUtils.res b/src/components/DynamicTableUtils.res
index 41718ce13..728c5c16c 100644
--- a/src/components/DynamicTableUtils.res
+++ b/src/components/DynamicTableUtils.res
@@ -39,7 +39,7 @@ let useDateFormatConvertor = () => {
 }
 
 let filteredData = (
-  actualData: array<Js.Nullable.t<'t>>,
+  actualData: array<Nullable.t<'t>>,
   columnFilter: Dict.t<array<JSON.t>>,
   visibleColumns: option<array<'colType>>,
   entity: EntityType.entityType<'colType, 't>,
@@ -48,7 +48,7 @@ let filteredData = (
   let selectedFiltersKeys = columnFilter->Dict.keysToArray
   if selectedFiltersKeys->Array.length > 0 {
     actualData->Array.filter(item => {
-      switch item->Js.Nullable.toOption {
+      switch item->Nullable.toOption {
       | Some(row) =>
         // either to take this row or not if any filter is present then take row or else drop
         let rowDict = row->Identity.genericTypeToDictOfJson
diff --git a/src/components/DynamicTabs.res b/src/components/DynamicTabs.res
index b3528e260..6d706faca 100644
--- a/src/components/DynamicTabs.res
+++ b/src/components/DynamicTabs.res
@@ -175,7 +175,7 @@ module IndicationArrow = {
     let onClick = {
       _ev =>
         refElement.current
-        ->Js.Nullable.toOption
+        ->Nullable.toOption
         ->Option.forEach(input =>
           input->scrollIntoView(_, {behavior: "smooth", block: "nearest", inline: "nearest"})
         )
@@ -206,8 +206,8 @@ module IndicationArrow = {
   }
 }
 
-let getBoundingRectInfo = (ref: React.ref<Js.Nullable.t<Dom.element>>, getter) => {
-  ref.current->Js.Nullable.toOption->Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
+let getBoundingRectInfo = (ref: React.ref<Nullable.t<Dom.element>>, getter) => {
+  ref.current->Nullable.toOption->Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
 }
 
 @react.component
@@ -400,9 +400,9 @@ let make = (
   let (isLeftArrowVisible, setIsLeftArrowVisible) = React.useState(() => false)
   let (isRightArrowVisible, setIsRightArrowVisible) = React.useState(() => true)
 
-  let firstTabRef = React.useRef(Js.Nullable.null)
-  let scrollRef = React.useRef(Js.Nullable.null)
-  let lastTabRef = React.useRef(Js.Nullable.null)
+  let firstTabRef = React.useRef(Nullable.null)
+  let scrollRef = React.useRef(Nullable.null)
+  let lastTabRef = React.useRef(Nullable.null)
 
   let onScroll = _ev => {
     setTabScroll(
@@ -481,7 +481,7 @@ let make = (
 
       Js.Global.setTimeout(_ => {
         lastTabRef.current
-        ->Js.Nullable.toOption
+        ->Nullable.toOption
         ->Option.forEach(input =>
           input->scrollIntoView(_, {behavior: "smooth", block: "nearest", inline: "start"})
         )
diff --git a/src/components/HSwitchFeedBackModal.res b/src/components/HSwitchFeedBackModal.res
index 79b5a4b34..2ce9097c3 100644
--- a/src/components/HSwitchFeedBackModal.res
+++ b/src/components/HSwitchFeedBackModal.res
@@ -28,7 +28,7 @@ let make = (
     | _ => ()
     }
     setShowModal(_ => false)
-    Js.Nullable.null
+    Nullable.null
   }
 
   let showLabel = switch modalType {
diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
index 9a6e4a765..7bce066d3 100644
--- a/src/components/HSwitchSingleStatWidget.res
+++ b/src/components/HSwitchSingleStatWidget.res
@@ -36,9 +36,9 @@ let make = (
     ->Array.map(item => {
       let (x, y) = item
       if y === 0. && filterNullVals {
-        (x, Js.Nullable.null)
+        (x, Nullable.null)
       } else {
-        (x, y->Js.Nullable.return)
+        (x, y->Nullable.make)
       }
     })
   }, [data])
@@ -82,7 +82,7 @@ let make = (
           "margin": Some([0, 0, 0, 0]),
           "marginLeft": isHomePage ? Some(-5) : None,
           "marginRight": isHomePage ? Some(-5) : None,
-          "backgroundColor": Js.Nullable.null,
+          "backgroundColor": Nullable.null,
           "height": (isHomePage ? "80" : "50")->Some,
           "width": isHomePage ? None : Some("105"),
           "events": None,
diff --git a/src/components/HyperSwitchAuthWrapper.res b/src/components/HyperSwitchAuthWrapper.res
index 9f0c21dbd..c67d8e0cc 100644
--- a/src/components/HyperSwitchAuthWrapper.res
+++ b/src/components/HyperSwitchAuthWrapper.res
@@ -21,7 +21,7 @@ let make = (~children) => {
     | list{"register"} =>
       setAuthStatus(LoggedOut)
     | _ =>
-      switch LocalStorage.getItem("login")->Js.Nullable.toOption {
+      switch LocalStorage.getItem("login")->Nullable.toOption {
       | Some(token) =>
         if !(token->LogicUtils.isEmptyString) {
           setAuthStatus(LoggedIn(HyperSwitchAuthTypes.getDummyAuthInfoForToken(token)))
diff --git a/src/components/InfraCalendarList.res b/src/components/InfraCalendarList.res
index 15b976619..68e443e96 100644
--- a/src/components/InfraCalendarList.res
+++ b/src/components/InfraCalendarList.res
@@ -52,11 +52,11 @@ module YearItem = {
   @react.component
   let make = (~tempYear, ~year, ~handleChangeMonthBy, ~setCurrDate, ~tempMonth) => {
     let isSelected = year->Int.toFloat === tempYear
-    let yearRef = React.useRef(Js.Nullable.null)
+    let yearRef = React.useRef(Nullable.null)
 
     React.useEffect1(() => {
       if isSelected {
-        switch yearRef.current->Js.Nullable.toOption {
+        switch yearRef.current->Nullable.toOption {
         | Some(element) => element->scrollIntoView
         | None => ()
         }
@@ -96,11 +96,11 @@ module MonthItem = {
     ~mon: InfraCalendar.month,
   ) => {
     let isSelected = index->Int.toFloat === tempMonth
-    let monthRef = React.useRef(Js.Nullable.null)
+    let monthRef = React.useRef(Nullable.null)
 
     React.useEffect1(() => {
       if isSelected {
-        switch monthRef.current->Js.Nullable.toOption {
+        switch monthRef.current->Nullable.toOption {
         | Some(element) => element->scrollIntoView
         | None => ()
         }
diff --git a/src/components/InputFields.resi b/src/components/InputFields.resi
index 7ecba3dec..e8c43c50f 100644
--- a/src/components/InputFields.resi
+++ b/src/components/InputFields.resi
@@ -9,15 +9,15 @@ let selectInput: (
   ~input: ReactFinalForm.fieldRenderPropsInput,
   ~options: array<SelectBox.dropdownOption>,
   ~placeholder: 'a,
-  ~buttonText: Js.String2.t,
+  ~buttonText: string,
   ~deselectDisable: bool=?,
   ~isHorizontal: bool=?,
   ~disableSelect: bool=?,
   ~fullLength: bool=?,
-  ~customButtonStyle: Js.String2.t=?,
+  ~customButtonStyle: string=?,
   ~textStyle: string=?,
   ~marginTop: string=?,
-  ~customStyle: Js.String2.t=?,
+  ~customStyle: string=?,
   ~searchable: bool=?,
   ~showBorder: bool=?,
   ~showToolTipOptions: bool=?,
@@ -29,10 +29,10 @@ let selectInput: (
   ~fixedDropDownDirection: SelectBox.direction=?,
   ~customButton: React.element=?,
   ~buttonType: Button.buttonType=?,
-  ~dropdownCustomWidth: Js.String2.t=?,
+  ~dropdownCustomWidth: string=?,
   ~allowButtonTextMinWidth: bool=?,
   ~setExtSearchString: ('b => string) => unit=?,
-  ~textStyleClass: Js.String2.t=?,
+  ~textStyleClass: string=?,
   ~ellipsisOnly: bool=?,
   ~showBtnTextToolTip: bool=?,
   ~dropdownClassName: string=?,
@@ -56,7 +56,7 @@ let multiSelectInput: (
   ~options: array<SelectBox.dropdownOption>,
   ~optionSize: CheckBoxIcon.size=?,
   ~placeholder: 'a,
-  ~buttonText: Js.String2.t,
+  ~buttonText: string,
   ~buttonSize: Button.buttonSize=?,
   ~hideMultiSelectButtons: bool=?,
   ~showSelectionAsChips: bool=?,
@@ -65,9 +65,9 @@ let multiSelectInput: (
   ~searchable: bool=?,
   ~showBorder: bool=?,
   ~optionRigthElement: React.element=?,
-  ~customStyle: Js.String2.t=?,
+  ~customStyle: string=?,
   ~customMargin: string=?,
-  ~customButtonStyle: Js.String2.t=?,
+  ~customButtonStyle: string=?,
   ~hideBorder: bool=?,
   ~allSelectType: SelectBox.allSelectType=?,
   ~showToolTip: bool=?,
@@ -77,7 +77,7 @@ let multiSelectInput: (
   ~isHorizontal: bool=?,
   ~fullLength: bool=?,
   ~fixedDropDownDirection: SelectBox.direction=?,
-  ~dropdownCustomWidth: Js.String2.t=?,
+  ~dropdownCustomWidth: string=?,
   ~customMarginStyle: string=?,
   ~buttonTextWeight: string=?,
   ~marginTop: string=?,
@@ -107,22 +107,22 @@ let radioInput: (
   ~input: ReactFinalForm.fieldRenderPropsInput,
   ~options: array<SelectBox.dropdownOption>,
   ~placeholder: 'a,
-  ~buttonText: Js.String2.t,
+  ~buttonText: string,
   ~disableSelect: bool=?,
   ~optionSize: CheckBoxIcon.size=?,
   ~isHorizontal: bool=?,
   ~deselectDisable: bool=?,
-  ~customStyle: Js.String2.t=?,
+  ~customStyle: string=?,
   ~baseComponentCustomStyle: string=?,
   ~customSelectStyle: string=?,
   ~fill: string=?,
-  ~maxHeight: Js.String2.t=?,
+  ~maxHeight: string=?,
   unit,
 ) => React.element
 let textInput: (
   ~input: ReactFinalForm.fieldRenderPropsInput,
   ~placeholder: string,
-  ~description: Js.String2.t=?,
+  ~description: string=?,
   ~isDisabled: bool=?,
   ~autoFocus: bool=?,
   ~type_: string=?,
@@ -183,10 +183,10 @@ let singleDatePickerInput: (
   ~disableFutureDates: bool=?,
   ~customDisabledFutureDays: float=?,
   ~format: string=?,
-  ~currentDateHourFormat: Js.String2.t=?,
-  ~currentDateMinuteFormat: Js.String2.t=?,
-  ~currentDateSecondsFormat: Js.String2.t=?,
-  ~customButtonStyle: Js.String2.t=?,
+  ~currentDateHourFormat: string=?,
+  ~currentDateMinuteFormat: string=?,
+  ~currentDateSecondsFormat: string=?,
+  ~customButtonStyle: string=?,
   ~newThemeCustomButtonStyle: string=?,
   ~calendarContaierStyle: string=?,
   ~buttonSize: Button.buttonSize=?,
@@ -210,7 +210,7 @@ let dateRangeField: (
   ~showSeconds: bool=?,
   ~hideDate: bool=?,
   ~selectStandardTime: bool=?,
-  ~customButtonStyle: Js.String2.t=?,
+  ~customButtonStyle: string=?,
   ~isTooltipVisible: bool=?,
   unit,
 ) => comboCustomInputRecord
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
index 5651374ae..667f77515 100644
--- a/src/components/LoadedTable.res
+++ b/src/components/LoadedTable.res
@@ -1,4 +1,4 @@
-external toJson: Js.Nullable.t<'a> => JSON.t = "%identity"
+external toJson: Nullable.t<'a> => JSON.t = "%identity"
 open DynamicTableUtils
 open NewThemeUtils
 type sortTyp = ASC | DSC
@@ -454,7 +454,7 @@ let make = (
           ->filteredData(columnFilterCopy, visibleColumns, entity, dateFormatConvertor)
           ->Array.forEach(
             rows => {
-              switch rows->Js.Nullable.toOption {
+              switch rows->Nullable.toOption {
               | Some(rows) =>
                 let value = switch entity.getCell(rows, item) {
                 | CustomCell(_, str)
@@ -558,7 +558,7 @@ let make = (
   let sNoArr = Dict.get(columnFilter, "s_no")->Option.getOr([])
   // filtering for SNO
   let nullableRows = filteredData->Array.mapWithIndex((nullableItem, index) => {
-    let actualRows = switch nullableItem->Js.Nullable.toOption {
+    let actualRows = switch nullableItem->Nullable.toOption {
     | Some(item) => {
         let visibleCell =
           visibleColumns
@@ -657,7 +657,7 @@ let make = (
 
   let handleRowClick = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
@@ -681,7 +681,7 @@ let make = (
 
   let onRowDoubleClick = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
@@ -705,7 +705,7 @@ let make = (
 
   let handleMouseEnter = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
@@ -720,7 +720,7 @@ let make = (
 
   let handleMouseLeaeve = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
@@ -842,7 +842,7 @@ let make = (
           | Some(renderer) =>
             <div className="overflow-auto flex flex-col">
               {paginatedData
-              ->Belt.Array.keepMap(Js.Nullable.toOption)
+              ->Belt.Array.keepMap(Nullable.toOption)
               ->Array.mapWithIndex((item, rowIndex) => {
                 renderer(~index={rowIndex + offset}, ~item, ~onRowClick=handleRowClick)
               })
diff --git a/src/components/LoadedTable.resi b/src/components/LoadedTable.resi
index f593cdd2f..5080f72ba 100644
--- a/src/components/LoadedTable.resi
+++ b/src/components/LoadedTable.resi
@@ -1,4 +1,4 @@
-external toJson: Js.Nullable.t<'a> => JSON.t = "%identity"
+external toJson: Nullable.t<'a> => JSON.t = "%identity"
 type sortTyp = ASC | DSC
 type sortOb = {sortKey: string, sortType: sortTyp}
 type checkBoxProps = {
@@ -23,7 +23,7 @@ let table_pageDetails: Recoil.recoilAtom<RescriptCore.Dict.t<pageDetails>>
 let make: (
   ~visibleColumns: array<'a>=?,
   ~defaultSort: Table.sortedObject=?,
-  ~title: Js.String2.t,
+  ~title: string,
   ~titleSize: NewThemeUtils.headingSize=?,
   ~description: string=?,
   ~tableActions: React.element=?,
@@ -33,7 +33,7 @@ let make: (
   ~clearFormattedDataButton: React.element=?,
   ~bottomActions: React.element=?,
   ~showSerialNumber: bool=?,
-  ~actualData: array<Js.Nullable.t<'b>>,
+  ~actualData: array<Nullable.t<'b>>,
   ~totalResults: int,
   ~resultsPerPage: int,
   ~offset: int,
@@ -58,7 +58,7 @@ let make: (
   ~tableDataLoading: bool=?,
   ~dataLoading: bool=?,
   ~advancedSearchComponent: React.element=?,
-  ~setData: ('e => option<array<Js.Nullable.t<'b>>>) => unit=?,
+  ~setData: ('e => option<array<Nullable.t<'b>>>) => unit=?,
   ~setSummary: ('f => EntityType.summary) => unit=?,
   ~customGetObjects: JSON.t => array<'g>=?,
   ~dataNotFoundComponent: React.element=?,
@@ -68,12 +68,12 @@ let make: (
   ~tableBorderClass: string=?,
   ~tableDataBorderClass: string=?,
   ~collapseTableRow: bool=?,
-  ~getRowDetails: Js.Nullable.t<'b> => React.element=?,
+  ~getRowDetails: Nullable.t<'b> => React.element=?,
   ~onMouseEnter: 'b => unit=?,
   ~onMouseLeave: 'b => unit=?,
   ~frozenUpto: int=?,
   ~heightHeadingClass: string=?,
-  ~highlightText: Js.String.t=?,
+  ~highlightText: string=?,
   ~enableEqualWidthCol: bool=?,
   ~clearFormatting: bool=?,
   ~rowHeightClass: string=?,
diff --git a/src/components/LocalFilters.res b/src/components/LocalFilters.res
index bfd0a9b5a..6021729be 100644
--- a/src/components/LocalFilters.res
+++ b/src/components/LocalFilters.res
@@ -14,7 +14,7 @@ module CheckLocalFilters = {
   ) => {
     let isMobileView = MatchMedia.useMobileChecker()
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
     let values = formState.values
 
diff --git a/src/components/Navbar.res b/src/components/Navbar.res
index cb69a1287..05d8d46e7 100644
--- a/src/components/Navbar.res
+++ b/src/components/Navbar.res
@@ -40,7 +40,7 @@ let make = (
 
   let leftPortalName = isMobileView ? "mobileNavbarTitle" : "desktopNavbarLeft"
 
-  let ref = React.useRef(Js.Nullable.null)
+  let ref = React.useRef(Nullable.null)
   OutsideClick.useOutsideClick(
     ~refs=ArrayOfRef([ref]),
     ~isActive=isAppearancePopupOpen,
diff --git a/src/components/ReactWindowTable.res b/src/components/ReactWindowTable.res
index 6608da2bb..845af554b 100644
--- a/src/components/ReactWindowTable.res
+++ b/src/components/ReactWindowTable.res
@@ -1,5 +1,5 @@
 open TableUtils
-external toJson: Js.Nullable.t<'a> => JSON.t = "%identity"
+external toJson: Nullable.t<'a> => JSON.t = "%identity"
 type checkBoxProps = {
   showCheckBox: bool,
   selectedData: array<JSON.t>,
@@ -243,13 +243,13 @@ module ReactWindowTableComponent = {
     ~customCellColor="",
     ~showCheckBox=false,
   ) => {
-    let actualData: option<array<Js.Nullable.t<'t>>> = actualData
+    let actualData: option<array<Nullable.t<'t>>> = actualData
 
     let getRowDetails = (rowIndex: int) => {
       switch actualData {
       | Some(actualData) =>
         switch getRowDetails {
-        | Some(fn) => fn(actualData->Array.get(rowIndex)->Option.getOr(Js.Nullable.null))
+        | Some(fn) => fn(actualData->Array.get(rowIndex)->Option.getOr(Nullable.null))
         | None => React.null
         }
       | None => React.null
@@ -624,7 +624,7 @@ let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
 
 @react.component
 let make = (
-  ~actualData: array<Js.Nullable.t<'t>>,
+  ~actualData: array<Nullable.t<'t>>,
   ~defaultSort=?,
   ~title,
   ~visibleColumns=?,
@@ -793,7 +793,7 @@ let make = (
             ->filteredData(columnFilterCopy, visibleColumns, entity, dateFormatConvertor)
             ->Belt.Array.keepMap(
               item => {
-                item->Js.Nullable.toOption
+                item->Nullable.toOption
               },
             )
           switch columToConsider {
@@ -926,7 +926,7 @@ let make = (
   let rows =
     filteredData
     ->Array.mapWithIndex((nullableItem, index) => {
-      let actualRows = switch nullableItem->Js.Nullable.toOption {
+      let actualRows = switch nullableItem->Nullable.toOption {
       | Some(item) => {
           let visibleCell =
             visibleColumns
@@ -1028,7 +1028,7 @@ let make = (
 
   let handleRowClick = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
@@ -1052,7 +1052,7 @@ let make = (
 
   let handleMouseEnter = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
@@ -1067,7 +1067,7 @@ let make = (
 
   let handleMouseLeave = React.useCallback4(index => {
     let actualVal = switch filteredData[index] {
-    | Some(ele) => ele->Js.Nullable.toOption
+    | Some(ele) => ele->Nullable.toOption
     | None => None
     }
     switch actualVal {
diff --git a/src/components/RemoteFilter.res b/src/components/RemoteFilter.res
index cc09b83a3..e51741eab 100644
--- a/src/components/RemoteFilter.res
+++ b/src/components/RemoteFilter.res
@@ -6,8 +6,7 @@ module ClearForm = {
     let form = ReactFinalForm.useForm()
     <div className="ml-2">
       <Button
-        text="Clear Form"
-        onClick={e => form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)}
+        text="Clear Form" onClick={e => form.reset(JSON.Encode.object(Dict.make())->Nullable.make)}
       />
     </div>
   }
@@ -34,7 +33,7 @@ module ModalUI = {
             buttonType=SecondaryFilled
             buttonSize=Small
             onClick={_ev => {
-              form.reset(initialValueJson->Js.Nullable.return)
+              form.reset(initialValueJson->Nullable.make)
               setShowModal(_ => false)
             }}
           />
@@ -50,7 +49,7 @@ module ModalUI = {
       childClass="p-2 m-2"
       modalClass="w-full md:w-2/3 mx-auto mt-0"
       onCloseClickCustomFun={_ev => {
-        form.reset(initialValueJson->Js.Nullable.return)
+        form.reset(initialValueJson->Nullable.make)
         setShowModal(_ => false)
       }}
       modalFooter=footerUi>
@@ -123,7 +122,7 @@ module ClearFilters = {
     let leftIcon: Button.iconType = CustomIcon(<Icon name="clear_filter_img" size=14 />)
 
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values", "initialValues"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values", "initialValues"])->Nullable.make,
     )
 
     let handleClearFilter = switch clearFilters {
@@ -193,7 +192,7 @@ module AnalyticsClearFilters = {
   let make = (~defaultFilterKeys=[], ~clearFilters=?, ~outsidefilter=false) => {
     let {updateExistingKeys} = React.useContext(FilterContext.filterContext)
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values", "initialValues"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values", "initialValues"])->Nullable.make,
     )
 
     let handleClearFilter = switch clearFilters {
@@ -273,7 +272,7 @@ module CheckCustomFilters = {
     ~showSelectFiltersSearch,
   ) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
     let values = formState.values
 
@@ -323,7 +322,7 @@ module AutoSubmitter = {
   @react.component
   let make = (~showModal, ~autoApply, ~submit, ~defaultFilterKeys) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values", "dirtyFields"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values", "dirtyFields"])->Nullable.make,
     )
 
     let values = formState.values
@@ -377,11 +376,7 @@ module ApplyFilterButton = {
       ->Dict.fromArray
 
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription([
-        "values",
-        "dirtyFields",
-        "initialValues",
-      ])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values", "dirtyFields", "initialValues"])->Nullable.make,
     )
 
     let formCurrentValues =
@@ -456,7 +451,7 @@ module FilterModal = {
   @react.component
   let make = (~selectedFiltersList: array<FormRenderer.fieldInfoType>, ~showAllFilter) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values", "dirtyFields"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values", "dirtyFields"])->Nullable.make,
     )
 
     let formCurrentValues = formState.values->LogicUtils.getDictFromJsonObject
@@ -724,7 +719,7 @@ let make = (
     open Promise
     setShowFiltersModal(_ => false)
     setShowModal(_ => false)
-    Js.Nullable.null->resolve
+    Nullable.null->resolve
   }
 
   let addFilters = newlyAdded => {
diff --git a/src/components/RemoteFiltersUtils.res b/src/components/RemoteFiltersUtils.res
index 0c3aaeb54..2cde5fbff 100644
--- a/src/components/RemoteFiltersUtils.res
+++ b/src/components/RemoteFiltersUtils.res
@@ -217,7 +217,7 @@ let getInitialValuesFromUrl = (
 }
 
 let getLocalFiltersData = (
-  ~resArr: array<Js.Nullable.t<'t>>,
+  ~resArr: array<Nullable.t<'t>>,
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
   ~dateRangeFilterDict: Dict.t<JSON.t>,
diff --git a/src/components/RippleEffectBackground.res b/src/components/RippleEffectBackground.res
index 50712465f..fd3a18706 100644
--- a/src/components/RippleEffectBackground.res
+++ b/src/components/RippleEffectBackground.res
@@ -18,10 +18,10 @@ type domObj = {
 @send
 external removeEventListener: (Dom.element, string, event => unit) => unit = "removeEventListener"
 
-let useLinearRippleHook = (ref: React.ref<Js.Nullable.t<Dom.element>>, shouldRipple) => {
+let useLinearRippleHook = (ref: React.ref<Nullable.t<Dom.element>>, shouldRipple) => {
   React.useEffect1(() => {
     let handleMouseOver = _ev => {
-      switch ref.current->Js.Nullable.toOption {
+      switch ref.current->Nullable.toOption {
       | Some(splash) => {
           let link = document->DOMUtils.createElement("div")
           link->setAttribute(
@@ -42,7 +42,7 @@ let useLinearRippleHook = (ref: React.ref<Js.Nullable.t<Dom.element>>, shouldRip
       }
     }
 
-    switch ref.current->Js.Nullable.toOption {
+    switch ref.current->Nullable.toOption {
     | Some(elem) =>
       if shouldRipple {
         elem->addEventListener("mousedown", handleMouseOver)
@@ -60,10 +60,10 @@ let useLinearRippleHook = (ref: React.ref<Js.Nullable.t<Dom.element>>, shouldRip
   }, [ref])
 }
 
-let useHorizontalRippleHook = (ref: React.ref<Js.Nullable.t<Dom.element>>) => {
+let useHorizontalRippleHook = (ref: React.ref<Nullable.t<Dom.element>>) => {
   React.useEffect1(() => {
     let handleMouseOver = _ev => {
-      switch ref.current->Js.Nullable.toOption {
+      switch ref.current->Nullable.toOption {
       | Some(splash) => {
           let link = document->DOMUtils.createElement("div")
           link->setAttribute(
@@ -93,7 +93,7 @@ let useHorizontalRippleHook = (ref: React.ref<Js.Nullable.t<Dom.element>>) => {
       }
     }
 
-    switch ref.current->Js.Nullable.toOption {
+    switch ref.current->Nullable.toOption {
     | Some(elem) =>
       elem->addEventListener("mousedown", handleMouseOver)
 
diff --git a/src/components/SearchInput.res b/src/components/SearchInput.res
index cf977ae47..323777ded 100644
--- a/src/components/SearchInput.res
+++ b/src/components/SearchInput.res
@@ -20,7 +20,7 @@ let make = (
   let (prevVal, setPrevVal) = React.useState(_ => "")
   let showPopUp = PopUpState.useShowPopUp()
 
-  let defaultRef = React.useRef(Js.Nullable.null)
+  let defaultRef = React.useRef(Nullable.null)
   let searchRef = searchRef->Option.getOr(defaultRef)
 
   let handleSearch = e => {
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 07fed56aa..be73fbef3 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -144,7 +144,7 @@ module ListItem = {
     } else {
       onClick
     }
-    let parentRef = React.useRef(Js.Nullable.null)
+    let parentRef = React.useRef(Nullable.null)
 
     let textColor = "text-jp-gray-900 dark:text-jp-gray-text_darktheme"
 
@@ -595,7 +595,7 @@ module BaseSelect = {
           preservedAppliedOptions->Array.includes(val) && acc
         })
 
-    let searchRef = React.useRef(Js.Nullable.null)
+    let searchRef = React.useRef(Nullable.null)
     let selectBtnRef = insertselectBtnRef->Option.map(ReactDOM.Ref.callbackDomRef)
     let clearBtnRef = insertclearBtnRef->Option.map(ReactDOM.Ref.callbackDomRef)
     let (isChooseAllToggleSelected, setChooseAllToggleSelected) = React.useState(() => false)
@@ -615,7 +615,7 @@ module BaseSelect = {
     }
 
     React.useEffect2(() => {
-      searchRef.current->Js.Nullable.toOption->Option.forEach(input => input->focus)
+      searchRef.current->Nullable.toOption->Option.forEach(input => input->focus)
       None
     }, (searchRef.current, showDropDown))
 
@@ -929,7 +929,7 @@ module BaseSelectButton = {
     let (searchString, setSearchString) = React.useState(() => "")
     let (itemdata, setItemData) = React.useState(() => "")
     let (assignButtonState, setAssignButtonState) = React.useState(_ => false)
-    let searchRef = React.useRef(Js.Nullable.null)
+    let searchRef = React.useRef(Nullable.null)
     let onItemClick = (itemData, _ev) => {
       if !disableSelect {
         let isSelected = value->JSON.Decode.string->Option.mapOr(false, str => itemData === str)
@@ -951,7 +951,7 @@ module BaseSelectButton = {
     }
 
     React.useEffect2(() => {
-      searchRef.current->Js.Nullable.toOption->Option.forEach(input => input->focus)
+      searchRef.current->Nullable.toOption->Option.forEach(input => input->focus)
       None
     }, (searchRef.current, showDropDown))
 
@@ -1233,7 +1233,7 @@ module BaseRadio = {
     }, [searchString])
 
     OutsideClick.useOutsideClick(
-      ~refs={ArrayOfRef([dropdownRef->Option.getOr(React.useRef(Js.Nullable.null))])},
+      ~refs={ArrayOfRef([dropdownRef->Option.getOr(React.useRef(Nullable.null))])},
       ~isActive=showDropDown,
       ~callback=() => {
         setSearchString(_ => "")
@@ -1279,7 +1279,7 @@ module BaseRadio = {
     let widthClass =
       isMobileView || !isSearchable ? "w-auto" : fullLength ? "w-full" : dropdownCustomWidth
 
-    let searchRef = React.useRef(Js.Nullable.null)
+    let searchRef = React.useRef(Nullable.null)
 
     let width = isHorizontal || !isDropDown || customStyle === "" ? widthClass : customStyle
 
@@ -1288,7 +1288,7 @@ module BaseRadio = {
     let textIconPresent = options->Array.some(op => op.icon !== NoIcon)
 
     React.useEffect2(() => {
-      searchRef.current->Js.Nullable.toOption->Option.forEach(input => input->focus)
+      searchRef.current->Nullable.toOption->Option.forEach(input => input->focus)
       None
     }, (searchRef.current, showDropDown))
 
@@ -1524,9 +1524,9 @@ module BaseDropdown = {
     let (showDropDown, setShowDropDown) = React.useState(() => false)
     let (isGrowDown, setIsGrowDown) = React.useState(_ => false)
     let (isInitialRender, setIsInitialRender) = React.useState(_ => true)
-    let selectBoxRef = React.useRef(Js.Nullable.null)
-    let dropdownRef = React.useRef(Js.Nullable.null)
-    let selectBtnRef = React.useRef(Js.Nullable.null)
+    let selectBoxRef = React.useRef(Nullable.null)
+    let dropdownRef = React.useRef(Nullable.null)
+    let selectBtnRef = React.useRef(Nullable.null)
     let (preservedAppliedOptions, setPreservedAppliedOptions) = React.useState(_ =>
       newInputSelect.value->LogicUtils.getStrArryFromJson
     )
@@ -1540,7 +1540,7 @@ module BaseDropdown = {
       setPreservedAppliedOptions(_ => newInputSelect.value->LogicUtils.getStrArryFromJson)
     }
 
-    let clearBtnRef = React.useRef(Js.Nullable.null)
+    let clearBtnRef = React.useRef(Nullable.null)
     let insertselectBtnRef = element => {
       if !Js.Nullable.isNullable(element) {
         selectBtnRef.current = element
@@ -1613,7 +1613,7 @@ module BaseDropdown = {
       | Some(dropDownDirection) => dropDownDirection
       | None =>
         selectBoxRef.current
-        ->Js.Nullable.toOption
+        ->Nullable.toOption
         ->Option.flatMap(elem => elem->getClientRects->toDict->Dict.get("0"))
         ->Option.flatMap(firstEl => {
           let bottomVacent = Window.innerHeight - firstEl["bottom"]->Float.toInt > 375
diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi
index 9edd1526e..f3062fc6a 100644
--- a/src/components/SelectBox.resi
+++ b/src/components/SelectBox.resi
@@ -21,9 +21,9 @@ module ListItem: {
     ~isPrevSelected: bool=?,
     ~isNextSelected: bool=?,
     ~onClick: JsxEvent.Mouse.t => unit,
-    ~text: Js.String2.t,
+    ~text: string,
     ~fill: string=?,
-    ~labelValue: Js.String2.t=?,
+    ~labelValue: string=?,
     ~isDisabled: bool=?,
     ~icon: Button.iconType,
     ~leftVacennt: bool=?,
@@ -31,7 +31,7 @@ module ListItem: {
     ~customStyle: string=?,
     ~serialNumber: option<string>=?,
     ~isMobileView: bool=?,
-    ~description: option<Js.String2.t>=?,
+    ~description: option<string>=?,
     ~customLabelStyle: option<string>=?,
     ~customMarginStyle: string=?,
     ~listFlexDirection: string=?,
@@ -203,7 +203,7 @@ module BaseRadio: {
     ~descriptionOnHover: bool=?,
     ~addDynamicValue: bool=?,
     ~dropdownCustomWidth: string=?,
-    ~dropdownRef: React.ref<Js.Nullable.t<Dom.element>>=?,
+    ~dropdownRef: React.ref<Nullable.t<Dom.element>>=?,
     ~showMatchingRecordsText: bool=?,
     ~fullLength: bool=?,
     ~selectedString: string=?,
diff --git a/src/components/Table.res b/src/components/Table.res
index 28edcfd03..6a5001678 100644
--- a/src/components/Table.res
+++ b/src/components/Table.res
@@ -117,7 +117,7 @@ module TableRow = {
     }, (onMouseLeave, actualIndex))
     let colsLen = item->Array.length
     let cursorClass = onRowClickPresent ? "cursor-pointer" : ""
-    let rowRef = React.useRef(Js.Nullable.null)
+    let rowRef = React.useRef(Nullable.null)
     let coloredRow =
       // colour based on custom cell's value
       item
@@ -663,7 +663,7 @@ let make = (
 ) => {
   let isMobileView = MatchMedia.useMobileChecker()
   let rowInfo: array<array<cell>> = rows
-  let actualData: option<array<Js.Nullable.t<'t>>> = actualData
+  let actualData: option<array<Nullable.t<'t>>> = actualData
   let numberOfCols = heading->Array.length
   open Webapi
   let totalTableWidth =
@@ -697,7 +697,7 @@ let make = (
     switch actualData {
     | Some(actualData) =>
       switch getRowDetails {
-      | Some(fn) => fn(actualData->Array.get(rowIndex)->Option.getOr(Js.Nullable.null))
+      | Some(fn) => fn(actualData->Array.get(rowIndex)->Option.getOr(Nullable.null))
       | None => React.null
       }
     | None => React.null
diff --git a/src/components/Table.resi b/src/components/Table.resi
index 61cee6f0a..5826f1b7a 100644
--- a/src/components/Table.resi
+++ b/src/components/Table.resi
@@ -1,5 +1,5 @@
 let regex: string => Js.Re.t
-let highlightedText: (Js.String.t, Js.String.t) => React.element
+let highlightedText: (string, string) => React.element
 type labelColor = TableUtils.labelColor =
   | LabelGreen
   | LabelRed
@@ -147,7 +147,7 @@ module TableRow: {
     ~expandedRow: unit => React.element,
     ~onMouseEnter: option<int => unit>,
     ~onMouseLeave: option<int => unit>,
-    ~highlightText: Js.String.t,
+    ~highlightText: string,
     ~clearFormatting: bool=?,
     ~rowHeightClass: string=?,
     ~rowCustomClass: string=?,
@@ -260,12 +260,12 @@ let make: (
   ~tableBorderClass: string=?,
   ~tableDataBorderClass: string=?,
   ~collapseTableRow: bool=?,
-  ~getRowDetails: Js.Nullable.t<'b> => React.element=?,
-  ~actualData: array<Js.Nullable.t<'b>>=?,
+  ~getRowDetails: Nullable.t<'b> => React.element=?,
+  ~actualData: array<Nullable.t<'b>>=?,
   ~onExpandClickData: 'onExpandClickData=?,
   ~onMouseEnter: int => unit=?,
   ~onMouseLeave: int => unit=?,
-  ~highlightText: Js.String.t=?,
+  ~highlightText: string=?,
   ~heightHeadingClass: string=?,
   ~frozenUpto: int=?,
   ~clearFormatting: bool=?,
diff --git a/src/components/TableLocalFilters.res b/src/components/TableLocalFilters.res
index 47219675c..27ea0a7f3 100644
--- a/src/components/TableLocalFilters.res
+++ b/src/components/TableLocalFilters.res
@@ -10,7 +10,7 @@ module RangeSliderLocalFilter = {
     ~minSlide: ReactFinalForm.fieldRenderPropsInput,
   ) => {
     let (lclFiltrState, setLclFltrState) = React.useContext(DatatableContext.datatableContext)
-    let dropdownRef = React.useRef(Js.Nullable.null)
+    let dropdownRef = React.useRef(Nullable.null)
     let (showDropDown, setShowDropDown) = React.useState(() => false)
     let selectedFilterVal = Dict.get(lclFiltrState, filterKey)
     let filterIconName = "bars-filter"
diff --git a/src/components/TableUtils.resi b/src/components/TableUtils.resi
index 12549a7a2..8fb6d0fc1 100644
--- a/src/components/TableUtils.resi
+++ b/src/components/TableUtils.resi
@@ -1,5 +1,5 @@
 let regex: string => Js.Re.t
-let highlightedText: (Js.String.t, Js.String.t) => React.element
+let highlightedText: (string, string) => React.element
 type labelColor =
   | LabelGreen
   | LabelRed
@@ -101,9 +101,9 @@ module LabelCell: {
   @react.component
   let make: (
     ~labelColor: labelColor,
-    ~text: Js.String.t,
+    ~text: string,
     ~labelMargin: string=?,
-    ~highlightText: Js.String.t=?,
+    ~highlightText: string=?,
     ~fontStyle: string=?,
     ~showIcon: bool=?,
   ) => React.element
@@ -140,7 +140,7 @@ module MoneyCell: {
 }
 module LinkCell: {
   @react.component
-  let make: (~data: Js.String.t, ~trimLength: int=?) => React.element
+  let make: (~data: string, ~trimLength: int=?) => React.element
 }
 module DateCell: {
   // let getFormattedDate: (string, string) => string
@@ -150,7 +150,7 @@ module DateCell: {
     ~isCard: bool=?,
     ~textStyle: string=?,
     ~textAlign: textAlign=?,
-    ~customDateStyle: Js.String2.t=?,
+    ~customDateStyle: string=?,
     ~hideTime: bool=?,
   ) => React.element
 }
@@ -161,12 +161,12 @@ module StartEndDateCell: {
 module EllipsisText: {
   @react.component
   let make: (
-    ~text: Js.String2.t,
+    ~text: string,
     ~width: string,
-    ~highlightText: Js.String.t=?,
+    ~highlightText: string=?,
     ~isEllipsisTextRelative: bool=?,
     ~ellipseClass: string=?,
-    ~ellipsisIdentifier: Js.String2.t=?,
+    ~ellipsisIdentifier: string=?,
     ~ellipsisThreshold: int=?,
     ~toolTipPosition: ToolTip.toolTipPosition=?,
   ) => React.element
@@ -174,9 +174,9 @@ module EllipsisText: {
 module TrimmedText: {
   @react.component
   let make: (
-    ~text: Js.String2.t,
+    ~text: string,
     ~width: string,
-    ~highlightText: Js.String.t=?,
+    ~highlightText: string=?,
     ~hideShowMore: bool=?,
   ) => React.element
 }
@@ -196,8 +196,8 @@ module TableCell: {
     ~fontBold: bool=?,
     ~labelMargin: labelMargin=?,
     ~customMoneyStyle: string=?,
-    ~customDateStyle: Js.String2.t=?,
-    ~highlightText: Js.String.t=?,
+    ~customDateStyle: string=?,
+    ~highlightText: string=?,
     ~hideShowMore: bool=?,
     ~clearFormatting: bool=?,
     ~fontStyle: string=?,
@@ -213,8 +213,8 @@ module NewTableCell: {
     ~fontBold: bool=?,
     ~labelMargin: labelMargin=?,
     ~customMoneyStyle: string=?,
-    ~customDateStyle: Js.String2.t=?,
-    ~highlightText: Js.String.t=?,
+    ~customDateStyle: string=?,
+    ~highlightText: string=?,
     ~hideShowMore: bool=?,
     ~clearFormatting: bool=?,
     ~fontStyle: string=?,
diff --git a/src/components/Tabs.res b/src/components/Tabs.res
index 60a8822df..9990ebdb8 100644
--- a/src/components/Tabs.res
+++ b/src/components/Tabs.res
@@ -40,7 +40,7 @@ module TabInfo = {
     ~showBottomBorder=true,
     ~onTabSelection=() => (),
   ) => {
-    let tabRef = React.useRef(Js.Nullable.null)
+    let tabRef = React.useRef(Nullable.null)
     let fontClass = "font-inter-style"
 
     let defaultBorderClass = "border-0"
@@ -77,7 +77,7 @@ module TabInfo = {
     React.useEffect2(() => {
       if isSelected && isScrollIntoViewRequired {
         tabRef.current
-        ->Js.Nullable.toOption
+        ->Nullable.toOption
         ->Option.forEach(input =>
           input->scrollIntoView(_, {behavior: "smooth", block: "nearest", inline: "nearest"})
         )
@@ -108,7 +108,7 @@ module IndicationArrow = {
     let onClick = {
       _ev =>
         refElement.current
-        ->Js.Nullable.toOption
+        ->Nullable.toOption
         ->Option.forEach(input =>
           input->scrollIntoView(_, {behavior: "smooth", block: "nearest", inline: "start"})
         )
@@ -126,8 +126,8 @@ module IndicationArrow = {
   }
 }
 
-let getBoundingRectInfo = (ref: React.ref<Js.Nullable.t<Dom.element>>, getter) => {
-  ref.current->Js.Nullable.toOption->Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
+let getBoundingRectInfo = (ref: React.ref<Nullable.t<Dom.element>>, getter) => {
+  ref.current->Nullable.toOption->Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
 }
 
 @react.component
@@ -180,9 +180,9 @@ let make = (
   let (_isLeftArrowVisible, setIsLeftArrowVisible) = React.useState(() => false)
   let (_isRightArrowVisible, setIsRightArrowVisible) = React.useState(() => true)
 
-  let firstTabRef = React.useRef(Js.Nullable.null)
-  let scrollRef = React.useRef(Js.Nullable.null)
-  let lastTabRef = React.useRef(Js.Nullable.null)
+  let firstTabRef = React.useRef(Nullable.null)
+  let scrollRef = React.useRef(Nullable.null)
+  let lastTabRef = React.useRef(Nullable.null)
   let numberOfTabs = Array.length(tabs)
   let onScroll = _ev => {
     let leftVal = firstTabRef->getBoundingRectInfo(val => val.x)
diff --git a/src/components/Tabs.resi b/src/components/Tabs.resi
index 291da2581..64d173608 100644
--- a/src/components/Tabs.resi
+++ b/src/components/Tabs.resi
@@ -45,7 +45,7 @@ module IndicationArrow: {
     ~isVisible: bool,
   ) => React.element
 }
-let getBoundingRectInfo: (React.ref<Js.Nullable.t<Dom.element>>, boundingClient => int) => int
+let getBoundingRectInfo: (React.ref<Nullable.t<Dom.element>>, boundingClient => int) => int
 @react.component
 let make: (
   ~tabs: array<tab>,
diff --git a/src/components/form/FormRenderer.res b/src/components/form/FormRenderer.res
index 11cb0cf5f..b3661b2a6 100644
--- a/src/components/form/FormRenderer.res
+++ b/src/components/form/FormRenderer.res
@@ -8,7 +8,7 @@ type inputFieldType = {
   isRequired: bool,
   @as("type") type_: string,
   customInput: customInputFn,
-  validate: option<(option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>>,
+  validate: option<(option<string>, JSON.t) => Js.Promise.t<Nullable.t<string>>>,
 }
 type fieldInfoType = {
   label: string,
@@ -36,7 +36,7 @@ let makeInputFieldInfo = (
   ~parse=?,
   ~type_="text",
   ~isRequired=false,
-  ~validate: option<(option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
+  ~validate: option<(option<string>, JSON.t) => Js.Promise.t<Nullable.t<string>>>=?,
   (),
 ) => {
   let label = label->Option.getOr(name)
@@ -140,7 +140,7 @@ let makeFieldInfo = (
   ~type_="text",
   ~isRequired=false,
   ~fieldPortalKey: option<string>=?,
-  ~validate: option<(option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>>=?,
+  ~validate: option<(option<string>, JSON.t) => Js.Promise.t<Nullable.t<string>>>=?,
   (),
 ) => {
   let label = label->Option.getOr(name)
@@ -285,9 +285,9 @@ module FieldError = {
     let errorTextStyle = "text-red-950 dark:text-red-400 text-fs-10 font-medium ml-1"
     let error = if meta.touched || alwaysShow || (showErrorOnChange && meta.modified) {
       if !(meta.submitError->Js.Nullable.isNullable) && !meta.dirtySinceLastSubmit {
-        Js.Nullable.toOption(meta.submitError)
+        Nullable.toOption(meta.submitError)
       } else {
-        Js.Nullable.toOption(meta.error)
+        Nullable.toOption(meta.error)
       }
     } else {
       None
@@ -528,7 +528,7 @@ module FormError = {
 
     React.useEffect0(() => {
       let unsubscribe = form.subscribe(formState => {
-        setSubmitErrors(_ => formState.submitErrors->Js.Nullable.toOption)
+        setSubmitErrors(_ => formState.submitErrors->Nullable.toOption)
 
         ()
       }, subscriptionJson)
@@ -598,7 +598,7 @@ module SubmitButton = {
     })
 
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      dict->JSON.Encode.object->Js.Nullable.return,
+      dict->JSON.Encode.object->Nullable.make,
     )
     let {hasValidationErrors, hasSubmitErrors, submitting, dirtySinceLastSubmit, errors} = formState
 
@@ -794,10 +794,7 @@ let make = (
   ~initialValues,
   ~validate=?,
   ~submitButtonText=?,
-  ~onSubmit: (
-    ReactFinalForm.formValues,
-    ReactFinalForm.formApi,
-  ) => Promise.t<Js.Nullable.t<JSON.t>>,
+  ~onSubmit: (ReactFinalForm.formValues, ReactFinalForm.formApi) => Promise.t<Nullable.t<JSON.t>>,
   ~fieldsWrapperClass="",
   ~fieldWrapperClass="",
   ~formClass="",
diff --git a/src/components/form/NumericTextInput.res b/src/components/form/NumericTextInput.res
index 5c8f20955..0edebe5bc 100644
--- a/src/components/form/NumericTextInput.res
+++ b/src/components/form/NumericTextInput.res
@@ -26,11 +26,11 @@ let make = (
   ~removeValidationCheck=?,
 ) => {
   let (localStrValue, setLocalStrValue) = React.useState(() => input.value)
-  let inputRef = React.useRef(Js.Nullable.null)
+  let inputRef = React.useRef(Nullable.null)
   React.useEffect2(() => {
     switch widthMatchwithPlaceholderLength {
     | Some(length) =>
-      switch inputRef.current->Js.Nullable.toOption {
+      switch inputRef.current->Nullable.toOption {
       | Some(elem) =>
         let size =
           elem
diff --git a/src/components/form/PasswordStrengthInputAsChips.res b/src/components/form/PasswordStrengthInputAsChips.res
index aaae9ad3b..77a353c13 100644
--- a/src/components/form/PasswordStrengthInputAsChips.res
+++ b/src/components/form/PasswordStrengthInputAsChips.res
@@ -54,7 +54,7 @@ let make = (
   }
   let (passwordChecks, setPasswordChecks) = React.useState(_ => initialPasswordState)
   let (showValidation, setShowValidation) = React.useState(_ => false)
-  let modalRef = React.useRef(Js.Nullable.null)
+  let modalRef = React.useRef(Nullable.null)
 
   OutsideClick.useOutsideClick(
     ~refs={ArrayOfRef([modalRef])},
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index 21c4f4028..226a0b538 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -60,12 +60,12 @@ let make = (
 
   let {isFirst, isLast} = React.useContext(ButtonGroupContext.buttonGroupContext)
   let (showPassword, setShowPassword) = React.useState(_ => false)
-  let inputRef = React.useRef(Js.Nullable.null)
+  let inputRef = React.useRef(Nullable.null)
 
   React.useEffect2(() => {
     switch widthMatchwithPlaceholderLength {
     | Some(length) =>
-      switch inputRef.current->Js.Nullable.toOption {
+      switch inputRef.current->Nullable.toOption {
       | Some(elem) =>
         let size =
           elem
@@ -109,7 +109,7 @@ let make = (
         let keyDownFn = ev => {
           if func(ev) {
             ev->ReactEvent.Keyboard.preventDefault
-            switch inputRef.current->Js.Nullable.toOption {
+            switch inputRef.current->Nullable.toOption {
             | Some(elem) => elem->focus
             | None => ()
             }
diff --git a/src/components/portal/PortalCapture.res b/src/components/portal/PortalCapture.res
index 968eb5fb1..485e840ac 100644
--- a/src/components/portal/PortalCapture.res
+++ b/src/components/portal/PortalCapture.res
@@ -1,7 +1,7 @@
 @react.component
 let make = React.memo((~name: string, ~customStyle="") => {
   let setPortalNodes = Recoil.useSetRecoilState(PortalState.portalNodes)
-  let setDiv = React.useCallback2((elem: Js.Nullable.t<Dom.element>) => {
+  let setDiv = React.useCallback2((elem: Nullable.t<Dom.element>) => {
     setPortalNodes(.
       prevDict => {
         let clonedDict =
@@ -15,7 +15,7 @@ let make = React.memo((~name: string, ~customStyle="") => {
           )
           ->Dict.fromArray
 
-        switch elem->Js.Nullable.toOption {
+        switch elem->Nullable.toOption {
         | Some(elem) => Dict.set(clonedDict, name, elem)
         | None => ()
         }
diff --git a/src/components/tooltip/ToolTip.res b/src/components/tooltip/ToolTip.res
index 3c53fa4b9..2623da847 100644
--- a/src/components/tooltip/ToolTip.res
+++ b/src/components/tooltip/ToolTip.res
@@ -633,9 +633,9 @@ let make = (
   (),
 ) => {
   let (isToolTipVisible, setIsToolTipVisible) = React.useState(_ => false)
-  let toolTipRef = React.useRef(Js.Nullable.null)
-  let componentRef = React.useRef(Js.Nullable.null)
-  let toolTipArrowRef = React.useRef(Js.Nullable.null)
+  let toolTipRef = React.useRef(Nullable.null)
+  let componentRef = React.useRef(Nullable.null)
+  let toolTipArrowRef = React.useRef(Nullable.null)
 
   React.useEffect1(() => {
     if isToolTipVisible {
@@ -649,8 +649,8 @@ let make = (
     }
   }, [isToolTipVisible])
 
-  let getBoundingRectInfo = (ref: React.ref<Js.Nullable.t<Dom.element>>, getter) => {
-    ref.current->Js.Nullable.toOption->Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
+  let getBoundingRectInfo = (ref: React.ref<Nullable.t<Dom.element>>, getter) => {
+    ref.current->Nullable.toOption->Option.map(getBoundingClientRect)->Option.mapOr(0, getter)
   }
 
   let tooltipWidth = toolTipRef->getBoundingRectInfo(val => val.width)
diff --git a/src/components/tooltip/ToolTip.resi b/src/components/tooltip/ToolTip.resi
index ce0882807..2acf87ae1 100644
--- a/src/components/tooltip/ToolTip.resi
+++ b/src/components/tooltip/ToolTip.resi
@@ -5,7 +5,7 @@ type toolTipSize = Large | Medium | Small | XSmall
 type tooltipPositioning = [#absolute | #fixed | #static]
 @react.component
 let make: (
-  ~description: Js.String2.t=?,
+  ~description: string=?,
   ~descriptionComponent: React.element=?,
   ~tooltipPositioning: tooltipPositioning=?,
   ~toolTipFor: React.element=?,
diff --git a/src/context/FilterContext.res b/src/context/FilterContext.res
index 26bc38dad..3250cb0dd 100644
--- a/src/context/FilterContext.res
+++ b/src/context/FilterContext.res
@@ -1,5 +1,5 @@
 type sessionStorage = {
-  getItem: (. string) => Js.Nullable.t<string>,
+  getItem: (. string) => Nullable.t<string>,
   setItem: (. string, string) => unit,
   removeItem: (. string) => unit,
 }
@@ -110,7 +110,7 @@ let make = (~index: string, ~children, ~disableSessionStorage=false) => {
   }, (filterDict, setfilterDict))
 
   React.useEffect0(() => {
-    switch sessionStorage.getItem(. index)->Js.Nullable.toOption {
+    switch sessionStorage.getItem(. index)->Nullable.toOption {
     | Some(value) =>
       !disableSessionStorage
         ? value->FilterUtils.parseFilterString->updateFilter.updateExistingKeys
diff --git a/src/context/LoadedTableContext.res b/src/context/LoadedTableContext.res
index 3b89e044c..1e4d0574f 100644
--- a/src/context/LoadedTableContext.res
+++ b/src/context/LoadedTableContext.res
@@ -1,8 +1,8 @@
 type infoData
 
-external toInfoData: 'a => array<Js.Nullable.t<infoData>> = "%identity"
+external toInfoData: 'a => array<Nullable.t<infoData>> = "%identity"
 
-let arr: array<Js.Nullable.t<infoData>> = []
+let arr: array<Nullable.t<infoData>> = []
 
 let loadedTableContext = React.createContext(arr)
 
diff --git a/src/entities/EntityType.res b/src/entities/EntityType.res
index bd47150c8..d688c0f69 100644
--- a/src/entities/EntityType.res
+++ b/src/entities/EntityType.res
@@ -1,12 +1,12 @@
 type initialFilters<'t> = {
   field: FormRenderer.fieldInfoType,
-  localFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
+  localFilter: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>,
 }
 type optionType<'t> = {
   urlKey: string,
   field: FormRenderer.fieldInfoType,
   parser: JSON.t => JSON.t,
-  localFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
+  localFilter: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>,
 }
 let getDefaultEntityOptionType = (): optionType<'t> => {
   urlKey: "",
@@ -46,7 +46,7 @@ type entityType<'colType, 't> = {
   dateRangeFilterDict: Dict.t<JSON.t>,
   searchValueDict: option<Dict.t<string>>,
   filterCheck: ('t, array<string>) => bool,
-  filterForRow: (option<array<Js.Nullable.t<'t>>>, int) => TableUtils.filterObject,
+  filterForRow: (option<array<Nullable.t<'t>>>, int) => TableUtils.filterObject,
 }
 
 let emptyObj = {
diff --git a/src/entities/analytics/AnalyticsUtils.res b/src/entities/analytics/AnalyticsUtils.res
index b8494e879..2c0e8da34 100644
--- a/src/entities/analytics/AnalyticsUtils.res
+++ b/src/entities/analytics/AnalyticsUtils.res
@@ -122,7 +122,7 @@ type analyticsTableEntity<'colType, 't> = {
       'colType,
     ) => Table.header,
   >,
-  tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
+  tableGlobalFilter: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>,
   moduleName: string,
   defaultSortCol: string,
   filterKeys: array<string>,
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index 152ff1ef7..de59989d0 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -75,7 +75,7 @@ let make = () => {
   let fetchInitialEnums = async () => {
     try {
       let response = await getEnumDetails(QuickStartUtils.quickStartEnumIntialArray)
-      let responseValueDict = response->Js.Nullable.toOption->Option.getOr(Dict.make())
+      let responseValueDict = response->Nullable.toOption->Option.getOr(Dict.make())
       let pageStateToSet = responseValueDict->QuickStartUtils.getCurrentStep
       setQuickStartPageState(_ => pageStateToSet->QuickStartUtils.enumToVarinatMapper)
       responseValueDict
diff --git a/src/genericUtils/Form.res b/src/genericUtils/Form.res
index 99d8b7b2e..70a5d9b41 100644
--- a/src/genericUtils/Form.res
+++ b/src/genericUtils/Form.res
@@ -1,18 +1,18 @@
 let defaultSubmit = (_, _) => {
-  Js.Nullable.null->Js.Promise.resolve
+  Nullable.null->Js.Promise.resolve
 }
 module FormBody = {
   @react.component
   let make = (~children, ~formClass, ~handleSubmit, ~submitOnEnter) => {
     let form = ReactFinalForm.useForm()
-    let formRef = React.useRef(Js.Nullable.null)
+    let formRef = React.useRef(Nullable.null)
     React.useEffect0(() => {
       let onKeyDown = (ev: 'a) => {
         let keyCode = ev->ReactEvent.Keyboard.keyCode
 
         let tagName = Document.activeElement->Webapi.Dom.Element.tagName
         if keyCode === 13 {
-          let enterIsFromWithinForm = switch formRef.current->Js.Nullable.toOption {
+          let enterIsFromWithinForm = switch formRef.current->Nullable.toOption {
           | Some(element) => element->Webapi.Dom.Element.contains(~child=Document.activeElement)
           | None => false
           }
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
index 88b203949..daceebec3 100644
--- a/src/genericUtils/Identity.res
+++ b/src/genericUtils/Identity.res
@@ -2,7 +2,7 @@ external formReactEventToString: ReactEvent.Form.t => string = "%identity"
 external stringToFormReactEvent: string => ReactEvent.Form.t = "%identity"
 external anyTypeToReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external arrofStringToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external jsonToNullableJson: JSON.t => Js.Nullable.t<JSON.t> = "%identity"
+external jsonToNullableJson: JSON.t => Nullable.t<JSON.t> = "%identity"
 external jsonToReactDOMStyle: JSON.t => ReactDOM.style = "%identity"
 external genericTypeToJson: 'a => JSON.t = "%identity"
 external genericTypeToBool: 'a => bool = "%identity"
diff --git a/src/hooks/AuthHooks.res b/src/hooks/AuthHooks.res
index bfbe780d2..46ac59ad2 100644
--- a/src/hooks/AuthHooks.res
+++ b/src/hooks/AuthHooks.res
@@ -1,6 +1,6 @@
 open Promise
 type sessionStorage = {
-  getItem: (. string) => Js.Nullable.t<string>,
+  getItem: (. string) => Nullable.t<string>,
   setItem: (. string, string) => unit,
   removeItem: (. string) => unit,
 }
@@ -11,7 +11,7 @@ external dictToObj: Dict.t<'a> => {..} = "%identity"
 @val external atob: string => string = "atob"
 
 let getHeaders = (~uri, ~headers, ()) => {
-  let hyperSwitchToken = LocalStorage.getItem("login")->Js.Nullable.toOption
+  let hyperSwitchToken = LocalStorage.getItem("login")->Nullable.toOption
   let isMixpanel = uri->String.includes("mixpanel")
 
   let headerObj = if isMixpanel {
diff --git a/src/hooks/OutsideClick.res b/src/hooks/OutsideClick.res
index c909fc063..9193656bc 100644
--- a/src/hooks/OutsideClick.res
+++ b/src/hooks/OutsideClick.res
@@ -1,12 +1,12 @@
 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 ffToWebDom: Nullable.t<Dom.element> => Nullable.t<Webapi.Dom.Element.t> = "%identity"
 type ref =
-  | ArrayOfRef(array<React.ref<Js.Nullable.t<Dom.element>>>)
-  | RefArray(React.ref<array<Js.Nullable.t<Dom.element>>>)
+  | ArrayOfRef(array<React.ref<Nullable.t<Dom.element>>>)
+  | RefArray(React.ref<array<Nullable.t<Dom.element>>>)
 
 let useOutsideClick = (
   ~refs: ref,
-  ~containerRefs: option<React.ref<Js.Nullable.t<Dom.element>>>=?,
+  ~containerRefs: option<React.ref<Nullable.t<Dom.element>>>=?,
   ~isActive,
   ~events=["click"],
   ~callback,
@@ -20,8 +20,8 @@ let useOutsideClick = (
 
         let isInsideClick = switch refs {
         | ArrayOfRef(refs) =>
-          refs->Array.reduce(false, (acc, ref: React.ref<Js.Nullable.t<Dom.element>>) => {
-            let isClickInsideRef = switch ffToWebDom(ref.current)->Js.Nullable.toOption {
+          refs->Array.reduce(false, (acc, ref: React.ref<Nullable.t<Dom.element>>) => {
+            let isClickInsideRef = switch ffToWebDom(ref.current)->Nullable.toOption {
             | Some(element) => element->Webapi.Dom.Element.contains(~child=ffToDomType(targ))
             | None => false
             }
@@ -30,8 +30,8 @@ let useOutsideClick = (
         | RefArray(refs) =>
           refs.current
           ->Array.slice(~start=0, ~end=-1)
-          ->Array.reduce(false, (acc, ref: Js.Nullable.t<Dom.element>) => {
-            let isClickInsideRef = switch ffToWebDom(ref)->Js.Nullable.toOption {
+          ->Array.reduce(false, (acc, ref: Nullable.t<Dom.element>) => {
+            let isClickInsideRef = switch ffToWebDom(ref)->Nullable.toOption {
             | Some(element) => element->Webapi.Dom.Element.contains(~child=ffToDomType(targ))
             | None => false
             }
@@ -41,7 +41,7 @@ let useOutsideClick = (
 
         let isClickInsideOfContainer = switch containerRefs {
         | Some(ref) =>
-          switch ffToWebDom(ref.current)->Js.Nullable.toOption {
+          switch ffToWebDom(ref.current)->Nullable.toOption {
           | Some(element) => element->Webapi.Dom.Element.contains(~child=ffToDomType(targ))
           | None => false
           }
diff --git a/src/libraries/Document.res b/src/libraries/Document.res
index 8fb394b5b..d97c64a66 100644
--- a/src/libraries/Document.res
+++ b/src/libraries/Document.res
@@ -4,7 +4,7 @@ type document = {querySelectorAll: (. string) => array<domElement>}
 @val external document: document = "document"
 
 @val @scope("document")
-external querySelector: string => Js.Nullable.t<domElement> = "querySelector"
+external querySelector: string => Nullable.t<domElement> = "querySelector"
 @val @scope("document")
 external activeElement: Dom.element = "activeElement"
 
diff --git a/src/libraries/Highcharts.res b/src/libraries/Highcharts.res
index b187fbcef..0fabc6b7b 100644
--- a/src/libraries/Highcharts.res
+++ b/src/libraries/Highcharts.res
@@ -23,7 +23,7 @@ type dataLabels = {
 
 type seriesLine<'a> = {
   name: string,
-  data: array<('a, Js.Nullable.t<float>)>,
+  data: array<('a, Nullable.t<float>)>,
   color: option<string>,
   pointPlacement?: string,
   legendIndex: int,
@@ -63,7 +63,7 @@ type chart = {
   "type": string,
   "zoomType": string,
   "margin": option<array<int>>,
-  "backgroundColor": Js.Nullable.t<string>,
+  "backgroundColor": Nullable.t<string>,
   "height": option<int>,
   "width": option<int>,
   "events": option<chartEvent>,
@@ -76,7 +76,7 @@ type states = {"hover": hover}
 
 type area = {
   "fillColor": option<fillColor>,
-  "threshold": Js.Nullable.t<string>,
+  "threshold": Nullable.t<string>,
   "lineWidth": float,
   "states": states,
   "pointStart": option<int>,
@@ -231,12 +231,12 @@ type options<'a> = {
 
 type chartType = {
   chartType: string,
-  backgroundColor: Js.Nullable.t<string>,
+  backgroundColor: Nullable.t<string>,
 }
 
 let makebarChart = (
   ~chartType: string="",
-  ~backgroundColor: Js.Nullable.t<string>=Js.Nullable.null,
+  ~backgroundColor: Nullable.t<string>=Nullable.null,
   (),
 ) => {
   {
@@ -244,7 +244,7 @@ let makebarChart = (
     "backgroundColor": backgroundColor,
   }
 }
-type barChart = {"type": string, "backgroundColor": Js.Nullable.t<string>}
+type barChart = {"type": string, "backgroundColor": Nullable.t<string>}
 type barSeries = {data: array<JSON.t>}
 type xAxis1 = {"type": string}
 
diff --git a/src/libraries/HighchartsLine.res b/src/libraries/HighchartsLine.res
index 59ed93b5d..ba284174b 100644
--- a/src/libraries/HighchartsLine.res
+++ b/src/libraries/HighchartsLine.res
@@ -5,7 +5,7 @@ type chart = {
   "type": string,
   "zoomType": string,
   "margin": option<array<int>>,
-  "backgroundColor": Js.Nullable.t<string>,
+  "backgroundColor": Nullable.t<string>,
   "height": option<int>,
 }
 type linearGradient = {"x1": int, "y1": int, "x2": int, "y2": int}
@@ -16,7 +16,7 @@ type states = {"hover": hover}
 
 type area = {
   "fillColor": option<fillColor>,
-  "threshold": Js.Nullable.t<string>,
+  "threshold": Nullable.t<string>,
   "lineWidth": int,
   "states": states,
   "pointStart": option<int>,
diff --git a/src/libraries/LocalStorage.res b/src/libraries/LocalStorage.res
index 66708339d..ba5818225 100644
--- a/src/libraries/LocalStorage.res
+++ b/src/libraries/LocalStorage.res
@@ -1,5 +1,5 @@
 @val @scope("localStorage")
-external getItem: string => Js.Nullable.t<string> = "getItem"
+external getItem: string => Nullable.t<string> = "getItem"
 
 @val @scope("localStorage")
 external setItemOrig: (string, string) => unit = "setItem"
@@ -61,6 +61,6 @@ let useStorageValue = key => {
   })
 
   React.useMemo2(() => {
-    /* LocalStorage. */ getItem(key)->Js.Nullable.toOption
+    /* LocalStorage. */ getItem(key)->Nullable.toOption
   }, (key, value))
 }
diff --git a/src/libraries/Lottie.res b/src/libraries/Lottie.res
index 2bc7aba59..3c596e0ea 100644
--- a/src/libraries/Lottie.res
+++ b/src/libraries/Lottie.res
@@ -4,7 +4,7 @@ type props = {
   animationData: JSON.t,
   autoplay: bool,
   loop: bool,
-  lottieRef?: React.ref<Js.Nullable.t<Dom.element>>,
+  lottieRef?: React.ref<Nullable.t<Dom.element>>,
   initialSegment?: array<int>,
 }
 
diff --git a/src/libraries/ReactFinalForm.res b/src/libraries/ReactFinalForm.res
index 56466ea7d..7365f2979 100644
--- a/src/libraries/ReactFinalForm.res
+++ b/src/libraries/ReactFinalForm.res
@@ -34,13 +34,13 @@ type fieldRenderPropsMeta = {
   data: bool,
   dirty: bool,
   dirtySinceLastSubmit: bool,
-  error: Js.Nullable.t<string>,
+  error: Nullable.t<string>,
   initial: bool,
   invalid: bool,
   modified: bool,
   modifiedSinceLastSubmit: bool,
   pristine: bool,
-  submitError: Js.Nullable.t<string>,
+  submitError: Nullable.t<string>,
   submitFailed: bool,
   submitSucceeded: bool,
   submitting: bool,
@@ -57,13 +57,13 @@ let makeCustomError = error => {
     data: true,
     dirty: true,
     dirtySinceLastSubmit: true,
-    error: Js.Nullable.fromOption(error),
+    error: Nullable.fromOption(error),
     initial: true,
     invalid: true,
     modified: true,
     modifiedSinceLastSubmit: true,
     pristine: true,
-    submitError: Js.Nullable.null,
+    submitError: Nullable.null,
     submitFailed: true,
     submitSucceeded: true,
     submitting: true,
@@ -90,8 +90,8 @@ type submitErrorResponse = {
 
 type formState = {
   dirty: bool,
-  submitError: Js.Nullable.t<string>,
-  submitErrors: Js.Nullable.t<JSON.t>,
+  submitError: Nullable.t<string>,
+  submitErrors: Nullable.t<JSON.t>,
   hasValidationErrors: bool,
   hasSubmitErrors: bool,
   submitting: bool,
@@ -121,11 +121,11 @@ type formApi = {
   mutators: bool,
   pauseValidation: bool,
   registerField: bool,
-  reset: Js.Nullable.t<JSON.t> => unit,
+  reset: Nullable.t<JSON.t> => unit,
   resetFieldState: string => unit,
   restart: bool,
   resumeValidation: bool,
-  submit: unit => Promise.t<Js.Nullable.t<JSON.t>>,
+  submit: unit => Promise.t<Nullable.t<JSON.t>>,
   subscribe: (formState => unit, JSON.t) => unsubscribeFn,
 }
 
@@ -134,7 +134,7 @@ type formRenderProps = {
   handleSubmit: ReactEvent.Form.t => unit,
   submitError: string,
   values: JSON.t,
-  // handleSubmit: ReactEvent.Form.t => Promise.t<Js.Nullable.t<JSON.t>>,
+  // handleSubmit: ReactEvent.Form.t => Promise.t<Nullable.t<JSON.t>>,
 }
 
 @module("final-form")
@@ -156,7 +156,7 @@ module Form = {
     ~initialValuesEqual: bool=?,
     ~keepDirtyOnReinitialize: bool=?,
     ~mutators: bool=?,
-    ~onSubmit: (formValues, formApi) => Promise.t<Js.Nullable.t<JSON.t>>,
+    ~onSubmit: (formValues, formApi) => Promise.t<Nullable.t<JSON.t>>,
     ~render: formRenderProps => React.element=?,
     ~subscription: Dict.t<bool>,
     ~validate: JSON.t => JSON.t=?,
@@ -184,7 +184,7 @@ module Field = {
     ~render: fieldRenderProps => React.element=?,
     ~subscription: bool=?,
     @as("type") ~type_: bool=?,
-    ~validate: (option<string>, JSON.t) => Js.Promise.t<Js.Nullable.t<string>>=?, // (field_vale, form_object)
+    ~validate: (option<string>, JSON.t) => Js.Promise.t<Nullable.t<string>>=?, // (field_vale, form_object)
     ~validateFields: bool=?,
     ~value: bool=?,
     ~placeholder: string=?,
@@ -214,7 +214,7 @@ module FormSpy = {
 }
 
 @module("react-final-form")
-external useFormState: Js.Nullable.t<JSON.t> => formState = "useFormState"
+external useFormState: Nullable.t<JSON.t> => formState = "useFormState"
 
 @module("react-final-form")
 external useForm: unit => formApi = "useForm"
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index badd2a778..37f222cfe 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -14,7 +14,7 @@ module BaseTableComponent = {
     ~newAllCols: array<'colType>,
     ~colMapper as _: 'colType => string,
     ~tableEntity: EntityType.entityType<'colType, 't>,
-    ~tableGlobalFilter as _: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
+    ~tableGlobalFilter as _: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>,
     ~activeTab as _,
   ) => {
     open DynamicTableUtils
@@ -102,7 +102,7 @@ module TableWrapper = {
     ~tableUpdatedHeading as _: option<
       (~item: option<'t>, ~dateObj: option<AnalyticsUtils.prevDates>, 'colType) => Table.header,
     >,
-    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
+    ~tableGlobalFilter: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>,
     ~moduleName,
     ~weeklyTableMetricsCols,
     ~distributionArray=None,
@@ -117,7 +117,7 @@ module TableWrapper = {
     let activeTabStr = activeTab->Option.getOr([])->Array.joinWith("-")
     let (startTimeFilterKey, endTimeFilterKey) = dateKeys
     let (tableDataLoading, setTableDataLoading) = React.useState(_ => true)
-    let (tableData, setTableData) = React.useState(_ => []->Array.map(Js.Nullable.return))
+    let (tableData, setTableData) = React.useState(_ => []->Array.map(Nullable.make))
 
     let getTopLevelFilter = React.useMemo1(() => {
       filterValueDict
@@ -223,7 +223,7 @@ module TableWrapper = {
       })
       ->JSON.Encode.array
       ->getTable
-      ->Array.map(Js.Nullable.return)
+      ->Array.map(Nullable.make)
     }
 
     open Promise
@@ -287,7 +287,7 @@ module TableWrapper = {
           | _ => {
               let data = json->getDictFromJsonObject
               let value =
-                data->getJsonObjectFromDict("queryData")->getTable->Array.map(Js.Nullable.return)
+                data->getJsonObjectFromDict("queryData")->getTable->Array.map(Nullable.make)
 
               setTableData(_ => value)
               setTableDataLoading(_ => false)
@@ -402,7 +402,7 @@ module TabDetails = {
     ~tableUpdatedHeading: option<
       (~item: option<'t>, ~dateObj: option<AnalyticsUtils.prevDates>, 'colType) => Table.header,
     >,
-    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>,
+    ~tableGlobalFilter: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>,
     ~moduleName,
     ~updateUrl: Dict.t<string> => unit,
     ~weeklyTableMetricsCols,
@@ -500,7 +500,7 @@ let make = (
   ~tableUpdatedHeading: option<
     (~item: option<'t>, ~dateObj: option<AnalyticsUtils.prevDates>, 'colType) => Table.header,
   >=?,
-  ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, JSON.t) => array<Js.Nullable.t<'t>>>=?,
+  ~tableGlobalFilter: option<(array<Nullable.t<'t>>, JSON.t) => array<Nullable.t<'t>>>=?,
   ~moduleName: string,
   ~weeklyTableMetricsCols=?,
   ~distributionArray=None,
diff --git a/src/screens/HyperSwitch/Analytics/DownloadReportModal.res b/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
index 93233f997..48fdf6000 100644
--- a/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
+++ b/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
@@ -29,7 +29,7 @@ let make = (~reportModal, ~setReportModal, ~entityName) => {
     } catch {
     | _ => showToast(~message="Something went wrong. Please try again.", ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let onSubmit = (values, _) => {
diff --git a/src/screens/HyperSwitch/Analytics/ErrorReasons.res b/src/screens/HyperSwitch/Analytics/ErrorReasons.res
index 7475954be..b5b3b5447 100644
--- a/src/screens/HyperSwitch/Analytics/ErrorReasons.res
+++ b/src/screens/HyperSwitch/Analytics/ErrorReasons.res
@@ -93,7 +93,7 @@ let make = (~errors: array<AnalyticsTypes.error_message_type>) => {
         error_reason: item.reason,
         percentage: item.percentage,
         count: item.count,
-      }->Js.Nullable.return
+      }->Nullable.make
     })
   } else {
     []
diff --git a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
index 5b170c3d3..b664b7c24 100644
--- a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
+++ b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
@@ -63,7 +63,7 @@ let filterByData = (txnArr, value) => {
   let searchText = LogicUtils.getStringFromJson(value, "")
 
   txnArr
-  ->Belt.Array.keepMap(Js.Nullable.toOption)
+  ->Belt.Array.keepMap(Nullable.toOption)
   ->Belt.Array.keepMap((data: 't) => {
     let valueArr =
       data
@@ -76,7 +76,7 @@ let filterByData = (txnArr, value) => {
       })
       ->Array.reduce(false, (acc, item) => item || acc)
     if valueArr {
-      data->Js.Nullable.return->Some
+      data->Nullable.make->Some
     } else {
       None
     }
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
index 340cc8ce8..f4ed254fe 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
@@ -72,7 +72,7 @@ module ErrorValidation = {
   let make = (~fieldName, ~validate) => {
     open LogicUtils
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
     let appPrefix = LogicUtils.useUrlPrefix()
     let imageStyle = "w-4 h-4 my-auto border-gray-100"
@@ -173,7 +173,7 @@ module CashToCodeSelectBox = {
       setSelectedCountry(_ => country)
     }
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
 
     let isSelected = (country): bool => {
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorList.res b/src/screens/HyperSwitch/Connectors/ConnectorList.res
index cb8ad12c5..e01c9ac96 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorList.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorList.res
@@ -43,7 +43,7 @@ module NewProcessorCards = {
 
     let (showModal, setShowModal) = React.useState(_ => false)
     let (searchedConnector, setSearchedConnector) = React.useState(_ => "")
-    let searchRef = React.useRef(Js.Nullable.null)
+    let searchRef = React.useRef(Nullable.null)
 
     let urlPrefix = isPayoutFlow ? "payoutconnectors/new" : "connectors/new"
     let handleClick = connectorName => {
@@ -245,8 +245,8 @@ let make = (~isPayoutFlow=false) => {
       let connectorsList = response->getProcessorsListFromJson(~removeFromList, ())
       let previousData = connectorsList->Array.map(ConnectorTableUtils.getProcessorPayloadType)
 
-      setFilteredConnectorData(_ => previousData->Array.map(Js.Nullable.return))
-      setPreviouslyConnectedData(_ => previousData->Array.map(Js.Nullable.return))
+      setFilteredConnectorData(_ => previousData->Array.map(Nullable.make))
+      setPreviouslyConnectedData(_ => previousData->Array.map(Nullable.make))
       let arr =
         connectorsList->Array.map(paymentMethod =>
           paymentMethod->getString("connector_name", "")->getConnectorNameTypeFromString
@@ -267,8 +267,8 @@ let make = (~isPayoutFlow=false) => {
     open LogicUtils
     let (searchText, arr) = ob
     let filteredList = if searchText->String.length > 0 {
-      arr->Array.filter((obj: Js.Nullable.t<ConnectorTypes.connectorPayload>) => {
-        switch Js.Nullable.toOption(obj) {
+      arr->Array.filter((obj: Nullable.t<ConnectorTypes.connectorPayload>) => {
+        switch Nullable.toOption(obj) {
         | Some(obj) =>
           isContainingStringLowercase(obj.connector_name, searchText) ||
           isContainingStringLowercase(obj.profile_id, searchText)
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
index 3d94fdb85..c658570d6 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
@@ -1023,7 +1023,7 @@ let onSubmit = async (
   } else {
     onSubmitMain(values)->ignore
   }
-  Js.Nullable.null
+  Nullable.null
 }
 
 let getWebhooksUrl = (~connectorName, ~merchantId) => {
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
index 51fe94db4..d32e03c1e 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegration.res
@@ -100,7 +100,7 @@ module Simplified = {
       } catch {
       | _ => showToast(~message="Failed to Verify", ~toastType=ToastState.ToastError, ())
       }
-      Js.Nullable.null
+      Nullable.null
     }
 
     <Form
@@ -189,7 +189,7 @@ module Manual = {
       update(updatedValue)
       setVefifiedDomainList(_ => [domainName])
       setApplePayIntegrationSteps(_ => ApplePayWalletIntegrationTypes.Verify)
-      Js.Nullable.null->Js.Promise.resolve
+      Nullable.null->Js.Promise.resolve
     }
 
     <div className="p-6 m-2">
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res b/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res
index 2af22a066..17e88f58c 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/Wallet.res
@@ -67,7 +67,7 @@ module Wallets = {
       let _ = update(json)
       setShowWalletConfigurationModal(_ => false)
 
-      Js.Nullable.null->Js.Promise.resolve
+      Nullable.null->Js.Promise.resolve
     }
 
     let configurationFields = getConfigurationFields(
diff --git a/src/screens/HyperSwitch/Customers/Customers.res b/src/screens/HyperSwitch/Customers/Customers.res
index 2d25c04b7..07fe5acb5 100644
--- a/src/screens/HyperSwitch/Customers/Customers.res
+++ b/src/screens/HyperSwitch/Customers/Customers.res
@@ -13,7 +13,7 @@ let make = () => {
       let customersUrl = getURL(~entityName=CUSTOMERS, ~methodType=Get, ())
       let response = await fetchDetails(customersUrl)
       let data = response->LogicUtils.getArrayDataFromJson(itemToObjMapper)
-      setCustomersData(_ => data->Array.map(Js.Nullable.return))
+      setCustomersData(_ => data->Array.map(Nullable.make))
       setScreenState(_ => PageLoaderWrapper.Success)
     } catch {
     | Js.Exn.Error(e) =>
diff --git a/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res b/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
index 6565e26bb..2a9ad43ac 100644
--- a/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
+++ b/src/screens/HyperSwitch/Developer/APIKeys/KeyManagement.res
@@ -93,7 +93,7 @@ module ApiEditModal = {
         }
         setModalState(_ => SettingApiModalError)
       }
-      Js.Nullable.null
+      Nullable.null
     }
 
     let modalBody =
@@ -360,7 +360,7 @@ module ApiKeysTable = {
           visibleColumns
           entity=apiKeysTableEntity
           showSerialNumber=true
-          actualData={data->Array.map(Js.Nullable.return)}
+          actualData={data->Array.map(Nullable.make)}
           totalResults={data->Array.length}
           offset
           setOffset
diff --git a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
index 120be32a8..6b032d829 100644
--- a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
+++ b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettings.res
@@ -62,7 +62,7 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
         showToast(~message=`Failed to updated`, ~toastType=ToastState.ToastError, ())
       }
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   <PageLoaderWrapper screenState>
diff --git a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsList.res b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsList.res
index 530bf8614..6aa07a5d2 100644
--- a/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsList.res
+++ b/src/screens/HyperSwitch/Developer/PaymentSettings/PaymentSettingsList.res
@@ -26,7 +26,7 @@ let make = (
           visibleColumns
           entity={webhookProfileTableEntity}
           showSerialNumber=true
-          actualData={businessProfileValues->Array.map(Js.Nullable.return)}
+          actualData={businessProfileValues->Array.map(Nullable.make)}
           totalResults={businessProfileValues->Array.length}
           offset
           setOffset
diff --git a/src/screens/HyperSwitch/Disputes/Disputes.res b/src/screens/HyperSwitch/Disputes/Disputes.res
index fd982b082..0fe3efb5e 100644
--- a/src/screens/HyperSwitch/Disputes/Disputes.res
+++ b/src/screens/HyperSwitch/Disputes/Disputes.res
@@ -14,7 +14,7 @@ let make = () => {
       let response = await fetchDetails(disputesUrl)
       let disputesValue = response->LogicUtils.getArrayDataFromJson(DisputesEntity.itemToObjMapper)
       if disputesValue->Array.length > 0 {
-        setDisputesData(_ => disputesValue->Array.map(Js.Nullable.return))
+        setDisputesData(_ => disputesValue->Array.map(Nullable.make))
         setScreenState(_ => Success)
       } else {
         setScreenState(_ => Custom)
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
index 038b65904..b3e44541c 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
@@ -254,7 +254,7 @@ let make = (
     } catch {
     | _ => ()
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let setFRMValues = async body => {
@@ -271,14 +271,14 @@ let make = (
       resolve()
     })
     ->ignore
-    Js.Nullable.null
+    Nullable.null
   }
 
   let onSubmit = (values, _) => {
     setPageState(_ => Loading)
     let body = isUpdateFlow ? values->ignoreFields : values
     setFRMValues(body)->ignore
-    Js.Nullable.null->resolve
+    Nullable.null->resolve
   }
 
   <IntegrationFieldsForm
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
index fc8923e91..f47a368d2 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
@@ -348,7 +348,7 @@ let make = (~setCurrentStep, ~retrivedValues=None, ~setInitialValues, ~isUpdateF
     setInitialValues(_ => valuesDict->JSON.Encode.object)
     setCurrentStep(prev => prev->getNextStep)
 
-    Js.Nullable.null->resolve
+    Nullable.null->resolve
   }
 
   let validate = _values => {
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMSelect.res b/src/screens/HyperSwitch/FraudAndRisk/FRMSelect.res
index 77f1a695e..e367b54a9 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMSelect.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMSelect.res
@@ -133,8 +133,8 @@ let make = () => {
       if connectorsCount > 0 {
         let frmList = processorsList->FRMUtils.filterList(~removeFromList=Connector, ())
         let previousData = frmList->Array.map(ConnectorTableUtils.getProcessorPayloadType)
-        setFilteredFRMData(_ => previousData->Array.map(Js.Nullable.return))
-        setPreviouslyConnectedData(_ => previousData->Array.map(Js.Nullable.return))
+        setFilteredFRMData(_ => previousData->Array.map(Nullable.make))
+        setPreviouslyConnectedData(_ => previousData->Array.map(Nullable.make))
         let arr =
           frmList->Array.map(
             paymentMethod =>
@@ -158,8 +158,8 @@ let make = () => {
     open LogicUtils
     let (searchText, arr) = ob
     let filteredList = if searchText->String.length > 0 {
-      arr->Array.filter((frmPlayer: Js.Nullable.t<ConnectorTypes.connectorPayload>) => {
-        switch Js.Nullable.toOption(frmPlayer) {
+      arr->Array.filter((frmPlayer: Nullable.t<ConnectorTypes.connectorPayload>) => {
+        switch Nullable.toOption(frmPlayer) {
         | Some(frmPlayer) => isContainingStringLowercase(frmPlayer.connector_name, searchText)
         | None => false
         }
diff --git a/src/screens/HyperSwitch/HSLocalStorage.res b/src/screens/HyperSwitch/HSLocalStorage.res
index 033e45ccd..4bfb621ff 100644
--- a/src/screens/HyperSwitch/HSLocalStorage.res
+++ b/src/screens/HyperSwitch/HSLocalStorage.res
@@ -1,11 +1,11 @@
 let getInfoFromLocalStorage = (~lStorageKey) => {
-  let stringifiedJson = LocalStorage.getItem(lStorageKey)->Js.Nullable.toOption->Option.getOr("")
+  let stringifiedJson = LocalStorage.getItem(lStorageKey)->Nullable.toOption->Option.getOr("")
 
   stringifiedJson->LogicUtils.safeParse->LogicUtils.getDictFromJsonObject
 }
 
 let getBooleanFromLocalStorage = (~key) => {
-  let stringifiedJson = LocalStorage.getItem(key)->Js.Nullable.toOption->Option.getOr("")
+  let stringifiedJson = LocalStorage.getItem(key)->Nullable.toOption->Option.getOr("")
 
   stringifiedJson->LogicUtils.safeParse->LogicUtils.getBoolFromJson(false)
 }
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
index bab291315..cf99faee4 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
@@ -105,7 +105,7 @@ module ConfigureProcessor = {
       setInitialValues(_ => body)
       mixpanelEvent(~eventName=`quickstart_connector_configuration`, ())
       setConnectorConfigureState(_ => Setup_payment_methods)
-      Js.Nullable.null
+      Nullable.null
     }
 
     let validateMandatoryField = values => {
diff --git a/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res b/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res
index 65106bc2c..8243cf42f 100644
--- a/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res
+++ b/src/screens/HyperSwitch/Home/ProdIntent/ProdVerifyModal.res
@@ -28,7 +28,7 @@ let make = (~showModal, ~setShowModal, ~initialValues=Dict.make(), ~getProdVerif
     } catch {
     | _ => setShowModal(_ => false)
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let onSubmit = (values, _) => {
diff --git a/src/screens/HyperSwitch/Home/QuickStart/GoLive.res b/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
index 4ad501041..89b4e8c62 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
@@ -76,7 +76,7 @@ let make = (~goLive) => {
     } catch {
     | _ => ()
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let onSubmit = (values, _) => {
diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
index a01fa4b0a..4762925fc 100644
--- a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
+++ b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
@@ -15,7 +15,7 @@ let useFetchEnumDetails = () => {
       let res = await fetchDetails(url)
       let responseDict = res->responseDataMapper
       setEnumVariantValues(._ => responseDict->JSON.Encode.object->JSON.stringify)
-      Js.Nullable.return(responseDict)
+      Nullable.make(responseDict)
     } catch {
     | Js.Exn.Error(e) => {
         let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
@@ -74,7 +74,7 @@ let usePostEnumDetails = () => {
       let _ = await updateDetails(url, bodyValForApi, Post, ())
 
       let updatedRecoilValueDict = updateEnumInRecoil([(body, enumVariant)])
-      Js.Nullable.return(updatedRecoilValueDict)
+      Nullable.make(updatedRecoilValueDict)
     } catch {
     | Js.Exn.Error(e) => {
         let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
diff --git a/src/screens/HyperSwitch/MixpanelHook.res b/src/screens/HyperSwitch/MixpanelHook.res
index b872ad3a7..c58848f0a 100644
--- a/src/screens/HyperSwitch/MixpanelHook.res
+++ b/src/screens/HyperSwitch/MixpanelHook.res
@@ -11,7 +11,7 @@ let useSendEvent = () => {
   open Window
   let fetchApi = AuthHooks.useApiFetcher()
   let name = getFromUserDetails("name")
-  let deviceId = switch LocalStorage.getItem("deviceid")->Js.Nullable.toOption {
+  let deviceId = switch LocalStorage.getItem("deviceid")->Nullable.toOption {
   | Some(id) => id
   | None => getFromUserDetails("email")
   }
diff --git a/src/screens/HyperSwitch/Order/OrderRefundForm.res b/src/screens/HyperSwitch/Order/OrderRefundForm.res
index 542dfd803..5e761792c 100644
--- a/src/screens/HyperSwitch/Order/OrderRefundForm.res
+++ b/src/screens/HyperSwitch/Order/OrderRefundForm.res
@@ -58,7 +58,7 @@ let make = (
       Dict.set(body, "reason", "RETURN"->JSON.Encode.string)
     }
     updateRefundDetails(body->JSON.Encode.object)->ignore
-    Js.Nullable.null->resolve
+    Nullable.null->resolve
   }
 
   let validate = values => {
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
index d671e94b5..f548e9b3f 100644
--- a/src/screens/HyperSwitch/Order/OrderUIUtils.res
+++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -100,7 +100,7 @@ let filterByData = (txnArr, value) => {
   let searchText = value->getStringFromJson("")
 
   txnArr
-  ->Belt.Array.keepMap(Js.Nullable.toOption)
+  ->Belt.Array.keepMap(Nullable.toOption)
   ->Belt.Array.keepMap(data => {
     let valueArr =
       data
@@ -113,7 +113,7 @@ let filterByData = (txnArr, value) => {
       })
       ->Array.reduce(false, (acc, item) => item || acc)
 
-    valueArr ? data->Js.Nullable.return->Some : None
+    valueArr ? data->Nullable.make->Some : None
   })
 }
 
@@ -201,7 +201,7 @@ let setData = (
         !previewOnly || i <= 2
       })
 
-    let list = orderData->Array.map(Js.Nullable.return)
+    let list = orderData->Array.map(Nullable.make)
     setTotalCount(_ => total)
     setOrdersData(_ => list)
     setScreenState(_ => PageLoaderWrapper.Success)
diff --git a/src/screens/HyperSwitch/Order/ShowOrder.res b/src/screens/HyperSwitch/Order/ShowOrder.res
index bd0e379ee..ee9875e55 100644
--- a/src/screens/HyperSwitch/Order/ShowOrder.res
+++ b/src/screens/HyperSwitch/Order/ShowOrder.res
@@ -596,7 +596,7 @@ module FraudRiskBanner = {
         className="text-blue-700 font-semibold text-fs-16 cursor-pointer"
         onClick={_ => {
           refElement.current
-          ->Js.Nullable.toOption
+          ->Nullable.toOption
           ->Option.forEach(input =>
             input->scrollIntoView(_, {behavior: "smooth", block: "start", inline: "nearest"})
           )
@@ -632,7 +632,7 @@ let make = (~id) => {
   let (refetchCounter, setRefetchCounter) = React.useState(_ => 0)
   let (showModal, setShowModal) = React.useState(_ => false)
 
-  let frmDetailsRef = React.useRef(Js.Nullable.null)
+  let frmDetailsRef = React.useRef(Nullable.null)
 
   let orderData = OrderHooks.useGetOrdersData(id, refetchCounter, setScreenState)
   let order = OrderEntity.itemToObjMapper(orderData->getDictFromJsonObject)
diff --git a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
index ad857b623..d010d719c 100644
--- a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
+++ b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
@@ -114,7 +114,7 @@ let make = () => {
         setAuthStatus(LoggedOut)
       }
     }
-    Js.Nullable.null
+    Nullable.null
   }
   let xPositionBasedOnDirection = carouselDirection === RIGHT ? 100 : -100
   <HSwitchUtils.BackgroundImageWrapper>
diff --git a/src/screens/HyperSwitch/Refunds/RefundUtils.res b/src/screens/HyperSwitch/Refunds/RefundUtils.res
index ee7781653..8a0675466 100644
--- a/src/screens/HyperSwitch/Refunds/RefundUtils.res
+++ b/src/screens/HyperSwitch/Refunds/RefundUtils.res
@@ -31,7 +31,7 @@ let getRefundsList = async (
     if total > 0 {
       let refundDataDictArr = data->Belt.Array.keepMap(JSON.Decode.object)
       let refundData = arr->Array.concat(refundDataDictArr)->Array.map(RefundEntity.itemToObjMapper)
-      let list = refundData->Array.map(Js.Nullable.return)
+      let list = refundData->Array.map(Nullable.make)
       setRefundsData(_ => list)
       setTotalCount(_ => total)
       setScreenState(_ => PageLoaderWrapper.Success)
@@ -58,7 +58,7 @@ let filterByData = (txnArr, value) => {
   let searchText = value->getStringFromJson("")
 
   txnArr
-  ->Belt.Array.keepMap(Js.Nullable.toOption)
+  ->Belt.Array.keepMap(Nullable.toOption)
   ->Belt.Array.keepMap(data => {
     let valueArr =
       data
@@ -71,7 +71,7 @@ let filterByData = (txnArr, value) => {
       })
       ->Array.reduce(false, (acc, item) => item || acc)
 
-    valueArr ? data->Js.Nullable.return->Some : None
+    valueArr ? data->Nullable.make->Some : None
   })
 }
 
diff --git a/src/screens/HyperSwitch/Refunds/ShowRefund.res b/src/screens/HyperSwitch/Refunds/ShowRefund.res
index 540adc85b..258e7b87e 100644
--- a/src/screens/HyperSwitch/Refunds/ShowRefund.res
+++ b/src/screens/HyperSwitch/Refunds/ShowRefund.res
@@ -92,7 +92,7 @@ let make = (~id) => {
     let jsonArray = [orderDataForPaymentId]
     let paymentArray =
       jsonArray->JSON.Encode.array->LogicUtils.getArrayDataFromJson(OrderEntity.itemToObjMapper)
-    setOrdersData(_ => paymentArray->Array.map(Js.Nullable.return))
+    setOrdersData(_ => paymentArray->Array.map(Nullable.make))
     None
   }, [orderDataForPaymentId])
 
diff --git a/src/screens/HyperSwitch/Routing/PriorityRouting.res b/src/screens/HyperSwitch/Routing/PriorityRouting.res
index c00e781ad..1c0a6814c 100644
--- a/src/screens/HyperSwitch/Routing/PriorityRouting.res
+++ b/src/screens/HyperSwitch/Routing/PriorityRouting.res
@@ -85,7 +85,7 @@ module SimpleRoutingView = {
         | None => setScreenState(_ => Error("Failed to Fetch!"))
         }
       }->ignore
-      Js.Nullable.null
+      Nullable.null
     }
 
     let openConfirmPopUp = () => {
diff --git a/src/screens/HyperSwitch/Routing/RoutingStack.res b/src/screens/HyperSwitch/Routing/RoutingStack.res
index 6ce9be08a..55b5d7a0e 100644
--- a/src/screens/HyperSwitch/Routing/RoutingStack.res
+++ b/src/screens/HyperSwitch/Routing/RoutingStack.res
@@ -69,7 +69,7 @@ let make = (~remainingPath, ~previewOnly=false) => {
             0
           }
         })
-        ->Array.map(Js.Nullable.return)
+        ->Array.map(Nullable.make)
 
       setRecords(_ => sortedHistoryRecords)
       setScreenState(_ => PageLoaderWrapper.Success)
diff --git a/src/screens/HyperSwitch/Routing/RoutingUtils.res b/src/screens/HyperSwitch/Routing/RoutingUtils.res
index 423533d8d..5a7b4dd09 100644
--- a/src/screens/HyperSwitch/Routing/RoutingUtils.res
+++ b/src/screens/HyperSwitch/Routing/RoutingUtils.res
@@ -173,18 +173,18 @@ let currentTabNameRecoilAtom = Recoil.atom(. "currentTabName", "ActiveTab")
 module SaveAndActivateButton = {
   @react.component
   let make = (
-    ~onSubmit: (JSON.t, 'a) => promise<Js.Nullable.t<JSON.t>>,
+    ~onSubmit: (JSON.t, 'a) => promise<Nullable.t<JSON.t>>,
     ~handleActivateConfiguration,
   ) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
 
     let handleSaveAndActivate = async _ev => {
       try {
         let onSubmitResponse = await onSubmit(formState.values, false)
         let currentActivatedFromJson =
-          onSubmitResponse->Js.Nullable.toOption->Option.getOr(JSON.Encode.null)
+          onSubmitResponse->Nullable.toOption->Option.getOr(JSON.Encode.null)
         let currentActivatedId =
           currentActivatedFromJson->LogicUtils.getDictFromJsonObject->LogicUtils.getString("id", "")
         let _ = await handleActivateConfiguration(Some(currentActivatedId))
@@ -208,7 +208,7 @@ module ConfigureRuleButton = {
   @react.component
   let make = (~setShowModal) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
 
     <Button
diff --git a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
index dd89dd9e3..209201e9b 100644
--- a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
+++ b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
@@ -308,7 +308,7 @@ let make = (~routingRuleId, ~isActive) => {
       if isSaveRule {
         RescriptReactRouter.replace(`/routing`)
       }
-      Js.Nullable.return(res)
+      Nullable.make(res)
     } catch {
     | Js.Exn.Error(e) =>
       let err = Js.Exn.message(e)->Option.getOr("Something went wrong!")
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 1ccc1c244..596d59420 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -648,7 +648,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
       if isSaveRule {
         RescriptReactRouter.replace(`/routing`)
       }
-      Js.Nullable.return(response)
+      Nullable.make(response)
     } catch {
     | Js.Exn.Error(e) =>
       let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 267c4828a..473bed055 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -492,7 +492,7 @@ module ConfigureRuleButton = {
   @react.component
   let make = (~setShowModal, ~isConfigButtonEnabled) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
 
     <Button
@@ -510,18 +510,18 @@ module ConfigureRuleButton = {
 module SaveAndActivateButton = {
   @react.component
   let make = (
-    ~onSubmit: (JSON.t, 'a) => promise<Js.Nullable.t<JSON.t>>,
+    ~onSubmit: (JSON.t, 'a) => promise<Nullable.t<JSON.t>>,
     ~handleActivateConfiguration,
   ) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
-      ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
+      ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
     )
 
     let handleSaveAndActivate = async _ev => {
       try {
         let onSubmitResponse = await onSubmit(formState.values, false)
         let currentActivatedFromJson =
-          onSubmitResponse->Js.Nullable.toOption->Option.getOr(JSON.Encode.null)
+          onSubmitResponse->Nullable.toOption->Option.getOr(JSON.Encode.null)
         let currentActivatedId =
           currentActivatedFromJson->LogicUtils.getDictFromJsonObject->LogicUtils.getString("id", "")
         let _ = await handleActivateConfiguration(Some(currentActivatedId))
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
index 276026989..d1ee471cd 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
@@ -184,7 +184,7 @@ let getDefaultSelection: Dict.t<
           ->getDictfromDict("tax_on_surcharge")
           ->getFloat("percentage", 0.0),
         },
-      }->Js.Nullable.return,
+      }->Nullable.make,
     }
   } else {
     {
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
index 8c50afe3e..09e49a28d 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -120,7 +120,7 @@ let make = () => {
     setInitialValues(_ => values->SDKPaymentUtils.getTypedValueForPayment)
     setIsSDKOpen(_ => true)
     RescriptReactRouter.push("/sdk")
-    Js.Nullable.null->Promise.resolve
+    Nullable.null->Promise.resolve
   }
 
   <>
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res b/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res
index 2b1b8e2f2..bdf170510 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res
@@ -61,7 +61,7 @@ type paymentType = {
   customer_id: string,
   description: string,
   capture_method: string,
-  amount_to_capture: Js.Nullable.t<float>,
+  amount_to_capture: Nullable.t<float>,
   email: string,
   name: string,
   phone: string,
@@ -71,7 +71,7 @@ type paymentType = {
   billing: billing,
   metadata: metadata,
   return_url: string,
-  payment_type?: Js.Nullable.t<string>,
-  setup_future_usage?: Js.Nullable.t<string>,
-  mandate_data?: Js.Nullable.t<mandateData>,
+  payment_type?: Nullable.t<string>,
+  setup_future_usage?: Nullable.t<string>,
+  mandate_data?: Nullable.t<mandateData>,
 }
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
index e7b7f23a9..de1ab2216 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res
@@ -52,7 +52,7 @@ let initialValueForForm: HSwitchSettingTypes.profileEntity => SDKPaymentTypes.pa
       },
     },
     capture_method: "automatic",
-    amount_to_capture: Js.Nullable.return(100.00),
+    amount_to_capture: Nullable.make(100.00),
     return_url: `${Window.Location.origin}${Window.Location.pathName}`,
   }
 }
@@ -146,10 +146,10 @@ let getTypedValueForPayment: JSON.t => SDKPaymentTypes.paymentType = values => {
       },
     },
     capture_method: "automatic",
-    amount_to_capture: amount === 0.00 ? Js.Nullable.null : Js.Nullable.return(amount),
+    amount_to_capture: amount === 0.00 ? Nullable.null : Nullable.make(amount),
     return_url: dictOfValues->getString("return_url", ""),
-    payment_type: amount === 0.00 ? Js.Nullable.return("setup_mandate") : Js.Nullable.null,
-    setup_future_usage: amount === 0.00 ? Js.Nullable.return("off_session") : Js.Nullable.null,
-    mandate_data: amount === 0.00 ? Js.Nullable.return(mandateData) : Js.Nullable.null,
+    payment_type: amount === 0.00 ? Nullable.make("setup_mandate") : Nullable.null,
+    setup_future_usage: amount === 0.00 ? Nullable.make("off_session") : Nullable.null,
+    mandate_data: amount === 0.00 ? Nullable.make(mandateData) : Nullable.null,
   }
 }
diff --git a/src/screens/HyperSwitch/SDKPayment/WebSDK.res b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
index 103a93cd7..2016437c0 100644
--- a/src/screens/HyperSwitch/SDKPayment/WebSDK.res
+++ b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
@@ -140,7 +140,7 @@ module CheckoutForm = {
 
     React.useEffect3(() => {
       let paymentElement = elements.getElement("payment")
-      switch paymentElement->Js.Nullable.toOption {
+      switch paymentElement->Nullable.toOption {
       | Some(ele) =>
         let paymentVal = {
           "layout": {
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
index db5b70c19..017dbc79d 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res
@@ -358,7 +358,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
     | SETUP_WEBHOOK_PROCESSOR => values->onSubmit
     | _ => setPageView(_ => pageView->ProdOnboardingUtils.getPageView)
     }
-    Js.Nullable.null->Promise.resolve
+    Nullable.null->Promise.resolve
   }
 
   let buttonText = switch verifyDone {
diff --git a/src/screens/HyperSwitch/Settings/BusinessDetails.res b/src/screens/HyperSwitch/Settings/BusinessDetails.res
index 0ac3f44ac..04c2a38d2 100644
--- a/src/screens/HyperSwitch/Settings/BusinessDetails.res
+++ b/src/screens/HyperSwitch/Settings/BusinessDetails.res
@@ -88,7 +88,7 @@ let make = () => {
       | None => setFetchState(_ => Error("Something went wrong!"))
       }
     }
-    Js.Nullable.null
+    Nullable.null
   }
   let fetchMerchantInfo = async () => {
     let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
diff --git a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
index 5a11d3531..0197382e7 100644
--- a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
+++ b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
@@ -155,12 +155,12 @@ let make = (
     }
     setModalState(_ => Successful)
 
-    Js.Nullable.null
+    Nullable.null
   }
 
   let onSubmit = async (values, _) => {
     updateMerchantDetails(values)->ignore
-    Js.Nullable.null
+    Nullable.null
   }
 
   <PageLoaderWrapper screenState>
@@ -183,7 +183,7 @@ let make = (
             visibleColumns
             entity={businessProfileTableEntity}
             showSerialNumber=true
-            actualData={businessProfileValues->Array.map(Js.Nullable.return)}
+            actualData={businessProfileValues->Array.map(Nullable.make)}
             totalResults={businessProfileValues->Array.length}
             offset
             setOffset
diff --git a/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res b/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
index 23565d824..a2cc658e8 100644
--- a/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
+++ b/src/screens/HyperSwitch/Settings/MerchantAccountUtils.res
@@ -508,7 +508,7 @@ let useFetchBusinessProfiles = () => {
       let res = await fetchDetails(url)
       let stringifiedResponse = res->JSON.stringify
       setBusinessProfiles(._ => stringifiedResponse)
-      Js.Nullable.return(stringifiedResponse->getValueFromBusinessProfile)
+      Nullable.make(stringifiedResponse->getValueFromBusinessProfile)
     } catch {
     | Js.Exn.Error(e) => {
         let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
diff --git a/src/screens/HyperSwitch/Sidebar/Sidebar.res b/src/screens/HyperSwitch/Sidebar/Sidebar.res
index 18ecc47c3..cfa166a76 100644
--- a/src/screens/HyperSwitch/Sidebar/Sidebar.res
+++ b/src/screens/HyperSwitch/Sidebar/Sidebar.res
@@ -75,7 +75,7 @@ module SidebarSubOption = {
 module SidebarItem = {
   @react.component
   let make = (~tabInfo, ~isSelected, ~isExpanded) => {
-    let sidebarItemRef = React.useRef(Js.Nullable.null)
+    let sidebarItemRef = React.useRef(Nullable.null)
     let {getSearchParamByLink} = React.useContext(UserPrefContext.userPrefContext)
     let getSearchParamByLink = link => getSearchParamByLink(String.substringToEnd(link, ~start=0))
 
@@ -187,7 +187,7 @@ module NestedSidebarItem = {
     }
     let isMobileView = MatchMedia.useMobileChecker()
 
-    let nestedSidebarItemRef = React.useRef(Js.Nullable.null)
+    let nestedSidebarItemRef = React.useRef(Nullable.null)
 
     <UIUtils.RenderIf condition={isSideBarExpanded}>
       {switch tabInfo {
@@ -249,7 +249,7 @@ module NestedSectionItem = {
       ""
     }
 
-    let sidebarNestedSectionRef = React.useRef(Js.Nullable.null)
+    let sidebarNestedSectionRef = React.useRef(Nullable.null)
 
     let sectionExpandedAnimation = `rounded-sm transition duration-[250ms] ease-in-out`
 
@@ -450,7 +450,7 @@ let make = (
 ) => {
   let fetchApi = AuthHooks.useApiFetcher()
   let isMobileView = MatchMedia.useMobileChecker()
-  let sideBarRef = React.useRef(Js.Nullable.null)
+  let sideBarRef = React.useRef(Nullable.null)
   let email = HSLocalStorage.getFromMerchantDetails("email")
   let (_authStatus, setAuthStatus) = React.useContext(AuthInfoProvider.authStatusContext)
   let {getFromSidebarDetails} = React.useContext(SidebarProvider.defaultContext)
diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
index 1e2ea6c88..d1e6e992b 100644
--- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
+++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypal.res
@@ -52,7 +52,7 @@ let make = () => {
       setScreenState(_ => PageLoaderWrapper.Loading)
       let enums =
         (await getEnumDetails(QuickStartUtils.quickStartEnumIntialArray))
-        ->Js.Nullable.toOption
+        ->Nullable.toOption
         ->Option.getOr(Dict.make())
         ->JSON.Encode.object
         ->QuickStartUtils.getTypedValueFromDict
diff --git a/src/screens/HyperSwitch/Surcharge/Surcharge.res b/src/screens/HyperSwitch/Surcharge/Surcharge.res
index 31cb259c8..fc61652e4 100644
--- a/src/screens/HyperSwitch/Surcharge/Surcharge.res
+++ b/src/screens/HyperSwitch/Surcharge/Surcharge.res
@@ -187,7 +187,7 @@ let make = () => {
       let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       showToast(~message=err, ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let validate = (values: JSON.t) => {
diff --git a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
index 4f3ae3368..31c08b522 100644
--- a/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
+++ b/src/screens/HyperSwitch/Surcharge/SurchargeUtils.res
@@ -15,7 +15,7 @@ let defaultSurcharge: AdvancedRoutingTypes.surchargeDetailsType = {
 let surchargeRules: AdvancedRoutingTypes.rule = {
   name: "rule_1",
   connectorSelection: {
-    surcharge_details: defaultSurcharge->Js.Nullable.return,
+    surcharge_details: defaultSurcharge->Nullable.make,
   },
   statements: statementObject,
 }
@@ -26,7 +26,7 @@ let buildInitialSurchargeValue: threeDsRoutingType = {
   algorithm: {
     rules: [surchargeRules],
     defaultSelection: {
-      surcharge_details: Js.Nullable.null,
+      surcharge_details: Nullable.null,
     },
     metadata: JSON.Encode.null,
   },
@@ -89,10 +89,7 @@ let ruleInfoTypeMapper: Dict.t<JSON.t> => AdvancedRoutingTypes.algorithmData = j
 }
 
 let getDefaultSurchargeType = surchargeType => {
-  surchargeType
-  ->Option.getOr(Js.Nullable.null)
-  ->Js.Nullable.toOption
-  ->Option.getOr(defaultSurcharge)
+  surchargeType->Option.getOr(Nullable.null)->Nullable.toOption->Option.getOr(defaultSurcharge)
 }
 
 let validateSurchargeRate = ruleDict => {
diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index bf9043b79..5c783afc3 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -47,7 +47,7 @@ module NewAccountCreationModal = {
       }
 
       setShowModal(_ => false)
-      Js.Nullable.null
+      Nullable.null
     }
 
     let onSubmit = (values, _) => {
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index 877c06d4d..4c450c119 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -203,7 +203,7 @@ let make = () => {
       let err = Js.Exn.message(e)->Option.getOr("Failed to Fetch!")
       setScreenState(_ => Error(err))
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let validate = (values: JSON.t) => {
diff --git a/src/screens/HyperSwitch/UserManagement/InviteUsers.res b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
index 6e80f1d49..6720ff578 100644
--- a/src/screens/HyperSwitch/UserManagement/InviteUsers.res
+++ b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
@@ -151,7 +151,7 @@ let make = () => {
       (),
     )
     RescriptReactRouter.push("/users")
-    Js.Nullable.null
+    Nullable.null
   }
 
   let onSubmit = (values, _) => {
diff --git a/src/screens/HyperSwitch/UserManagement/ShowUserData.res b/src/screens/HyperSwitch/UserManagement/ShowUserData.res
index dc3b5a5f9..7ae4492ed 100644
--- a/src/screens/HyperSwitch/UserManagement/ShowUserData.res
+++ b/src/screens/HyperSwitch/UserManagement/ShowUserData.res
@@ -1,6 +1,6 @@
 open UserManagementUtils
 
-external typeConversion: array<Js.Nullable.t<UserRoleEntity.userTableTypes>> => array<
+external typeConversion: array<Nullable.t<UserRoleEntity.userTableTypes>> => array<
   UserRoleEntity.userTableTypes,
 > = "%identity"
 
@@ -121,7 +121,7 @@ let make = () => {
       )
       let res = await fetchDetails(userDataURL)
       let userData = res->LogicUtils.getArrayDataFromJson(UserRoleEntity.itemToObjMapperForUser)
-      setUsersList(_ => userData->Array.map(Js.Nullable.return))
+      setUsersList(_ => userData->Array.map(Nullable.make))
     } catch {
     | _ => ()
     }
diff --git a/src/screens/HyperSwitch/UserManagement/UserRoleEntry.res b/src/screens/HyperSwitch/UserManagement/UserRoleEntry.res
index be720acba..5d13c7546 100644
--- a/src/screens/HyperSwitch/UserManagement/UserRoleEntry.res
+++ b/src/screens/HyperSwitch/UserManagement/UserRoleEntry.res
@@ -25,8 +25,8 @@ let make = () => {
       )
       let res = await fetchDetails(userDataURL)
       let userData = res->LogicUtils.getArrayDataFromJson(itemToObjMapperForUser)
-      setUsersData(_ => userData->Array.map(Js.Nullable.return))
-      setUsersFilterData(_ => userData->Array.map(Js.Nullable.return))
+      setUsersData(_ => userData->Array.map(Nullable.make))
+      setUsersFilterData(_ => userData->Array.map(Nullable.make))
       setScreenStateUsers(_ => PageLoaderWrapper.Success)
     } catch {
     | _ => setScreenStateUsers(_ => PageLoaderWrapper.Error(""))
@@ -60,8 +60,8 @@ let make = () => {
     open LogicUtils
     let (searchText, arr) = ob
     let filteredList = if searchText->String.length > 0 {
-      arr->Array.filter((obj: Js.Nullable.t<userTableTypes>) => {
-        switch Js.Nullable.toOption(obj) {
+      arr->Array.filter((obj: Nullable.t<userTableTypes>) => {
+        switch Nullable.toOption(obj) {
         | Some(obj) =>
           isContainingStringLowercase(obj.email, searchText) ||
           isContainingStringLowercase(obj.name, searchText)
diff --git a/src/screens/HyperSwitch/Utils/TableSearchFilter.res b/src/screens/HyperSwitch/Utils/TableSearchFilter.res
index 4e337c2d6..24d82ae49 100644
--- a/src/screens/HyperSwitch/Utils/TableSearchFilter.res
+++ b/src/screens/HyperSwitch/Utils/TableSearchFilter.res
@@ -20,7 +20,7 @@ let make = (
     setSearchVal(_ => value)
   }
 
-  let handleSubmit = (_, _) => {Js.Nullable.null->Js.Promise.resolve}
+  let handleSubmit = (_, _) => {Nullable.null->Js.Promise.resolve}
 
   let inputSearch: ReactFinalForm.fieldRenderPropsInput = {
     name: "name",
diff --git a/src/screens/componentsDemo/DragDrop.res b/src/screens/componentsDemo/DragDrop.res
index d7a182fab..8c5f6c913 100644
--- a/src/screens/componentsDemo/DragDrop.res
+++ b/src/screens/componentsDemo/DragDrop.res
@@ -37,7 +37,7 @@ let make = (
   }
   let onDragEnd = result => {
     // dropped outside the list
-    let dest = Js.Nullable.toOption(result["destination"])
+    let dest = Nullable.toOption(result["destination"])
     let hasCorrectDestination = switch dest {
     | None => false
     | Some(_a) => true
diff --git a/src/screens/componentsDemo/DragDropComponent.res b/src/screens/componentsDemo/DragDropComponent.res
index 079842a5e..ed3c5cc97 100644
--- a/src/screens/componentsDemo/DragDropComponent.res
+++ b/src/screens/componentsDemo/DragDropComponent.res
@@ -15,7 +15,7 @@ let reorder = (currentState, startIndex, endIndex) => {
 let make = (~isHorizontal=true, ~listItems, ~gap="", ~setListItems, ~keyExtractor) => {
   let onDragEnd = result => {
     // dropped outside the list
-    let dest = Js.Nullable.toOption(result["destination"])
+    let dest = Nullable.toOption(result["destination"])
 
     switch dest {
     | Some(a) => {
diff --git a/src/screens/componentsDemo/DragNDropDemo.res b/src/screens/componentsDemo/DragNDropDemo.res
index db803f9f3..f8e2ce537 100644
--- a/src/screens/componentsDemo/DragNDropDemo.res
+++ b/src/screens/componentsDemo/DragNDropDemo.res
@@ -53,7 +53,7 @@ let default = (props: props) => {
 
   let onDragEnd = result => {
     // dropped outside the list
-    let dest = Js.Nullable.toOption(result["destination"])
+    let dest = Nullable.toOption(result["destination"])
     let hasCorrectDestination = switch dest {
     | None => false
     | Some(_a) => true
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
index 9aebc4d01..aa43091f2 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res
@@ -46,7 +46,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
     } catch {
     | Js.Exn.Error(e) => showToast(~message={e->handleAuthError}, ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let getUserWithEmailPassword = async (body, email, userType) => {
@@ -65,7 +65,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
     } catch {
     | Js.Exn.Error(e) => showToast(~message={e->handleAuthError}, ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let openPlayground = _ => {
@@ -85,7 +85,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
     } catch {
     | _ => showToast(~message="Password Reset Failed, Try again", ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let setForgetPassword = async body => {
@@ -97,7 +97,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
     } catch {
     | _ => showToast(~message="Forgot Password Failed, Try again", ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let resendVerifyEmail = async body => {
@@ -109,7 +109,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
     } catch {
     | _ => showToast(~message="Resend mail failed, Try again", ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let logMixpanelEvents = email => {
@@ -164,14 +164,14 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType,
             let body = email->getEmailBody()
 
             setForgetPassword(body)
-          | _ => Js.Promise.make((~resolve, ~reject as _: _) => resolve(. Js.Nullable.null))
+          | _ => Js.Promise.make((~resolve, ~reject as _: _) => resolve(. Nullable.null))
           }
         }
       )
     } catch {
     | _ => showToast(~message="Something went wrong, Try again", ~toastType=ToastError, ())
     }
-    Js.Nullable.null
+    Nullable.null
   }
 
   let resendEmail = () => {
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
index 0bc7143a3..42c5db84e 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
@@ -347,7 +347,7 @@ module Header = {
         <div
           onClick={_ => {
             form.resetFieldState("email")
-            form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)
+            form.reset(JSON.Encode.object(Dict.make())->Nullable.make)
             setAuthType(_ => authType)
             path->RescriptReactRouter.push
           }}
diff --git a/src/server/NodeJs.res b/src/server/NodeJs.res
index aeb902443..37d1ba066 100644
--- a/src/server/NodeJs.res
+++ b/src/server/NodeJs.res
@@ -33,7 +33,7 @@ module Http = {
   external asUrl: string => url = "%identity"
 
   type on = (. string, unit => unit) => unit
-  type read = (. unit) => Js.Nullable.t<string>
+  type read = (. unit) => Nullable.t<string>
   type headers = Dict.t<string>
   type server
   type request = {url: url, headers: headers, method: string, on: on, read: read}
diff --git a/src/utils/UserPrefUtils.res b/src/utils/UserPrefUtils.res
index 4662eba3e..b4d94c5d4 100644
--- a/src/utils/UserPrefUtils.res
+++ b/src/utils/UserPrefUtils.res
@@ -70,7 +70,7 @@ let saveUserPref = (userPref: Dict.t<userPref>) => {
 
 // this will be changed to api call for updatedUserPref the call will happen only once in initialLoad and we will store it in context
 let getUserPref = () => {
-  switch LocalStorage.getItem(userPreferenceKeyInLocalStorage)->Js.Nullable.toOption {
+  switch LocalStorage.getItem(userPreferenceKeyInLocalStorage)->Nullable.toOption {
   | Some(str) =>
     str->LogicUtils.safeParse->JSON.Decode.object->Option.getOr(Dict.make())->converToUserPref