From ade63aa8177d6269e02ac0db4f6e63867511b661 Mon Sep 17 00:00:00 2001
From: Riddhiagrawal001 <50551695+Riddhiagrawal001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:17:04 +0530
Subject: [PATCH 01/11] fix: Added configure return url after business profile
 (#82)

Co-authored-by: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
---
 .../BusinessMapping/BusinessMappingUtils.res  |  2 +-
 .../BusinessMapping/BusinessProfile.res       | 86 +++++++++++++++++--
 2 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res
index 6a21fd6cd..6d2cdafd2 100644
--- a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res
+++ b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessMappingUtils.res
@@ -17,7 +17,7 @@ let labelField = FormRenderer.makeFieldInfo(
   (),
 )
 
-type modalState = Loading | Edit
+type modalState = Loading | Edit | Successful
 
 let validateEmptyValue = (key, errors) => {
   switch key {
diff --git a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
index 4cea24ef1..ad54c171b 100644
--- a/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
+++ b/src/screens/HyperSwitch/Settings/BusinessMapping/BusinessProfile.res
@@ -1,9 +1,30 @@
+module WarningArea = {
+  @react.component
+  let make = (~warningText) => {
+    <h1 className="text-orange-950 bg-orange-100 border w-full py-2 px-4 rounded-md ">
+      <span className="text-orange-950 font-bold text-fs-14 mr-2"> {"NOTE:"->React.string} </span>
+      {warningText->React.string}
+    </h1>
+  }
+}
 module AddEntryBtn = {
   @react.component
-  let make = (~onSubmit, ~modalState, ~showModal, ~setShowModal, ~list, ~isFromSettings=true) => {
+  let make = (
+    ~onSubmit,
+    ~modalState,
+    ~showModal,
+    ~setShowModal,
+    ~list,
+    ~isFromSettings=true,
+    ~updatedProfileId,
+    ~setModalState,
+  ) => {
     open HSwitchUtils
     open BusinessMappingUtils
-    let initialValues = [("profile_name", "Default"->Js.Json.string)]->Js.Dict.fromArray
+    let initialValues =
+      [
+        ("profile_name", `default${list->Js.Array2.length->string_of_int}`->Js.Json.string),
+      ]->Js.Dict.fromArray
     let modalBody =
       <div>
         {switch modalState {
@@ -37,9 +58,34 @@ module AddEntryBtn = {
               </div>
             </LabelVisibilityContext>
           </Form>
+        | Successful =>
+          <div className="flex flex-col gap-6 justify-center items-end mx-4">
+            <WarningArea
+              warningText="Warning! Now that you've configured more than one profile, you must mandatorily pass 'profile_id' in payments API request every time"
+            />
+            <p className="text-grey-700">
+              {"Business Profile successfully created! Set up your payments settings like webhooks, return url for your new profile before trying a payment."->React.string}
+            </p>
+            <Button
+              text={"Configure payment settings"}
+              buttonType=Primary
+              onClick={_ => {
+                if updatedProfileId->Js.String2.length > 0 {
+                  RescriptReactRouter.replace(`/payment-settings/${updatedProfileId}`)
+                  setModalState(_ => Edit)
+                }
+              }}
+              customButtonStyle="!w-1/3 mt-6"
+            />
+          </div>
         }}
       </div>
 
+    let modalHeaderText = switch modalState {
+    | Edit | Loading => "Add Business Profile Name"
+    | Successful => "Configure payment settings"
+    }
+
     <div>
       <UIUtils.RenderIf condition=isFromSettings>
         <Button
@@ -52,7 +98,7 @@ module AddEntryBtn = {
       </UIUtils.RenderIf>
       <Modal
         showModal
-        modalHeading="Add Business Profile Name"
+        modalHeading=modalHeaderText
         setShowModal
         closeOnOutsideClick=true
         modalClass="w-full max-w-2xl m-auto !bg-white dark:!bg-jp-gray-lightgray_background">
@@ -78,6 +124,7 @@ let make = (
   let (showModal, setShowModal) = React.useState(_ => false)
   let (modalState, setModalState) = React.useState(_ => Edit)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Success)
+  let (updatedProfileId, setUpdatedProfileId) = React.useState(_ => "")
 
   let businessProfileValues =
     HyperswitchAtom.businessProfilesAtom
@@ -90,7 +137,10 @@ let make = (
     try {
       setScreenState(_ => PageLoaderWrapper.Loading)
       let url = getURL(~entityName=BUSINESS_PROFILE, ~methodType=Post, ())
-      let _ = await updateDetails(url, body, Post)
+      let response = await updateDetails(url, body, Post)
+      setUpdatedProfileId(_ =>
+        response->LogicUtils.getDictFromJsonObject->LogicUtils.getString("profile_id", "")
+      )
       fetchBusinessProfiles()->ignore
       showToast(~message="Your Entry added successfully", ~toastType=ToastState.ToastSuccess, ())
       if !isFromSettings {
@@ -100,9 +150,12 @@ let make = (
     } catch {
     | _ => setScreenState(_ => PageLoaderWrapper.Error(""))
     }
-    isFromSettings ? setShowModal(_ => false) : setShowModalFromOtherScreen(_ => false)
-    setModalState(_ => Edit)
-    setShowModal(_ => false)
+
+    if !isFromSettings {
+      setShowModalFromOtherScreen(_ => false)
+    }
+    setModalState(_ => Successful)
+
     Js.Nullable.null
   }
 
@@ -114,11 +167,16 @@ let make = (
   <PageLoaderWrapper screenState>
     <UIUtils.RenderIf condition=isFromSettings>
       <div className="relative h-full">
-        <div className="flex flex-col-reverse md:flex-col">
+        <div className="flex flex-col-reverse md:flex-col gap-2">
           <PageUtils.PageHeading
             title="Business Profiles"
             subTitle="Add and manage profiles to represent different businesses across countries."
           />
+          <UIUtils.RenderIf condition={businessProfileValues->Js.Array2.length > 1}>
+            <WarningArea
+              warningText="Warning! Now that you've configured more than one profile, you must mandatorily pass 'profile_id' in payments API request every time"
+            />
+          </UIUtils.RenderIf>
           <LoadedTable
             title="Business profiles"
             hideTitle=true
@@ -133,7 +191,15 @@ let make = (
             currrentFetchCount={businessProfileValues->Js.Array2.length}
           />
           <div className="absolute right-0 -top-3">
-            <AddEntryBtn onSubmit modalState showModal setShowModal list={businessProfileValues} />
+            <AddEntryBtn
+              onSubmit
+              modalState
+              showModal
+              setShowModal
+              list={businessProfileValues}
+              updatedProfileId
+              setModalState
+            />
           </div>
         </div>
       </div>
@@ -146,6 +212,8 @@ let make = (
         showModal={showModalFromOtherScreen}
         setShowModal={setShowModalFromOtherScreen}
         list={businessProfileValues}
+        updatedProfileId
+        setModalState
       />
     </UIUtils.RenderIf>
   </PageLoaderWrapper>

From f45d8dd6016f859b76013364c83c0758e5a42114 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:17:50 +0530
Subject: [PATCH 02/11] fix: SDK Processing - Go to payments not working fix
 (#88)

---
 src/screens/HyperSwitch/SDKPayment/TestPayment.res | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
index a085f26ea..a09ef692c 100644
--- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res
+++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
@@ -70,15 +70,14 @@ let make = (
     )
     if status === "succeeded" {
       setPaymentStatus(_ => SUCCESS)
-      setPaymentId(_ => paymentIdFromPaymemtIntentClientSecret)
     } else if status === "failed" {
       setPaymentStatus(_ => FAILED(""))
-      setPaymentId(_ => paymentIdFromPaymemtIntentClientSecret)
     } else if status === "processing" {
       setPaymentStatus(_ => PROCESSING)
     } else {
       setPaymentStatus(_ => INCOMPLETE)
     }
+    setPaymentId(_ => paymentIdFromPaymemtIntentClientSecret)
     if status->Js.String2.length <= 0 && keyValue->Js.String2.length > 0 {
       getClientSecret()->ignore
     }
@@ -116,6 +115,7 @@ let make = (
         buttonOnClick={_ => onProceed(~paymentId)->ignore}
         customWidth
         bgColor="bg-yellow-pending_page_bg"
+        isButtonVisible={paymentId->Belt.Option.isSome}
       />
 
     | PROCESSING =>
@@ -126,6 +126,7 @@ let make = (
         buttonOnClick={_ => onProceed(~paymentId)->ignore}
         customWidth
         bgColor="bg-yellow-pending_page_bg"
+        isButtonVisible={paymentId->Belt.Option.isSome}
       />
     | _ => React.null
     }}

From 6ad715fb11da557f4f07ff35e8f616b69684ff0c Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:24:15 +0530
Subject: [PATCH 03/11] refactor: Common file for all identity functions (#86)

---
 .../NestedDropdownWithCalendar.res            |  2 +-
 src/components/Base64ImageInputWithDnD.res    |  9 +++----
 src/components/BreadCrumb.res                 |  2 --
 src/components/CsvFileUpload.res              |  3 +--
 src/components/CsvInputField.res              | 15 +++++------
 src/components/DateOnlySelector.res           |  3 +--
 src/components/DatePicker.res                 |  9 +++----
 src/components/DateRangePicker.res            | 15 ++++-------
 .../DistributionDonut/DistributionDonut.res   |  3 +--
 src/components/DraggableFilter.res            |  4 +--
 src/components/DynamicChart.res               | 15 ++++++-----
 src/components/DynamicTabs.res                |  1 -
 .../InfraDateRangeCustomSelection.res         |  1 -
 src/components/InfraDateRangePicker.res       | 12 +++++----
 src/components/InputFields.res                |  7 +++--
 src/components/InputFields.resi               |  1 -
 src/components/LocalFilters.res               |  2 --
 src/components/MultiLineInputBox.res          |  5 ++--
 src/components/MultiLineTextInput.res         |  4 +--
 src/components/MultipleFileUpload.res         | 15 +++++------
 src/components/NestedDropdown.res             |  5 ++--
 src/components/NewCalendar.res                |  3 +--
 src/components/NewDateRangePicker.res         | 23 +++-------------
 src/components/Paginator.res                  |  4 +--
 src/components/RangeSlider.res                |  9 +++----
 src/components/RatingOptions.res              |  4 +--
 src/components/ReactWindowTable.res           |  3 ++-
 src/components/RedirectSearchInput.res        |  7 ++---
 src/components/Table.resi                     |  2 --
 src/components/TableLocalFilters.res          |  1 -
 src/components/TableUtils.res                 |  2 --
 src/components/TableUtils.resi                |  2 --
 src/components/TimeInput.res                  |  8 +++---
 src/components/TimeRangeInput.res             |  1 -
 src/components/form/ChipTextInput.res         |  3 +--
 src/components/form/ColorPickerInput.res      |  3 +--
 src/components/form/ComboInputField.res       | 27 ++++++++++++-------
 src/components/form/FileUpload.res            | 14 ++++------
 src/components/form/MultipleTextInput.res     |  3 ---
 src/components/form/NumericTextInput.res      |  5 ++--
 src/components/form/PasswordStrengthInput.res |  2 --
 .../form/PasswordStrengthInputAsChips.res     |  2 --
 src/components/form/SelectBoxCard.res         |  3 +--
 src/components/form/TextInput.res             |  3 +--
 .../priority-logics/AddPLGateway.res          | 21 +++++++--------
 .../priority-logics/PriorityLogicUtils.res    |  2 --
 .../hyperswitch/HyperSwitchApp.res            |  1 -
 src/genericUtils/DOMUtils.res                 |  2 --
 src/genericUtils/Identity.res                 |  6 +++++
 .../HyperSwitch/Analytics/Analytics.res       |  2 --
 .../Connectors/ConnectorAccountDetails.res    |  1 -
 .../HyperSwitch/Connectors/ConnectorList.res  |  2 --
 .../ApplePayWalletIntegrationTypes.res        |  1 -
 .../FraudAndRisk/FRMPaymentMethods.res        | 13 +++++----
 src/screens/HyperSwitch/Home/HomeUtils.res    |  1 -
 .../RoutingRevamp/AddRuleGateway.res          | 17 +++++-------
 .../RoutingRevamp/AdvancedRouting.res         |  3 +--
 .../RoutingRevamp/AdvancedRoutingUIUtils.res  | 24 ++++++++---------
 .../RoutingRevamp/BasicDetailsForm.res        |  5 +---
 .../HyperSwitch/SDKPayment/SDKPage.res        |  4 +--
 .../UserOnboardingUIUtils.res                 |  7 +++--
 .../AnalyticsCommonComponents.res             |  9 +++----
 .../HSwitchLoginFlow/HyperSwitchAuthUtils.res |  1 -
 src/utils/JsonFlattenUtils.res                |  4 +--
 64 files changed, 154 insertions(+), 239 deletions(-)
 create mode 100644 src/genericUtils/Identity.res

diff --git a/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res b/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
index a101dc0dc..fe729d39d 100644
--- a/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
+++ b/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
@@ -25,7 +25,7 @@ let make = (
         endDateArr->Belt.Array.get(i)->Belt.Option.getWithDefault(x),
       ))
 
-    input.onChange(newArr->NestedDropdown.formToArray)
+    input.onChange(newArr->Identity.anyTypeToReactEvent)
   }
 
   let showCalendars = React.useMemo1(() => {
diff --git a/src/components/Base64ImageInputWithDnD.res b/src/components/Base64ImageInputWithDnD.res
index 3495dc2fa..40fa90417 100644
--- a/src/components/Base64ImageInputWithDnD.res
+++ b/src/components/Base64ImageInputWithDnD.res
@@ -1,4 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external strToDomImg: string => Webapi.Dom.Image.t = "%identity"
 @send external drawImage: (Webapi.Canvas.Canvas2d.t, 'a, int, int) => unit = "drawImage"
 @send external toDataURL: 'a => string = "toDataURL"
@@ -57,7 +56,7 @@ let make = (
   )
   let clearImage = _evt => {
     setFilename(_ => "")
-    input.onChange(""->toReactEvent)
+    input.onChange(""->Identity.stringToFormReactEvent)
   }
   let onChange = evt => {
     let target = ReactEvent.Form.target(evt)
@@ -76,7 +75,7 @@ let make = (
         let target = ReactEvent.Form.target(e)
         let data = target["result"]
         setIsNewUpload(_ => true)
-        input.onChange(toReactEvent(data))
+        input.onChange(data->Identity.anyTypeToReactEvent)
       }
     }
   }
@@ -106,7 +105,7 @@ let make = (
       context->drawImage(img, 0, 0)
       toDataURL(canvas)
     }
-    input.onChange(a->toReactEvent)
+    input.onChange(a->Identity.stringToFormReactEvent)
   }
   <div
     onDragOver={ev => {
@@ -129,7 +128,7 @@ let make = (
             let target = ReactEvent.Form.target(e)
             let data = target["result"]
             setIsNewUpload(_ => true)
-            input.onChange(toReactEvent(data))
+            input.onChange(data->Identity.anyTypeToReactEvent)
           }
         }
       }
diff --git a/src/components/BreadCrumb.res b/src/components/BreadCrumb.res
index 652a9b16e..ae374f060 100644
--- a/src/components/BreadCrumb.res
+++ b/src/components/BreadCrumb.res
@@ -1,5 +1,3 @@
-external jsonToarr: Js.Json.t => array<'a> = "%identity"
-
 type status = Active | Disabled | Completed
 
 type breadCrumb_options = {
diff --git a/src/components/CsvFileUpload.res b/src/components/CsvFileUpload.res
index 8e1360611..30629d66a 100644
--- a/src/components/CsvFileUpload.res
+++ b/src/components/CsvFileUpload.res
@@ -1,4 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 type t
 
 type formData
@@ -28,7 +27,7 @@ let make = (
     setFilenameVal(_ => "")
     onFileUpload(None)
 
-    input.onChange(""->toReactEvent)
+    input.onChange(""->Identity.stringToFormReactEvent)
   }
 
   let onChange = evt => {
diff --git a/src/components/CsvInputField.res b/src/components/CsvInputField.res
index 4ead42446..55f90010a 100644
--- a/src/components/CsvInputField.res
+++ b/src/components/CsvInputField.res
@@ -1,13 +1,10 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external jsonToarr: Js.Json.t => array<'a> = "%identity"
-external arrToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external strToReactEvent: string => ReactEvent.Form.t = "%identity"
 
 module FilenameSaver = {
   @react.component
   let make = (~input: ReactFinalForm.fieldRenderPropsInput, ~fileName) => {
     React.useEffect1(() => {
-      let reactEvFilename = fileName->toReactEvent
+      let reactEvFilename = fileName->Identity.anyTypeToReactEvent
       input.onChange(reactEvFilename)
       None
     }, [fileName])
@@ -110,12 +107,12 @@ let make = (
   let clearCsv = _evt => {
     setFilename(_ => "")
     setKey(pre => pre + 1)
-    input.onChange(arrToReactEvent([]))
+    input.onChange(Identity.arrofStringToReactEvent([]))
   }
   let clearData = _ev => {
     setFilename(_ => "")
     setKey(pre => pre + 1)
-    input.onChange(strToReactEvent(""))
+    input.onChange(Identity.stringToFormReactEvent(""))
   }
 
   let toast = (message, toastType) => {
@@ -164,7 +161,7 @@ let make = (
                 })
 
                 if errorLines->Js.Array2.length === 0 {
-                  input.onChange(toReactEvent(res))
+                  input.onChange(res->Identity.anyTypeToReactEvent)
                   toast("File Uploaded Successfully", ToastSuccess)
                 }
 
@@ -175,7 +172,7 @@ let make = (
               }
 
             | None => {
-                input.onChange(toReactEvent(res))
+                input.onChange(res->Identity.anyTypeToReactEvent)
                 toast("File Uploaded Successfully", ToastSuccess)
               }
             }
@@ -188,7 +185,7 @@ let make = (
           }
         | _ =>
           setIsNewUpload(_ => true)
-          input.onChange(toReactEvent(csv))
+          input.onChange(csv->Identity.anyTypeToReactEvent)
           toast("File Uploaded Successfully", ToastSuccess)
         }
       }
diff --git a/src/components/DateOnlySelector.res b/src/components/DateOnlySelector.res
index 35353fbd9..a08ffd736 100644
--- a/src/components/DateOnlySelector.res
+++ b/src/components/DateOnlySelector.res
@@ -1,4 +1,3 @@
-external strToForm: string => ReactEvent.Form.t = "%identity"
 module DateCalendar = {
   open Calendar
   @react.component
@@ -55,7 +54,7 @@ let make = (~input: ReactFinalForm.fieldRenderPropsInput) => {
     let currentDateSplit = Js.String2.split(str, "-")
     let currentDateDay = currentDateSplit[2]->Belt.Option.getWithDefault("")
     setSelectedDate(_ => currentDateDay)
-    input.onChange(currentDateDay->strToForm)
+    input.onChange(currentDateDay->Identity.stringToFormReactEvent)
   }
   OutsideClick.useOutsideClick(
     ~refs=ArrayOfRef([dropdownRef]),
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index 5eb475e1d..83f694b19 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -1,6 +1,5 @@
-external strToForm: string => ReactEvent.Form.t = "%identity"
 external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
-external formEvAsString: ReactEvent.Form.t => string = "%identity"
+
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -92,7 +91,7 @@ let make = (
       currentDateSecondsFormat,
     )
     setDate(_ => currentDateTimeCheck)
-    input.onChange(currentDateTimeCheck->strToForm)
+    input.onChange(currentDateTimeCheck->Identity.stringToFormReactEvent)
   }
   React.useEffect1(() => {
     if input.value == ""->Js.Json.string {
@@ -167,7 +166,7 @@ let make = (
     name: "string",
     onBlur: _ev => (),
     onChange: timeValEv => {
-      let timeVal = timeValEv->formEvAsString
+      let timeVal = timeValEv->Identity.formReactEventToString
       if selectedDate !== "" {
         let todayDayJsObj = Js.Date.make()->Js.Date.toString->DayJs.getDayJsForString
         let todayTime = todayDayJsObj.format(. "HH:mm:ss")
@@ -198,7 +197,7 @@ let make = (
         )
         let timestamp = TimeZoneHook.formattedISOString(dateTimeCheck, format)
         setDate(_ => timestamp)
-        input.onChange(timestamp->Table.dateFormat(format)->strToForm)
+        input.onChange(timestamp->Table.dateFormat(format)->Identity.stringToFormReactEvent)
       }
     },
     onFocus: _ev => (),
diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
index eeb831c42..96243c58a 100644
--- a/src/components/DateRangePicker.res
+++ b/src/components/DateRangePicker.res
@@ -1,6 +1,3 @@
-external strToForm: string => ReactEvent.Form.t = "%identity"
-external formEvAsString: ReactEvent.Form.t => string = "%identity"
-
 let defaultCellHighlighter = (_): Calendar.highlighter => {
   {
     highlightSelf: false,
@@ -277,7 +274,7 @@ module Base = {
         setStartDateVal(_ => localStartDate)
         setEndDateVal(_ => localEndDate)
         switch optInput {
-        | Some(ip) => ip.onChange(localOpt->strToForm)
+        | Some(ip) => ip.onChange(localOpt->Identity.stringToFormReactEvent)
         | None => ()
         }
       }
@@ -418,7 +415,7 @@ module Base = {
       setIsDropdownExpanded(_ => false)
       saveDates()
       switch optInput {
-      | Some(ip) => ip.onChange("custom_range"->strToForm)
+      | Some(ip) => ip.onChange("custom_range"->Identity.stringToFormReactEvent)
       | None => ()
       }
     }
@@ -458,7 +455,7 @@ module Base = {
       name: "string",
       onBlur: _ev => (),
       onChange: timeValEv => {
-        let startTimeVal = timeValEv->formEvAsString
+        let startTimeVal = timeValEv->Identity.formReactEventToString
         let endTime = localEndDate->getTimeStringForValue(isoStringToCustomTimeZone)
 
         if localStartDate !== "" {
@@ -481,7 +478,7 @@ module Base = {
       name: "string",
       onBlur: _ev => (),
       onChange: timeValEv => {
-        let endTimeVal = timeValEv->formEvAsString
+        let endTimeVal = timeValEv->Identity.formReactEventToString
         let startTime = localStartDate->getTimeStringForValue(isoStringToCustomTimeZone)
         if localEndDate !== "" {
           if disableFutureDates && selectedEndDate == todayDate && endTimeVal > todayTime {
@@ -885,14 +882,12 @@ module Base = {
   }
 }
 
-external asFormEvent: string => ReactEvent.Form.t = "%identity"
-
 let useStateForInput = (input: ReactFinalForm.fieldRenderPropsInput) => {
   React.useMemo1(() => {
     let val = input.value->Js.Json.decodeString->Belt.Option.getWithDefault("")
     let onChange = fn => {
       let newVal = fn(val)
-      input.onChange(newVal->asFormEvent)
+      input.onChange(newVal->Identity.stringToFormReactEvent)
     }
 
     (val, onChange)
diff --git a/src/components/DistributionDonut/DistributionDonut.res b/src/components/DistributionDonut/DistributionDonut.res
index 623635db1..6a056d565 100644
--- a/src/components/DistributionDonut/DistributionDonut.res
+++ b/src/components/DistributionDonut/DistributionDonut.res
@@ -1,5 +1,4 @@
 external objToJson: {..} => Js.Json.t = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 
 type dataPoint = {y: int, name: string}
 
@@ -160,7 +159,7 @@ let make = (
           let filterInput: ReactFinalForm.fieldRenderPropsInput = {
             name: "Get By",
             onBlur: _ev => (),
-            onChange: ev => {setGroupBy(_ => ev->formEventToStr)},
+            onChange: ev => {setGroupBy(_ => ev->Identity.formReactEventToString)},
             onFocus: _ev => (),
             value: groupBy->Js.Json.string,
             checked: true,
diff --git a/src/components/DraggableFilter.res b/src/components/DraggableFilter.res
index 04ef0f11d..0166806d9 100644
--- a/src/components/DraggableFilter.res
+++ b/src/components/DraggableFilter.res
@@ -4,8 +4,6 @@ type rec options = {
   options: option<array<options>>,
 }
 
-external formToArray: 'a => ReactEvent.Form.t = "%identity"
-
 module TypeText = {
   @react.component
   let make = () => {
@@ -429,7 +427,7 @@ let make = (
   }
 
   React.useEffect1(() => {
-    input.onChange(dataSelectedBase->formToArray)
+    input.onChange(dataSelectedBase->Identity.anyTypeToReactEvent)
     None
   }, [dataSelectedBase])
   let keyExtractor = (index, data, isDragging) => {
diff --git a/src/components/DynamicChart.res b/src/components/DynamicChart.res
index 35e06740c..ab62cba4a 100644
--- a/src/components/DynamicChart.res
+++ b/src/components/DynamicChart.res
@@ -292,9 +292,6 @@ let useChartFetch = (~setStatusDict) => {
   fetchChartData
 }
 
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
-external tofloat: string => float = "%identity"
-
 let granularityMapper = (granularity: granularity) => {
   switch granularity {
   | G_ONEDAY => "G_ONEDAY"
@@ -862,7 +859,9 @@ let make = (
   let _inputChart: ReactFinalForm.fieldRenderPropsInput = {
     name: "inputChart",
     onChange: ev => {
-      updateChartCompFilters(Js.Dict.fromArray([("chartType", ev->formEventToStr)]))
+      updateChartCompFilters(
+        Js.Dict.fromArray([("chartType", ev->Identity.formReactEventToString)]),
+      )
     },
     value: chartTypeFromUrl->Js.Json.string,
     onBlur: _ev => (),
@@ -872,7 +871,9 @@ let make = (
   let inputMetricTop: ReactFinalForm.fieldRenderPropsInput = {
     name: "inputMetricTop",
     onChange: ev => {
-      updateChartCompFilters(Js.Dict.fromArray([("chartTopMetric", ev->formEventToStr)]))
+      updateChartCompFilters(
+        Js.Dict.fromArray([("chartTopMetric", ev->Identity.formReactEventToString)]),
+      )
     },
     value: chartTopMetricFromUrl->Js.Json.string,
     onBlur: _ev => (),
@@ -882,7 +883,9 @@ let make = (
   let inputMetricBottom: ReactFinalForm.fieldRenderPropsInput = {
     name: "inputMetricBottom",
     onChange: ev => {
-      updateChartCompFilters(Js.Dict.fromArray([("chartBottomMetric", ev->formEventToStr)]))
+      updateChartCompFilters(
+        Js.Dict.fromArray([("chartBottomMetric", ev->Identity.formReactEventToString)]),
+      )
     },
     value: chartBottomMetricFromUrl->Js.Json.string,
     onBlur: _ev => (),
diff --git a/src/components/DynamicTabs.res b/src/components/DynamicTabs.res
index c00d3a344..f1c6ca47b 100644
--- a/src/components/DynamicTabs.res
+++ b/src/components/DynamicTabs.res
@@ -177,7 +177,6 @@ module TabInfo = {
   }
 }
 
-external syntheticEventAsStr: ReactEvent.Form.t => string = "%identity"
 module IndicationArrow = {
   @react.component
   let make = (~iconName, ~side, ~refElement: React.ref<Js.nullable<Dom.element>>, ~isVisible) => {
diff --git a/src/components/InfraDateRangeCustomSelection.res b/src/components/InfraDateRangeCustomSelection.res
index ab49262ae..9f066fd21 100644
--- a/src/components/InfraDateRangeCustomSelection.res
+++ b/src/components/InfraDateRangeCustomSelection.res
@@ -1,4 +1,3 @@
-external strToForm: string => ReactEvent.Form.t = "%identity"
 @send external focus: Dom.element => unit = "focus"
 type focusElement = From | To
 
diff --git a/src/components/InfraDateRangePicker.res b/src/components/InfraDateRangePicker.res
index f2ddbe46a..84b74194a 100644
--- a/src/components/InfraDateRangePicker.res
+++ b/src/components/InfraDateRangePicker.res
@@ -1,5 +1,3 @@
-external strToForm: string => ReactEvent.Form.t = "%identity"
-
 let useErroryValueResetter = (
   input: ReactFinalForm.fieldRenderPropsInput,
   isoStringToCustomTimeZone,
@@ -14,7 +12,7 @@ let useErroryValueResetter = (
       }
     }
     if input.value->isErroryTimeValue {
-      input.onChange(""->strToForm)
+      input.onChange(""->Identity.stringToFormReactEvent)
     }
 
     None
@@ -327,7 +325,9 @@ let make = (
       sec,
     )
     setStartTime(_ => `${hour}:${min}:${sec}`)
-    startInput.onChange(TimeZoneHook.formattedISOString(startDateTimeCheck, format)->strToForm)
+    startInput.onChange(
+      TimeZoneHook.formattedISOString(startDateTimeCheck, format)->Identity.stringToFormReactEvent,
+    )
   }
 
   let changeEndDate = (~hour="23", ~min="59", ~sec="59", ~ele, ()) => {
@@ -345,7 +345,9 @@ let make = (
       sec,
     )
     setEndTime(_ => `${hour}:${min}:${sec}`)
-    endInput.onChange(TimeZoneHook.formattedISOString(endDateTimeCheck, format)->strToForm)
+    endInput.onChange(
+      TimeZoneHook.formattedISOString(endDateTimeCheck, format)->Identity.stringToFormReactEvent,
+    )
   }
 
   let processDate = x => {
diff --git a/src/components/InputFields.res b/src/components/InputFields.res
index 3aca67b35..c6743ee56 100644
--- a/src/components/InputFields.res
+++ b/src/components/InputFields.res
@@ -12,7 +12,6 @@ type comboCustomInputRecord = {
 }
 
 module DOBPicker = {
-  external strToForm: string => ReactEvent.Form.t = "%identity"
   external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make = (
@@ -47,7 +46,7 @@ module DOBPicker = {
         val := Js.String.concat("-", val.contents)
       }
       setSelectedDate(_ => val.contents)
-      input.onChange(val.contents->strToForm)
+      input.onChange(val.contents->Identity.stringToFormReactEvent)
     }
     let dropdownRef = React.useRef(Js.Nullable.null)
     let (isExpanded, setIsExpanded) = React.useState(_ => false)
@@ -64,10 +63,10 @@ module DOBPicker = {
       setIsExpanded(p => !p)
       if format == "DD-MM-YYYY" {
         setSelectedDate(_ => changeDOBFormat(str))
-        input.onChange(changeDOBFormat(str)->strToForm)
+        input.onChange(changeDOBFormat(str)->Identity.stringToFormReactEvent)
       } else {
         setSelectedDate(_ => str)
-        input.onChange(str->strToForm)
+        input.onChange(str->Identity.stringToFormReactEvent)
       }
     }
     React.useEffect1(() => {
diff --git a/src/components/InputFields.resi b/src/components/InputFields.resi
index 4ab8f9103..9b4cc6ce2 100644
--- a/src/components/InputFields.resi
+++ b/src/components/InputFields.resi
@@ -5,7 +5,6 @@ type customInputFn = (
 type comboCustomInputFn = array<ReactFinalForm.fieldRenderProps> => React.element
 type comboCustomInputRecord = {fn: comboCustomInputFn, names: array<string>}
 module DOBPicker: {
-  external strToForm: string => ReactEvent.Form.t = "%identity"
   external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make: (
diff --git a/src/components/LocalFilters.res b/src/components/LocalFilters.res
index 2245f416a..aae59c1bd 100644
--- a/src/components/LocalFilters.res
+++ b/src/components/LocalFilters.res
@@ -1,8 +1,6 @@
 let makeFieldInfo = FormRenderer.makeFieldInfo
 
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external jsonToStr: Js.Json.t => array<string> = "%identity"
-external typesToFormEvent: string => ReactEvent.Form.t = "%identity"
 
 module CheckLocalFilters = {
   @react.component
diff --git a/src/components/MultiLineInputBox.res b/src/components/MultiLineInputBox.res
index c9a016176..166cffabc 100644
--- a/src/components/MultiLineInputBox.res
+++ b/src/components/MultiLineInputBox.res
@@ -1,4 +1,3 @@
-external toReactFormEvent: 'a => ReactEvent.Form.t = "%identity"
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -24,7 +23,7 @@ let make = (
   }
 
   let handleRemove = _ => {
-    input.onChange(""->toReactFormEvent)
+    input.onChange(""->Identity.stringToFormReactEvent)
     setError(_ => None)
     setFocus(_ => false)
     handleRemove()
@@ -51,7 +50,7 @@ let make = (
 
     if value === "" || error->Belt.Option.isNone {
       setFocus(_ => false)
-      input.onChange(value->toReactFormEvent)
+      input.onChange(value->Identity.stringToFormReactEvent)
       setShow(_ => false)
     } else {
       setError(_ => error)
diff --git a/src/components/MultiLineTextInput.res b/src/components/MultiLineTextInput.res
index b0989cc92..a5f47d3f9 100644
--- a/src/components/MultiLineTextInput.res
+++ b/src/components/MultiLineTextInput.res
@@ -1,5 +1,3 @@
-external stringToFormEvent: string => ReactEvent.Form.t = "%identity"
-
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -33,7 +31,7 @@ let make = (
         val
         ->Js.String2.replace("<script>", "")
         ->Js.String2.replace("</script>", "")
-        ->stringToFormEvent,
+        ->Identity.stringToFormReactEvent,
       )
     }
     None
diff --git a/src/components/MultipleFileUpload.res b/src/components/MultipleFileUpload.res
index 56ef8f71a..7ee859ed2 100644
--- a/src/components/MultipleFileUpload.res
+++ b/src/components/MultipleFileUpload.res
@@ -1,6 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
-external arrToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external strToReactEvent: string => ReactEvent.Form.t = "%identity"
 type dataTransfer
 @get external dataTransfer: ReactEvent.Mouse.t => 'a = "dataTransfer"
 @get external files: dataTransfer => 'a = "files"
@@ -48,8 +45,8 @@ let make = (
   let showToast = ToastState.useShowToast()
 
   React.useEffect2(() => {
-    fileNamesInput.onChange(fileNames->toReactEvent)
-    fileTypeInput.onChange(fileTypes->toReactEvent)
+    fileNamesInput.onChange(fileNames->Identity.anyTypeToReactEvent)
+    fileTypeInput.onChange(fileTypes->Identity.anyTypeToReactEvent)
     None
   }, (fileNames, fileTypes))
 
@@ -61,7 +58,7 @@ let make = (
       ->getArrayFromJson([])
       ->Js.Array2.filteri((_, i) => indx != i)
       ->Js.Json.array
-      ->toReactEvent,
+      ->Identity.anyTypeToReactEvent,
     )
     setKey(prev => prev + 1)
   }
@@ -130,7 +127,7 @@ let make = (
               }
 
               if !isCorrectFileFormat {
-                input.onChange(toReactEvent(""))
+                input.onChange(Identity.stringToFormReactEvent(""))
                 toast("Invalid file format", ToastError)
               } else if isValid {
                 switch sizeLimit {
@@ -180,7 +177,7 @@ let make = (
       } else {
         break := true
       }
-      input.onChange(toReactEvent(files))
+      input.onChange(Identity.anyTypeToReactEvent(files))
     }
   }
 
@@ -226,7 +223,7 @@ let make = (
             setFilenames(prev => prev->Js.Array2.concat(filename))
             setFileTypes(prev => prev->Js.Array2.concat(mimeType))
             input.onChange(
-              toReactEvent(
+              Identity.anyTypeToReactEvent(
                 input.value->getArrayFromJson([])->Js.Array2.concat([file->Js.Json.string]),
               ),
             )
diff --git a/src/components/NestedDropdown.res b/src/components/NestedDropdown.res
index 07a719ae8..0ffe83706 100644
--- a/src/components/NestedDropdown.res
+++ b/src/components/NestedDropdown.res
@@ -3,7 +3,6 @@ type rec options = {
   value: string,
   options?: array<options>,
 }
-external formToArray: 'a => ReactEvent.Form.t = "%identity"
 
 module RenderOption = {
   @react.component
@@ -38,7 +37,7 @@ module RenderOption = {
         }
         setSelectedData(_ => data)
         setSelectedDataVal(_ => dataN)
-        input.onChange(data->formToArray)
+        input.onChange(data->Identity.anyTypeToReactEvent)
       }
       if selectedInd != index {
         setSelectedInd(_ => index)
@@ -134,7 +133,7 @@ module RenderOptionList = {
     | None => false
     }
     let onClick = _ => {
-      input.onChange(selectedData->formToArray)
+      input.onChange(selectedData->Identity.anyTypeToReactEvent)
     }
     <>
       <div
diff --git a/src/components/NewCalendar.res b/src/components/NewCalendar.res
index 3c8dba0d8..2440ebb0f 100644
--- a/src/components/NewCalendar.res
+++ b/src/components/NewCalendar.res
@@ -1,4 +1,3 @@
-external toReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
 open DateTimeUtils
 type highlighter = {
   highlightSelf: bool,
@@ -495,7 +494,7 @@ let make = (
     }
     let rowInfo = Js.Array2.mapi(dummyRow, rowMapper)
 
-    <div style={index->LogicUtils.getJsonObjectFromDict("style")->toReactDOMStyle}>
+    <div style={index->LogicUtils.getJsonObjectFromDict("style")->Identity.jsonToReactDOMStyle}>
       <div className={`font-normal text-fs-16 text-[#344054] leading-6 mt-5`}>
         {React.string(`${updatedMonth->getMonthInStr} ${newYear->Belt.Int.toString}`)}
       </div>
diff --git a/src/components/NewDateRangePicker.res b/src/components/NewDateRangePicker.res
index 5f19dc2c7..7a94ab608 100644
--- a/src/components/NewDateRangePicker.res
+++ b/src/components/NewDateRangePicker.res
@@ -1,6 +1,4 @@
 open DateTimeUtils
-external strToForm: string => ReactEvent.Form.t = "%identity"
-external formEvAsString: ReactEvent.Form.t => string = "%identity"
 
 let defaultCellHighlighter = (_): NewCalendar.highlighter => {
   {
@@ -293,7 +291,7 @@ module Base = {
         setStartDateVal(_ => localStartDate)
         setEndDateVal(_ => localEndDate)
         switch optInput {
-        | Some(ip) => ip.onChange(localOpt->strToForm)
+        | Some(ip) => ip.onChange(localOpt->Identity.stringToFormReactEvent)
         | None => ()
         }
       }
@@ -304,19 +302,6 @@ module Base = {
       setLocalOpt(_ => optInputVal)
     }
 
-    // OutsideClick.useOutsideClick(
-    //   ~refs=ArrayOfRef([dateRangeRef, dropdownRef]),
-    //   ~isActive=isDropdownExpanded || calendarVisibility,
-    //   ~callback=() => {
-    //     setIsDropdownExpanded(_ => false)
-    //     setCalendarVisibility(p => !p)
-    //     if isDropdownExpandedActual && isCustomSelected {
-    //       resetToInitalValues()
-    //     }
-    //   },
-    //   (),
-    // )
-
     let changeEndDate = (ele, isFromCustomInput, time) => {
       if disableApply {
         setIsDropdownExpanded(_ => false)
@@ -435,7 +420,7 @@ module Base = {
       setIsDropdownExpanded(_ => false)
       saveDates()
       switch optInput {
-      | Some(ip) => ip.onChange("custom_range"->strToForm)
+      | Some(ip) => ip.onChange("custom_range"->Identity.stringToFormReactEvent)
       | None => ()
       }
     }
@@ -804,14 +789,12 @@ module Base = {
   }
 }
 
-external asFormEvent: string => ReactEvent.Form.t = "%identity"
-
 let useStateForInput = (input: ReactFinalForm.fieldRenderPropsInput) => {
   React.useMemo1(() => {
     let val = input.value->Js.Json.decodeString->Belt.Option.getWithDefault("")
     let onChange = fn => {
       let newVal = fn(val)
-      input.onChange(newVal->asFormEvent)
+      input.onChange(newVal->Identity.stringToFormReactEvent)
     }
 
     (val, onChange)
diff --git a/src/components/Paginator.res b/src/components/Paginator.res
index 55148c49b..94b5faf65 100644
--- a/src/components/Paginator.res
+++ b/src/components/Paginator.res
@@ -1,5 +1,3 @@
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
-
 @react.component
 let make = (
   ~totalResults,
@@ -50,7 +48,7 @@ let make = (
     onBlur: _ev => (),
     onChange: ev => {
       setResultsPerPage(_ => {
-        ev->formEventToStr->Belt.Int.fromString->Belt.Option.getWithDefault(15)
+        ev->Identity.formReactEventToString->Belt.Int.fromString->Belt.Option.getWithDefault(15)
       })
     },
     onFocus: _ev => (),
diff --git a/src/components/RangeSlider.res b/src/components/RangeSlider.res
index b0d7d36f7..d3e28e319 100644
--- a/src/components/RangeSlider.res
+++ b/src/components/RangeSlider.res
@@ -1,4 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 @react.component
 let make = (
   ~max="5000",
@@ -148,7 +147,7 @@ let make = (
               maxSlide.value->Js.Json.decodeNumber->Belt.Option.getWithDefault(0.)
             if minVal >= min && minVal < maxSliderValue {
               setHasError(((_, max)) => (false, max))
-              minSlide.onChange(ev->toReactEvent)
+              minSlide.onChange(ev->Identity.anyTypeToReactEvent)
             } else {
               setHasError(((_, max)) => (true, max))
             }
@@ -166,7 +165,7 @@ let make = (
                 maxSlide.value->Js.Json.decodeNumber->Belt.Option.getWithDefault(0.)
               if minVal >= min && minVal <= maxSliderValue {
                 setHasError(((_, max)) => (false, max))
-                minSlide.onChange(ev->toReactEvent)
+                minSlide.onChange(ev->Identity.anyTypeToReactEvent)
               } else {
                 setHasError(((_, max)) => (true, max))
               }
@@ -188,7 +187,7 @@ let make = (
               minSlide.value->Js.Json.decodeNumber->Belt.Option.getWithDefault(0.)
             if maxVal <= max && maxVal > minSliderValue {
               setHasError(((min, _)) => (min, false))
-              maxSlide.onChange(ev->toReactEvent)
+              maxSlide.onChange(ev->Identity.anyTypeToReactEvent)
             } else {
               setHasError(((min, _)) => (min, true))
             }
@@ -207,7 +206,7 @@ let make = (
             if key === "Enter" || keyCode === 13 {
               if maxVal <= max && maxVal >= minSliderValue {
                 setHasError(((min, _)) => (min, false))
-                maxSlide.onChange(ev->toReactEvent)
+                maxSlide.onChange(ev->Identity.anyTypeToReactEvent)
               } else {
                 setHasError(((min, _)) => (min, true))
               }
diff --git a/src/components/RatingOptions.res b/src/components/RatingOptions.res
index 33274cb56..5d4f05f2d 100644
--- a/src/components/RatingOptions.res
+++ b/src/components/RatingOptions.res
@@ -1,5 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
-
 @react.component
 let make = (~icons, ~size) => {
   let (isActive, setIsActive) = React.useState(_ => false)
@@ -7,7 +5,7 @@ let make = (~icons, ~size) => {
   let rating = ratingInput.value->LogicUtils.getIntFromJson(1)
 
   let handleClick = ratingNumber => {
-    ratingInput.onChange(ratingNumber->toReactEvent)
+    ratingInput.onChange(ratingNumber->Identity.anyTypeToReactEvent)
     setIsActive(_ => true)
   }
 
diff --git a/src/components/ReactWindowTable.res b/src/components/ReactWindowTable.res
index 1df7d96fc..f74387dd2 100644
--- a/src/components/ReactWindowTable.res
+++ b/src/components/ReactWindowTable.res
@@ -468,7 +468,8 @@ module ReactWindowTableComponent = {
 
             let item = rowInfo->Belt.Array.get(rowIndex)->Belt.Option.getWithDefault([])
 
-            let style = index->LogicUtils.getJsonObjectFromDict("style")->toReactDOMStyle
+            let style =
+              index->LogicUtils.getJsonObjectFromDict("style")->Identity.jsonToReactDOMStyle
 
             <>
               <NewCell
diff --git a/src/components/RedirectSearchInput.res b/src/components/RedirectSearchInput.res
index cdf26166e..b97607155 100644
--- a/src/components/RedirectSearchInput.res
+++ b/src/components/RedirectSearchInput.res
@@ -1,5 +1,3 @@
-external inputAsString: ReactEvent.Form.t => string = "%identity"
-external stringToForm: string => ReactEvent.Form.t = "%identity"
 external toReactForm: Js.Json.t => ReactEvent.Form.t = "%identity"
 
 module SearchInput = {
@@ -21,7 +19,10 @@ module SearchInput = {
       let key = ev->ReactEvent.Keyboard.key
       let keyCode = ev->ReactEvent.Keyboard.keyCode
       if key === "Enter" || keyCode === 13 {
-        let value = {ev->ReactEvent.Keyboard.target}["value"]->inputAsString->Js.String2.trim
+        let value =
+          {ev->ReactEvent.Keyboard.target}["value"]
+          ->Identity.formReactEventToString
+          ->Js.String2.trim
         if value !== "" {
           RescriptReactRouter.push(`${redirectUrl}${value}`)
         }
diff --git a/src/components/Table.resi b/src/components/Table.resi
index ea3ffbf8c..8c2a9e46e 100644
--- a/src/components/Table.resi
+++ b/src/components/Table.resi
@@ -24,8 +24,6 @@ type filterDataType = TableUtils.filterDataType =
   | DateTime
 
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external formEventToString: ReactEvent.Form.t => string = "%identity"
-external toReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
 external jsonToStr: Js.Json.t => string = "%identity"
 type textAlign = TableUtils.textAlign = Left | Right
 type fontBold = bool
diff --git a/src/components/TableLocalFilters.res b/src/components/TableLocalFilters.res
index 17f8d6404..7427f1f66 100644
--- a/src/components/TableLocalFilters.res
+++ b/src/components/TableLocalFilters.res
@@ -1,5 +1,4 @@
 external formEventToJsonArr: ReactEvent.Form.t => array<Js.Json.t> = "%identity"
-external inputAsString: ReactEvent.Form.t => string = "%identity"
 
 module RangeSliderLocalFilter = {
   @react.component
diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
index 9eb8c3d49..e0ee86655 100644
--- a/src/components/TableUtils.res
+++ b/src/components/TableUtils.res
@@ -76,8 +76,6 @@ type hideItem = {
 }
 
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external formEventToString: ReactEvent.Form.t => string = "%identity"
-external toReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
 external jsonToStr: Js.Json.t => string = "%identity"
 
 type textAlign = Left | Right
diff --git a/src/components/TableUtils.resi b/src/components/TableUtils.resi
index 75e0c5e82..8008ebd92 100644
--- a/src/components/TableUtils.resi
+++ b/src/components/TableUtils.resi
@@ -27,8 +27,6 @@ type selectAllSubmitActions = {
 }
 type hideItem = {key: string, value: string}
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external formEventToString: ReactEvent.Form.t => string = "%identity"
-external toReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
 external jsonToStr: Js.Json.t => string = "%identity"
 type textAlign = Left | Right
 type fontBold = bool
diff --git a/src/components/TimeInput.res b/src/components/TimeInput.res
index df5f35606..d37eed727 100644
--- a/src/components/TimeInput.res
+++ b/src/components/TimeInput.res
@@ -26,8 +26,6 @@ module OptionVals = {
   }
 }
 
-external asFormEvent: 'a => ReactEvent.Form.t = "%identity"
-
 @react.component
 let make = (
   ~label=?,
@@ -70,7 +68,11 @@ let make = (
     let arr = [hourVal, minuteVal, secondsVal]
     Belt.Array.set(arr, index, newVal)->ignore
 
-    arr->Js.Array2.map(padNum)->Js.Array2.joinWith(":")->asFormEvent->input.onChange
+    arr
+    ->Js.Array2.map(padNum)
+    ->Js.Array2.joinWith(":")
+    ->Identity.anyTypeToReactEvent
+    ->input.onChange
   }, (hourVal, minuteVal, secondsVal, input.onChange))
   let onHourChange = React.useCallback1(changeVal(0), [changeVal])
   let onMinuteChange = React.useCallback1(changeVal(1), [changeVal])
diff --git a/src/components/TimeRangeInput.res b/src/components/TimeRangeInput.res
index 274d0eabf..d5b0eead2 100644
--- a/src/components/TimeRangeInput.res
+++ b/src/components/TimeRangeInput.res
@@ -1,4 +1,3 @@
-external strToForm: string => ReactEvent.Form.t = "%identity"
 external intToFormEvent: int => ReactEvent.Form.t = "%identity"
 
 open TimeRangeInputUtils
diff --git a/src/components/form/ChipTextInput.res b/src/components/form/ChipTextInput.res
index e1fd86bef..9384a9106 100644
--- a/src/components/form/ChipTextInput.res
+++ b/src/components/form/ChipTextInput.res
@@ -1,4 +1,3 @@
-external toForm: string => ReactEvent.Form.t = "%identity"
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -53,7 +52,7 @@ let make = (
       ->Js.Array2.map(Js.String2.trim)
       ->Js.Array2.filter(x => x !== value)
       ->Js.Array2.joinWith(", ")
-      ->toForm,
+      ->Identity.stringToFormReactEvent,
     )
   }
   <div className="flex flex-col items-end justify-center">
diff --git a/src/components/form/ColorPickerInput.res b/src/components/form/ColorPickerInput.res
index ccda34e39..e783a469c 100644
--- a/src/components/form/ColorPickerInput.res
+++ b/src/components/form/ColorPickerInput.res
@@ -1,4 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 @react.component
 let make = (~input: ReactFinalForm.fieldRenderPropsInput) => {
   let (color, setColor) = React.useState(_ =>
@@ -11,7 +10,7 @@ let make = (~input: ReactFinalForm.fieldRenderPropsInput) => {
   let onChangeComplete = color => {
     let hex = color->LogicUtils.getDictFromJsonObject->LogicUtils.getString("hex", "")
     setColor(_ => hex)
-    input.onChange(hex->toReactEvent)
+    input.onChange(hex->Identity.anyTypeToReactEvent)
   }
 
   OutsideClick.useOutsideClick(
diff --git a/src/components/form/ComboInputField.res b/src/components/form/ComboInputField.res
index 2afcabdb8..370051edf 100644
--- a/src/components/form/ComboInputField.res
+++ b/src/components/form/ComboInputField.res
@@ -1,7 +1,4 @@
-external inputAsString: ReactEvent.Form.t => string = "%identity"
 external inputAsArray: ReactEvent.Form.t => array<Js.Json.t> = "%identity"
-external stringToForm: string => ReactEvent.Form.t = "%identity"
-external toReactForm: 'a => ReactEvent.Form.t = "%identity"
 
 open LogicUtils
 
@@ -42,7 +39,11 @@ module BaseComponent = {
           switch fieldType {
           | String => val
           | Array =>
-            val->inputAsString->Js.String2.split(",")->Js.Array2.filter(x => x !== "")->toReactForm
+            val
+            ->Identity.formReactEventToString
+            ->Js.String2.split(",")
+            ->Js.Array2.filter(x => x !== "")
+            ->Identity.anyTypeToReactEvent
           },
         )
       },
@@ -76,18 +77,24 @@ module BaseComponent = {
 
     let handleKeyUp = React.useCallback1(ev => {
       if !submitOnEnter {
-        let value = {ev->ReactEvent.Keyboard.target}["value"]->inputAsString->Js.String2.trim
-        input.onChange(value->stringToForm)
+        let value =
+          {ev->ReactEvent.Keyboard.target}["value"]
+          ->Identity.formReactEventToString
+          ->Js.String2.trim
+        input.onChange(value->Identity.stringToFormReactEvent)
       } else {
         let key = ev->ReactEvent.Keyboard.key
         let keyCode = ev->ReactEvent.Keyboard.keyCode
         if key === "Enter" || keyCode === 13 {
-          let value = {ev->ReactEvent.Keyboard.target}["value"]->inputAsString->Js.String2.trim
+          let value =
+            {ev->ReactEvent.Keyboard.target}["value"]
+            ->Identity.formReactEventToString
+            ->Js.String2.trim
           switch customSubmitFunction {
           | Some(fn) => fn(input, value)
           | None =>
             if value !== "" {
-              input.onChange(value->stringToForm)
+              input.onChange(value->Identity.stringToFormReactEvent)
             }
           }
         }
@@ -95,7 +102,7 @@ module BaseComponent = {
     }, [selectedMode])
 
     let onClick = (_: ReactEvent.Mouse.t) => {
-      fieldInput.onChange(""->stringToForm)
+      fieldInput.onChange(""->Identity.stringToFormReactEvent)
       setComboVal(_ => "")
     }
 
@@ -200,7 +207,7 @@ let make = (
       onBlur: _ev => (),
       onChange: ev => {
         setComboVal(_ => "")
-        let value = ev->inputAsString
+        let value = ev->Identity.formReactEventToString
         form.change(selectedMode, Js.Json.null)
         setSelectedMode(_ => value)
       },
diff --git a/src/components/form/FileUpload.res b/src/components/form/FileUpload.res
index 5a13c8889..6a2189823 100644
--- a/src/components/form/FileUpload.res
+++ b/src/components/form/FileUpload.res
@@ -1,7 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
-external arrToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external strToReactEvent: string => ReactEvent.Form.t = "%identity"
-
 @val external atob: string => string = "atob"
 @send external focus: Dom.element => unit = "focus"
 @react.component
@@ -30,13 +26,13 @@ let make = (
   let showToast = ToastState.useShowToast()
 
   React.useEffect1(() => {
-    fileNameInput.onChange(fileName->toReactEvent)
+    fileNameInput.onChange(fileName->Identity.anyTypeToReactEvent)
     None
   }, [fileName])
 
   let clearData = _ev => {
     setFilename(_ => "")
-    input.onChange(""->Js.Json.string->toReactEvent)
+    input.onChange(""->Js.Json.string->Identity.anyTypeToReactEvent)
     setKey(prev => prev + 1)
   }
 
@@ -67,7 +63,7 @@ let make = (
         | _ => true
         }
         if !isCorrectFileFormat {
-          input.onChange(toReactEvent(""))
+          input.onChange(Identity.anyTypeToReactEvent(""))
           toast("Invalid file format", ToastError)
         } else if isValid {
           switch rowsLimit {
@@ -75,7 +71,7 @@ let make = (
             let rows = Js.String2.split(file, "\n")->Js.Array2.length
             if value !== "" && rows - 1 < val {
               setFilename(_ => filename)
-              input.onChange(toReactEvent(value))
+              input.onChange(Identity.anyTypeToReactEvent(value))
               if showUploadtoast {
                 toast("File Uploaded Successfully", ToastSuccess)
               }
@@ -85,7 +81,7 @@ let make = (
           | None =>
             if value !== "" {
               setFilename(_ => filename)
-              input.onChange(toReactEvent(value))
+              input.onChange(Identity.anyTypeToReactEvent(value))
 
               if showUploadtoast {
                 toast("File Uploaded Successfully", ToastSuccess)
diff --git a/src/components/form/MultipleTextInput.res b/src/components/form/MultipleTextInput.res
index 090a098a2..82e0744b5 100644
--- a/src/components/form/MultipleTextInput.res
+++ b/src/components/form/MultipleTextInput.res
@@ -1,6 +1,3 @@
-external inputAsString: ReactEvent.Form.t => string = "%identity"
-external stringToFormEvent: string => ReactEvent.Form.t = "%identity"
-
 module Tag = {
   @react.component
   let make = (~text, ~remove, ~customButtonStyle=?, ~disabled=false) => {
diff --git a/src/components/form/NumericTextInput.res b/src/components/form/NumericTextInput.res
index 344a61c34..aafeecfc6 100644
--- a/src/components/form/NumericTextInput.res
+++ b/src/components/form/NumericTextInput.res
@@ -1,4 +1,3 @@
-external toReactFormEvent: 'a => ReactEvent.Form.t = "%identity"
 let getFloat = strJson => strJson->Js.Json.decodeString->Belt.Option.flatMap(Belt.Float.fromString)
 
 @react.component
@@ -94,10 +93,10 @@ let make = (
         setLocalStrValue(_ => finalVal->Js.Json.string)
 
         switch finalVal->Js.Json.string->getFloat {
-        | Some(num) => input.onChange(num->toReactFormEvent)
+        | Some(num) => input.onChange(num->Identity.anyTypeToReactEvent)
         | None =>
           if value === "" {
-            input.onChange(Js.Json.null->toReactFormEvent)
+            input.onChange(Js.Json.null->Identity.anyTypeToReactEvent)
           }
         }
       },
diff --git a/src/components/form/PasswordStrengthInput.res b/src/components/form/PasswordStrengthInput.res
index 0072ebed3..ae8b6d747 100644
--- a/src/components/form/PasswordStrengthInput.res
+++ b/src/components/form/PasswordStrengthInput.res
@@ -1,5 +1,3 @@
-external inputAsString: ReactEvent.Form.t => string = "%identity"
-
 type regexTest = {
   regex: Js.Re.t,
   weight: float,
diff --git a/src/components/form/PasswordStrengthInputAsChips.res b/src/components/form/PasswordStrengthInputAsChips.res
index 3c1fea597..8995dfb9d 100644
--- a/src/components/form/PasswordStrengthInputAsChips.res
+++ b/src/components/form/PasswordStrengthInputAsChips.res
@@ -1,5 +1,3 @@
-external inputAsString: ReactEvent.Form.t => string = "%identity"
-
 type passwordCheck = {
   number: bool,
   lowercase: bool,
diff --git a/src/components/form/SelectBoxCard.res b/src/components/form/SelectBoxCard.res
index ad4835aaa..70b94f830 100644
--- a/src/components/form/SelectBoxCard.res
+++ b/src/components/form/SelectBoxCard.res
@@ -1,7 +1,6 @@
 module CustomViewSection = {
   external formEventToInt: ReactEvent.Form.t => int = "%identity"
   external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-  external formEventToStr: ReactEvent.Form.t => string = "%identity"
   external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
   external jsonArrToa: array<Js.Json.t> => array<'a> = "%identity"
 
@@ -48,7 +47,7 @@ module CustomViewSection = {
           if !allowMultiSelect {
             for _ in 1 to ev->formEventToInt {
               Js.Array2.pop(valueArrReversed)
-              ->Belt.Option.getWithDefault(getDefaultObj(ev->formEventToStr))
+              ->Belt.Option.getWithDefault(getDefaultObj(ev->Identity.formReactEventToString))
               ->Js.Array.push(finalArr)
               ->ignore
             }
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index 415d61e0f..b29bed4ea 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -1,6 +1,5 @@
 @send external focus: Dom.element => unit = "focus"
 @send @return(nullable) external closest: (Dom.element, string) => option<Dom.element> = "closest"
-external stringToFormEvent: string => ReactEvent.Form.t = "%identity"
 
 @react.component
 let make = (
@@ -98,7 +97,7 @@ let make = (
         val
         ->Js.String2.replace("<script>", "")
         ->Js.String2.replace("</script>", "")
-        ->stringToFormEvent,
+        ->Identity.stringToFormReactEvent,
       )
     }
     None
diff --git a/src/components/priority-logics/AddPLGateway.res b/src/components/priority-logics/AddPLGateway.res
index 6001c2f9b..97ca505c1 100644
--- a/src/components/priority-logics/AddPLGateway.res
+++ b/src/components/priority-logics/AddPLGateway.res
@@ -1,7 +1,4 @@
-external arrToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 type gateway = PriorityLogicUtils.gateway
 
 module GatewayView = {
@@ -110,7 +107,7 @@ let make = (
     onChange: ev => {
       let newSelectedOptions = ev->formEventToStrArr
       if newSelectedOptions->Js.Array2.length === 0 {
-        gateWaysInput.onChange([]->toReactEvent)
+        gateWaysInput.onChange([]->Identity.anyTypeToReactEvent)
       } else {
         let sharePercent = isDistribute ? 100 / newSelectedOptions->Js.Array2.length : 100
         let gatewaysArr = newSelectedOptions->Array.mapWithIndex((item, i) => {
@@ -126,7 +123,7 @@ let make = (
           }
           obj
         })
-        gateWaysInput.onChange(gatewaysArr->toReactEvent)
+        gateWaysInput.onChange(gatewaysArr->Identity.anyTypeToReactEvent)
       }
     },
     onFocus: _ev => (),
@@ -149,7 +146,7 @@ let make = (
           disableFallback: newDistributeValue ? item.disableFallback : false,
         }
       })
-      gateWaysInput.onChange(gatewaysArr->toReactEvent)
+      gateWaysInput.onChange(gatewaysArr->Identity.anyTypeToReactEvent)
     }
   }
 
@@ -157,7 +154,7 @@ let make = (
     if isDistribute {
       selectedOptions
       ->Js.Array2.map(item => {...item, disableFallback: newFallbackValue})
-      ->toReactEvent
+      ->Identity.anyTypeToReactEvent
       ->gateWaysInput.onChange
     }
   }
@@ -177,7 +174,7 @@ let make = (
           option
         }
       })
-      gateWaysInput.onChange(newList->toReactEvent)
+      gateWaysInput.onChange(newList->Identity.anyTypeToReactEvent)
     }
   }
 
@@ -189,7 +186,7 @@ let make = (
         option
       }
     })
-    gateWaysInput.onChange(newList->toReactEvent)
+    gateWaysInput.onChange(newList->Identity.anyTypeToReactEvent)
   }
 
   let removeItem = index => {
@@ -197,7 +194,7 @@ let make = (
       selectedOptions
       ->Js.Array2.map(i => i.gateway_name)
       ->Array.filterWithIndex((_, i) => i !== index)
-      ->toReactEvent,
+      ->Identity.anyTypeToReactEvent,
     )
   }
 
@@ -306,7 +303,7 @@ let make = (
                     <CheckBoxIcon
                       isSelected=isEnforceGatewayPriority
                       setIsSelected={v => {
-                        enforceGatewayPriorityInput.onChange(v->toReactEvent)
+                        enforceGatewayPriorityInput.onChange(v->Identity.anyTypeToReactEvent)
                       }}
                       isDisabled=false
                     />
@@ -324,7 +321,7 @@ let make = (
                     <CheckBoxIcon
                       isSelected=isDistribute
                       setIsSelected={v => {
-                        isDistributeInput.onChange(v->toReactEvent)
+                        isDistributeInput.onChange(v->Identity.anyTypeToReactEvent)
                         onClickDistribute(v)
                       }}
                       isDisabled=false
diff --git a/src/components/priority-logics/PriorityLogicUtils.res b/src/components/priority-logics/PriorityLogicUtils.res
index c5f7c3bb9..219143a86 100644
--- a/src/components/priority-logics/PriorityLogicUtils.res
+++ b/src/components/priority-logics/PriorityLogicUtils.res
@@ -1,5 +1,3 @@
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
-
 type val =
   StringArray(array<string>) | String(string) | IntArray(array<int>) | Int(int) | Bool(bool)
 
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index 4f1d22e63..f0be4b3a4 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -1,5 +1,4 @@
 type modeType = LiveModeDropDown | TestModeDropDown
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 open UIUtils
 open HSwitchUtils
 open HSLocalStorage
diff --git a/src/genericUtils/DOMUtils.res b/src/genericUtils/DOMUtils.res
index b7cabfb0e..ba46d9617 100644
--- a/src/genericUtils/DOMUtils.res
+++ b/src/genericUtils/DOMUtils.res
@@ -16,13 +16,11 @@ external event: string => event = "Event"
 @val @scope(("window", "location")) external windowOrigin: string = "origin"
 external toString: option<Js.Json.t> => string = "%identity"
 external convertToStrDict: 't => Js.Json.t = "%identity"
-external evToString: ReactEvent.Form.t => string = "%identity"
 external objToJson: {..} => Js.Json.t = "%identity"
 
 external toJson: exn => Js.Json.t = "%identity"
 external toRespJson: Fetch.Response.t => Js.Json.t = "%identity"
 @get external keyCode: 'a => int = "keyCode"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 
 external formEventToBoolean: ReactEvent.Form.t => bool = "%identity"
 @send external querySelectorAll: (document, string) => array<Dom.element> = "querySelectorAll"
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
new file mode 100644
index 000000000..024baa29c
--- /dev/null
+++ b/src/genericUtils/Identity.res
@@ -0,0 +1,6 @@
+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: Js.Json.t => Js.Nullable.t<Js.Json.t> = "%identity"
+external jsonToReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index defa06c4c..c0303e12f 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -1,10 +1,8 @@
 external toString: option<Js.Json.t> => string = "%identity"
 external convertToStrDict: 't => Js.Json.t = "%identity"
-external evToString: ReactEvent.Form.t => string = "%identity"
 external asJson: 'a => Js.Json.t = "%identity"
 external sankeyTest: string => SankeyCharts.sankeyEntity = "%identity"
 @get external keyCode: 'a => int = "keyCode"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 type window
 @val external window: window = "window"
 @scope("window") @val external parent: window = "parent"
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
index 077f07a3a..91073e932 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -1,5 +1,4 @@
 external formEventToBool: ReactEvent.Form.t => bool = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 
 let connectorsWithIntegrationSteps: array<ConnectorTypes.connectorName> = [
   ADYEN,
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorList.res b/src/screens/HyperSwitch/Connectors/ConnectorList.res
index 0025cfc0e..dc76c1449 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorList.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorList.res
@@ -1,5 +1,3 @@
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
-
 let p1MediumTextStyle = HSwitchUtils.getTextClass(~textVariant=P1, ~paragraphTextVariant=Medium, ())
 
 module RequestConnector = {
diff --git a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationTypes.res b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationTypes.res
index 3e0da0950..e3438d581 100644
--- a/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationTypes.res
+++ b/src/screens/HyperSwitch/Connectors/Wallets/ApplePayWalletIntegrationTypes.res
@@ -7,4 +7,3 @@ type verifyApplePay = {
   domain_names: array<string>,
   merchant_connector_account_id: string,
 }
-external toForm: 'a => ReactEvent.Form.t = "%identity"
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
index 1c16dbcce..361371c48 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
@@ -1,5 +1,4 @@
 external convertToJsonDict: 't => Js.Dict.t<Js.Json.t> = "%identity"
-external asJson: 'a => ReactEvent.Form.t = "%identity"
 
 module RadioSection = {
   open ConnectorTypes
@@ -26,7 +25,7 @@ module RadioSection = {
       | ActionType => paymentMethodTypeInfo.action = option
       }
 
-      setConfigJson(frmConfigs->asJson)
+      setConfigJson(frmConfigs->Identity.anyTypeToReactEvent)
     }
 
     <div>
@@ -147,7 +146,7 @@ module CheckBoxRenderer = {
             _ => {
               frmConfigInfo.payment_methods = []
               setIsOpen(_ => !isOpen)
-              setConfigJson(frmConfigs->asJson)
+              setConfigJson(frmConfigs->Identity.anyTypeToReactEvent)
             }
           },
         },
@@ -166,7 +165,7 @@ module CheckBoxRenderer = {
           switch connectorPaymentMethods {
           | Some(paymentMethods) => {
               frmConfigInfo.payment_methods = paymentMethods->generateFRMPaymentMethodsConfig
-              setConfigJson(frmConfigs->asJson)
+              setConfigJson(frmConfigs->Identity.anyTypeToReactEvent)
             }
           | _ => ()
           }
@@ -176,7 +175,7 @@ module CheckBoxRenderer = {
             showConfitmation()
           } else {
             frmConfigInfo.payment_methods = []
-            setConfigJson(frmConfigs->asJson)
+            setConfigJson(frmConfigs->Identity.anyTypeToReactEvent)
             setIsOpen(_ => !isOpen)
           }
         }
@@ -188,7 +187,7 @@ module CheckBoxRenderer = {
         switch connectorPaymentMethods {
         | Some(paymentMethods) => {
             frmConfigInfo.payment_methods = paymentMethods->generateFRMPaymentMethodsConfig
-            setConfigJson(frmConfigs->asJson)
+            setConfigJson(frmConfigs->Identity.anyTypeToReactEvent)
           }
         | _ => ()
         }
@@ -298,7 +297,7 @@ module PaymentMethodsRenderer = {
           })
 
         setConnectorConfig(_ => connectorsConfig)
-        setConfigJson(updateFRMConfig->asJson)
+        setConfigJson(updateFRMConfig->Identity.anyTypeToReactEvent)
         setPageState(_ => Success)
       } catch {
       | _ => setPageState(_ => Error("Failed to fetch"))
diff --git a/src/screens/HyperSwitch/Home/HomeUtils.res b/src/screens/HyperSwitch/Home/HomeUtils.res
index c4eb737dd..6a8e17293 100644
--- a/src/screens/HyperSwitch/Home/HomeUtils.res
+++ b/src/screens/HyperSwitch/Home/HomeUtils.res
@@ -1,4 +1,3 @@
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 open CardUtils
 open PageUtils
 open HSwitchUtils
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
index 63effeb51..c662025a3 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
@@ -1,7 +1,4 @@
-external arrToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
-external toReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 external toJson: 'a => Js.Json.t = "%identity"
 external anyToEnum: 'a => AdvancedRoutingTypes.connectorSelectionData = "%identity"
 
@@ -22,7 +19,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
     } else {
       "priority"
     }
-    gateWaysType.onChange(typeString->toReactEvent)
+    gateWaysType.onChange(typeString->Identity.anyTypeToReactEvent)
     None
   }, [isDistributeInput.value])
 
@@ -42,7 +39,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
       let newSelectedOptions = ev->formEventToStrArr
 
       if newSelectedOptions->Js.Array2.length === 0 {
-        gateWaysInput.onChange([]->toReactEvent)
+        gateWaysInput.onChange([]->Identity.anyTypeToReactEvent)
       } else {
         let gatewaysArr = newSelectedOptions->Js.Array2.map(item => {
           open AdvancedRoutingTypes
@@ -67,7 +64,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
             }->toJson
           }
         })
-        gateWaysInput.onChange(gatewaysArr->toReactEvent)
+        gateWaysInput.onChange(gatewaysArr->Identity.anyTypeToReactEvent)
       }
     },
     onFocus: _ev => (),
@@ -106,7 +103,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
       | VolumeObject(obj) => obj.connector->toJson
       }
     })
-    gateWaysInput.onChange(gatewaysArr->toReactEvent)
+    gateWaysInput.onChange(gatewaysArr->Identity.anyTypeToReactEvent)
   }
 
   let updatePercentage = (item: AdvancedRoutingTypes.connectorSelectionData, value) => {
@@ -134,7 +131,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
           }->toJson
         }
       })
-      gateWaysInput.onChange(newList->toReactEvent)
+      gateWaysInput.onChange(newList->Identity.anyTypeToReactEvent)
     }
   }
 
@@ -145,7 +142,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
         AdvancedRoutingUtils.getConnectorStringFromConnectorSelectionData(i).merchant_connector_id
       )
       ->Array.filterWithIndex((_, i) => i !== index)
-      ->toReactEvent,
+      ->Identity.anyTypeToReactEvent,
     )
   }
 
@@ -234,7 +231,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
             <CheckBoxIcon
               isSelected=isDistribute
               setIsSelected={v => {
-                isDistributeInput.onChange(v->toReactEvent)
+                isDistributeInput.onChange(v->Identity.anyTypeToReactEvent)
                 onClickDistribute(v)
               }}
               isDisabled=false
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 3ce8c81c7..7c93e1a4e 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -3,7 +3,6 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open LogicUtils
 
-external toForm: string => ReactEvent.Form.t = "%identity"
 external toJson: 'a => Js.Json.t = "%identity"
 external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external toWasm: Js.Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
@@ -124,7 +123,7 @@ module Wrapper = {
     }
 
     React.useEffect0(() => {
-      name.onChange(heading->Js.String2.toLowerCase->titleToSnake->toForm)
+      name.onChange(heading->Js.String2.toLowerCase->titleToSnake->Identity.stringToFormReactEvent)
 
       let gatewayArrPresent = gateWaysInput.value->getArrayFromJson([])->Js.Array2.length > 0
 
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 28e1d3092..2b5db95f3 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -3,9 +3,7 @@ open AdvancedRoutingUtils
 open FormRenderer
 
 external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
-external toForm: 'a => ReactEvent.Form.t = "%identity"
 external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
 
 module LogicalOps = {
@@ -55,8 +53,8 @@ module OperatorInp = {
       name: "string",
       onBlur: _ev => (),
       onChange: ev => {
-        let value = ev->formEventToStr
-        operator.onChange(value->toForm)
+        let value = ev->Identity.formReactEventToString
+        operator.onChange(value->Identity.anyTypeToReactEvent)
       },
       onFocus: _ev => (),
       value: operator.value,
@@ -74,7 +72,7 @@ module OperatorInp = {
       setOpVals(_ => operatorVals)
 
       if operator.value->Js.Json.decodeString->Belt.Option.isNone {
-        operator.onChange(operatorVals[0]->toForm)
+        operator.onChange(operatorVals[0]->Identity.anyTypeToReactEvent)
       }
       None
     }, (field.value, valInp.value))
@@ -139,7 +137,7 @@ module ValueInp = {
           | NOT_CONTAINS => "enum_variant_array"
           | _ => "number"
           }
-        }->toForm,
+        }->Identity.anyTypeToReactEvent,
       )
       None
     }, [valueField.value])
@@ -149,7 +147,7 @@ module ValueInp = {
       onBlur: _ev => (),
       onChange: ev => {
         let value = ev->formEventToStrArr
-        valueField.onChange(value->toForm)
+        valueField.onChange(value->Identity.anyTypeToReactEvent)
       },
       onFocus: _ev => (),
       value: valueField.value,
@@ -209,12 +207,12 @@ module MetadataInp = {
         })
         let finalVal = Js.Array2.joinWith(arrStr, ",")->Js.Json.string
 
-        valueField.onChange(finalVal->toForm)
+        valueField.onChange(finalVal->Identity.anyTypeToReactEvent)
       },
       onChange: ev => {
         let target = ReactEvent.Form.target(ev)
         let value = target["value"]
-        valueField.onChange(value->toForm)
+        valueField.onChange(value->Identity.anyTypeToReactEvent)
       },
       onFocus: _ev => (),
       value: valueField.value,
@@ -295,11 +293,11 @@ module FieldInp = {
       name: "string",
       onBlur: _ev => (),
       onChange: ev => {
-        let value = ev->formEventToStr
+        let value = ev->Identity.formReactEventToString
         onChangeMethod(value)
-        field.onChange(value->toForm)
-        op.onChange(""->toForm)
-        val.onChange(""->toForm)
+        field.onChange(value->Identity.anyTypeToReactEvent)
+        op.onChange(""->Identity.anyTypeToReactEvent)
+        val.onChange(""->Identity.anyTypeToReactEvent)
       },
       onFocus: _ev => (),
       value: field.value,
diff --git a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
index 647bc5b71..ab7949efb 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
@@ -2,9 +2,6 @@ open FormRenderer
 open LogicUtils
 open AdvancedRoutingTypes
 
-external fromFormEvent: ReactEvent.Form.t => 'a = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
-
 let configurationNameInput = makeFieldInfo(
   ~label="Configuration Name",
   ~name="name",
@@ -43,7 +40,7 @@ module BusinessProfileInp = {
               value: profile->Js.Json.string,
               onChange: {
                 ev => {
-                  setProfile(_ => ev->formEventToStr)
+                  setProfile(_ => ev->Identity.formReactEventToString)
                   input.onChange(ev)
                 }
               },
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
index 2e37537e2..fe9300e49 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -1,6 +1,5 @@
 let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ())
 external toJson: 'a => Js.Json.t = "%identity"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 
 module SDKConfiguarationFields = {
@@ -55,7 +54,8 @@ module SDKConfiguarationFields = {
             value: (initialValues.amount / 100)->string_of_int->Js.Json.string,
             onChange: {
               ev => {
-                let eventValueToInt = ev->formEventToStr->LogicUtils.getIntFromString(0)
+                let eventValueToInt =
+                  ev->Identity.formReactEventToString->LogicUtils.getIntFromString(0)
                 let valInCents = (eventValueToInt * 100)->string_of_int->strToFormEvent
                 input.onChange(valInCents)
               }
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
index e54d0211f..d07bd6a18 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
@@ -1,4 +1,3 @@
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 open UserOnboardingTypes
 open UserOnboardingUtils
 
@@ -284,7 +283,7 @@ module BackendFrontendPlatformLangDropDown = {
       name: "Platform Selecr",
       onBlur: _ev => (),
       onChange: ev => {
-        let val = ev->formEventToStr->getPlatform
+        let val = ev->Identity.formReactEventToString->getPlatform
         setPlatform(_ => val)
         hyperswitchMixPanel(~pageName=urlHead, ~contextName, ~actionName={(val :> string)}, ())
       },
@@ -300,7 +299,7 @@ module BackendFrontendPlatformLangDropDown = {
       name: "BackEnd",
       onBlur: _ev => (),
       onChange: ev => {
-        let val = ev->formEventToStr->getLangauge
+        let val = ev->Identity.formReactEventToString->getLangauge
         setBackEndLang(_ => val)
         hyperswitchMixPanel(~pageName=urlHead, ~contextName, ~actionName={(val :> string)}, ())
       },
@@ -312,7 +311,7 @@ module BackendFrontendPlatformLangDropDown = {
       name: "FrontEnd",
       onBlur: _ev => (),
       onChange: ev => {
-        let val = ev->formEventToStr->getLangauge
+        let val = ev->Identity.formReactEventToString->getLangauge
         setFrontEndLang(_ => val)
         hyperswitchMixPanel(~pageName=urlHead, ~contextName, ~actionName={(val :> string)}, ())
       },
diff --git a/src/screens/analyticsScreens/AnalyticsCommonComponents.res b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
index bde445c44..8e20b3751 100644
--- a/src/screens/analyticsScreens/AnalyticsCommonComponents.res
+++ b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
@@ -1,11 +1,10 @@
 external toString: option<Js.Json.t> => string = "%identity"
 external convertToStrDict: 't => Js.Json.t = "%identity"
-external evToString: ReactEvent.Form.t => string = "%identity"
 external objToJson: {..} => Js.Json.t = "%identity"
 external toJson: exn => Js.Json.t = "%identity"
 external toRespJson: Fetch.Response.t => Js.Json.t = "%identity"
 @get external keyCode: 'a => int = "keyCode"
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
+
 type window
 @val external window: window = "window"
 @scope("window") @val external parent: window = "parent"
@@ -348,7 +347,7 @@ module AnalyticsSaveViewNew = {
       name: "savedView",
       onBlur: _ev => (),
       onChange: ev => {
-        let appliedVal = ev->formEventToStr
+        let appliedVal = ev->Identity.formReactEventToString
         if appliedVal === "baseView" {
           updateExistingKeys(defaultSearchDict)
           setAppliedSaveView(_ => SaveViewEntity.defaultSaveView)
@@ -1305,7 +1304,7 @@ module SankeyWithDropDown = {
       onBlur: _ev => (),
       onChange: ev => {
         setSankeyCardinality(_ => {
-          ev->formEventToStr->Belt.Int.fromString->Belt.Option.getWithDefault(5)
+          ev->Identity.formReactEventToString->Belt.Int.fromString->Belt.Option.getWithDefault(5)
         })
       },
       onFocus: _ev => (),
@@ -1651,7 +1650,7 @@ module ErrorOnCellClick = {
     let modalInput: ReactFinalForm.fieldRenderPropsInput = {
       name: "modalInput",
       onBlur: _ev => (),
-      onChange: ev => renderModalChart(ev->evToString),
+      onChange: ev => renderModalChart(ev->Identity.formReactEventToString),
       onFocus: _ev => (),
       value: ""->Js.Json.string,
       checked: true,
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
index 8e2c7905a..3b8e7ccdc 100644
--- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
+++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res
@@ -1,5 +1,4 @@
 open HyperSwitchAuthTypes
-external formEventToStr: ReactEvent.Form.t => string = "%identity"
 
 module TermsAndCondition = {
   @react.component
diff --git a/src/utils/JsonFlattenUtils.res b/src/utils/JsonFlattenUtils.res
index a7f398088..e4c5fbef0 100644
--- a/src/utils/JsonFlattenUtils.res
+++ b/src/utils/JsonFlattenUtils.res
@@ -1,5 +1,3 @@
-external toNullable: Js.Json.t => Js.Nullable.t<Js.Json.t> = "%identity"
-
 let rec flattenObject = (obj, addIndicatorForObject) => {
   let newDict = Js.Dict.empty()
   switch obj->Js.Json.decodeObject {
@@ -9,7 +7,7 @@ let rec flattenObject = (obj, addIndicatorForObject) => {
     ->Js.Array2.forEach(entry => {
       let (key, value) = entry
 
-      if value->toNullable->Js.Nullable.isNullable {
+      if value->Identity.jsonToNullableJson->Js.Nullable.isNullable {
         Js.Dict.set(newDict, key, value)
       } else {
         switch value->Js.Json.decodeObject {

From 9e3aec7f7434cf4610db50a716653e73693aec94 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Mon, 11 Dec 2023 18:13:29 +0530
Subject: [PATCH 04/11] feat: Identity file changes in Codebase. (#89)

---
 .../HighchartHorizontalBarChart.res           |  3 +-
 .../CustomCharts/HighchartPieChart.res        |  3 +-
 .../CustomCharts/HighchartTimeSeriesChart.res | 35 +++++++++----------
 src/components/CustomExpandableTable.res      |  2 +-
 src/components/DynamicTableUtils.res          |  5 ++-
 src/components/LocalFilters.res               |  4 +--
 src/components/RemoteFilter.res               |  4 +--
 src/components/SelectModal.res                |  4 +--
 src/components/Table.res                      |  2 +-
 src/components/Table.resi                     |  2 --
 src/components/TableUtils.res                 |  1 -
 src/components/TableUtils.resi                |  1 -
 src/components/form/SelectBoxCard.res         |  3 +-
 .../priority-logics/AddPLGateway.res          |  3 +-
 .../priority-logics/PriorityLogicUtils.res    |  2 --
 src/entities/analytics/IntegrationsEntity.res |  1 -
 src/genericUtils/DOMUtils.res                 |  9 -----
 src/genericUtils/Identity.res                 |  6 ++++
 src/hooks/AuthHooks.res                       |  8 ++---
 src/libraries/Jose.res                        |  2 +-
 .../HyperSwitch/Analytics/Analytics.res       |  1 -
 .../Analytics/DownloadReportModal.res         |  6 ++--
 .../Analytics/HSAnalyticsUtils.res            |  3 +-
 .../Connectors/ConnectorAccountDetails.res    |  2 --
 .../FraudAndRisk/FRMIntegrationFields.res     |  4 +--
 .../FraudAndRisk/FRMPaymentMethods.res        |  4 +--
 .../HyperSwitch/FraudAndRisk/FRMUtils.res     |  2 --
 src/screens/HyperSwitch/HSwitchUtils.res      |  1 -
 .../HyperSwitch/Order/OrderUIUtils.res        |  3 +-
 .../HyperSwitch/Refunds/RefundUtils.res       |  3 +-
 .../HyperSwitch/Routing/RoutingStack.res      |  1 -
 .../RoutingRevamp/AddRuleGateway.res          | 16 ++++-----
 .../RoutingRevamp/AdvancedRouting.res         | 11 +++---
 .../RoutingRevamp/AdvancedRoutingUIUtils.res  |  3 +-
 .../RoutingRevamp/AdvancedRoutingUtils.res    |  4 +--
 .../HyperSwitch/SDKPayment/SDKPage.res        |  3 +-
 .../HyperSwitch/SDKPayment/TestPayment.res    | 11 +++---
 src/screens/HyperSwitch/SDKPayment/WebSDK.res |  9 +++--
 .../ThreeDSFlow/HSwitchThreeDS.res            |  6 ++--
 .../HyperSwitch/ThreeDSFlow/ThreeDSUtils.res  |  2 --
 .../AnalyticsCommonComponents.res             |  3 +-
 src/server/Server.res                         |  2 --
 src/utils/FullscreenUtils.res                 | 20 +++++------
 43 files changed, 88 insertions(+), 132 deletions(-)

diff --git a/src/components/CustomCharts/HighchartHorizontalBarChart.res b/src/components/CustomCharts/HighchartHorizontalBarChart.res
index 51594df08..dc1f3faa4 100644
--- a/src/components/CustomCharts/HighchartHorizontalBarChart.res
+++ b/src/components/CustomCharts/HighchartHorizontalBarChart.res
@@ -1,4 +1,3 @@
-external objToJson: 'a => Js.Json.t = "%identity"
 module RawHBarChart = {
   @react.component
   let make = (~options: Js.Json.t) => {
@@ -159,7 +158,7 @@ let make = (
         enabled: false,
       },
     }
-    defaultOptions->objToJson
+    defaultOptions->Identity.genericTypeToJson
   }, (barChartData, theme))
 
   <RawHBarChart options=barOption />
diff --git a/src/components/CustomCharts/HighchartPieChart.res b/src/components/CustomCharts/HighchartPieChart.res
index 572d4b76c..3eb59a4fa 100644
--- a/src/components/CustomCharts/HighchartPieChart.res
+++ b/src/components/CustomCharts/HighchartPieChart.res
@@ -1,4 +1,3 @@
-external objToJson: 'a => Js.Json.t = "%identity"
 %%raw(`require("./highcharts.css")`)
 module RawPieChart = {
   @react.component
@@ -106,7 +105,7 @@ let make = (
         backgroundColor: theme === Dark ? "#202124" : "white",
       },
     }
-    defaultOptions->objToJson
+    defaultOptions->Identity.genericTypeToJson
   }, (pieSeriesData, theme))
 
   <RawPieChart options=barOption />
diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index 272474225..bb060d79b 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -3,8 +3,6 @@ type domElement
 open LogicUtils
 open DictionaryUtils
 
-external toJson: 'a => Js.Json.t = "%identity"
-
 type ele
 external toElement: Dom.element => ele = "%identity"
 
@@ -43,6 +41,7 @@ module TooltipString = {
 
 type legendType = Table | Points
 module LineChart1D = {
+  open Identity
   @react.component
   let make = (
     ~class: string="",
@@ -455,14 +454,14 @@ module LineChart1D = {
       | Table =>
         {
           "enabled": {isMobileView ? false : showLegend},
-        }->DOMUtils.objToJson
+        }->genericObjectOrRecordToJson
       | Points =>
         {
           "enabled": !isMultiDimensional,
           "itemStyle": legendItemStyle(theme, "IBM Plex Sans", "12px"),
           "itemHiddenStyle": legendHiddenStyle(theme),
           "itemHoverStyle": legendItemStyle(theme),
-        }->DOMUtils.objToJson
+        }->genericObjectOrRecordToJson
       }
 
       let a: options<Js.Json.t> = {
@@ -489,13 +488,13 @@ module LineChart1D = {
                           tick.gridLine.attr(.
                             {
                               "stroke-width": "0",
-                            }->DOMUtils.objToJson,
+                            }->genericObjectOrRecordToJson,
                           )
                         } else {
                           tick.gridLine.attr(.
                             {
                               "stroke": strokeColor,
-                            }->DOMUtils.objToJson,
+                            }->genericObjectOrRecordToJson,
                           )
                         }
                       })
@@ -504,13 +503,13 @@ module LineChart1D = {
                   }
                 )->Some,
               }->Some,
-            }->DOMUtils.objToJson,
+            }->genericObjectOrRecordToJson,
           )
         },
         title: {
           "text": chartTitle ? chartTitleText : "",
           "style": chartTitleStyle,
-        }->DOMUtils.objToJson,
+        }->genericObjectOrRecordToJson,
         credits: {
           "enabled": false,
         },
@@ -529,7 +528,7 @@ module LineChart1D = {
           "style": {
             "color": theme === Light ? "rgba(246, 248, 249, 1)" : "rgba(25, 26, 26, 1)",
           },
-        }->DOMUtils.objToJson,
+        }->genericObjectOrRecordToJson,
         plotOptions: Some(
           {
             "area": {
@@ -543,7 +542,7 @@ module LineChart1D = {
               },
               "lineWidth": 1.2,
               "threshold": Js.Nullable.null,
-            }->DOMUtils.objToJson,
+            }->genericObjectOrRecordToJson,
             "line": {
               "pointStart": None,
               "fillColor": None,
@@ -555,7 +554,7 @@ module LineChart1D = {
               },
               "lineWidth": 1.2,
               "threshold": Js.Nullable.null,
-            }->DOMUtils.objToJson,
+            }->genericObjectOrRecordToJson,
             "boxplot": {
               "visible": false,
             },
@@ -582,20 +581,20 @@ module LineChart1D = {
                 ),
                 "mouseOver": None,
               }),
-            }->DOMUtils.objToJson,
-          }->DOMUtils.objToJson,
+            }->genericObjectOrRecordToJson,
+          }->genericObjectOrRecordToJson,
         ),
         xAxis: {
           let defaultValue = {
             "type": "datetime",
-          }->DOMUtils.objToJson
+          }->genericObjectOrRecordToJson
           let defaultValue = if (
             ["run_date", "run_month", "run_week"]->Js.Array2.includes(groupKey)
           ) {
             {
               "type": "category",
               "tickWidth": 0,
-            }->DOMUtils.objToJson
+            }->genericObjectOrRecordToJson
           } else {
             defaultValue
           }
@@ -662,7 +661,7 @@ module LineChart1D = {
           "title": {
             "text": "",
             "style": chartTitleStyle,
-          }->DOMUtils.objToJson,
+          }->genericObjectOrRecordToJson,
           "labels": {
             let labelsValue = {
               "formatter": Some(
@@ -680,11 +679,11 @@ module LineChart1D = {
                 "letterSpacing": "1px",
                 "color": theme === Light ? "#4B5468" : "rgba(246, 248, 249, 0.25)",
               },
-            }->DOMUtils.objToJson
+            }->genericObjectOrRecordToJson
 
             labelsValue->getDictFromJsonObject->deleteKey("style")->Js.Json.object_
           },
-        }->DOMUtils.objToJson,
+        }->genericObjectOrRecordToJson,
         series: chartData,
       }
       a
diff --git a/src/components/CustomExpandableTable.res b/src/components/CustomExpandableTable.res
index e6ecb519c..5f8a0453c 100644
--- a/src/components/CustomExpandableTable.res
+++ b/src/components/CustomExpandableTable.res
@@ -64,7 +64,7 @@ let make = (
                 {
                   key: string_of_int(i),
                   options: obj.options,
-                  selected: ev->formEventToStrArr,
+                  selected: ev->Identity.formReactEventToArrayOfString,
                 }
               } else {
                 obj
diff --git a/src/components/DynamicTableUtils.res b/src/components/DynamicTableUtils.res
index fb01ab3d8..b9ff8b725 100644
--- a/src/components/DynamicTableUtils.res
+++ b/src/components/DynamicTableUtils.res
@@ -2,8 +2,7 @@ let tableHeadingClass = "font-bold text-xl text-black text-opacity-75 dark:text-
 type view = Table | Card
 @val @scope(("window", "location"))
 external reload: unit => unit = "reload"
-external convertToJsonDict: 't => Js.Dict.t<Js.Json.t> = "%identity"
-external formEventToJsonArr: ReactEvent.Form.t => array<string> = "%identity"
+
 let visibilityColFunc = (
   ~dateFormatConvertor: string => option<Js.Json.t>,
   ~jsonVal: option<Js.Json.t>,
@@ -54,7 +53,7 @@ let filteredData = (
       switch item->Js.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->convertToJsonDict
+        let rowDict = row->Identity.genericTypeToDictOfJson
         let anyMatch = selectedFiltersKeys->Js.Array2.find(keys => {
           // Selected fitler
           switch Js.Dict.get(columnFilter, keys) {
diff --git a/src/components/LocalFilters.res b/src/components/LocalFilters.res
index aae59c1bd..43b5398e1 100644
--- a/src/components/LocalFilters.res
+++ b/src/components/LocalFilters.res
@@ -1,7 +1,5 @@
 let makeFieldInfo = FormRenderer.makeFieldInfo
 
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-
 module CheckLocalFilters = {
   @react.component
   let make = (
@@ -31,7 +29,7 @@ module CheckLocalFilters = {
       None
     }, [values])
     let onChangeSelect = ev => {
-      let fieldNameArr = ev->formEventToStrArr
+      let fieldNameArr = ev->Identity.formReactEventToArrayOfString
       let newlyAdded = Js.Array2.filter(fieldNameArr, newVal =>
         !Js.Array2.includes(checkedFilters, newVal)
       )
diff --git a/src/components/RemoteFilter.res b/src/components/RemoteFilter.res
index d8df016a8..f80354334 100644
--- a/src/components/RemoteFilter.res
+++ b/src/components/RemoteFilter.res
@@ -1,7 +1,5 @@
 let makeFieldInfo = FormRenderer.makeFieldInfo
 
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-
 @val @scope(("window", "location"))
 external reload: unit => unit = "reload"
 @val @scope(("window", "location"))
@@ -288,7 +286,7 @@ module CheckCustomFilters = {
     let values = formState.values
 
     let onChangeSelect = ev => {
-      let fieldNameArr = ev->formEventToStrArr
+      let fieldNameArr = ev->Identity.formReactEventToArrayOfString
       let newlyAdded = Js.Array2.filter(fieldNameArr, newVal =>
         !Js.Array2.includes(checkedFilters, newVal)
       )
diff --git a/src/components/SelectModal.res b/src/components/SelectModal.res
index 5e3709cf2..70c8dd8b2 100644
--- a/src/components/SelectModal.res
+++ b/src/components/SelectModal.res
@@ -1,5 +1,3 @@
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-
 @react.component
 let make = (
   ~modalHeading="Select Options",
@@ -66,7 +64,7 @@ let make = (
     name: "cutomixedColumnsInput",
     onBlur: _ev => (),
     onChange: ev => {
-      let target = ev->formEventToStrArr
+      let target = ev->Identity.formReactEventToArrayOfString
       Js.log2("ppp", target)
       maxLengthArray(target, setValues)
     },
diff --git a/src/components/Table.res b/src/components/Table.res
index b5bf98613..0c225c706 100644
--- a/src/components/Table.res
+++ b/src/components/Table.res
@@ -333,7 +333,7 @@ module TableHeadingCell = {
               ? {
                   key: string_of_int(i),
                   options: obj.options,
-                  selected: ev->formEventToStrArr,
+                  selected: ev->Identity.formReactEventToArrayOfString,
                 }
               : obj
           })
diff --git a/src/components/Table.resi b/src/components/Table.resi
index 8c2a9e46e..ce1b7faa0 100644
--- a/src/components/Table.resi
+++ b/src/components/Table.resi
@@ -22,8 +22,6 @@ type filterDataType = TableUtils.filterDataType =
   | Float(float, float)
   | String
   | DateTime
-
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
 external jsonToStr: Js.Json.t => string = "%identity"
 type textAlign = TableUtils.textAlign = Left | Right
 type fontBold = bool
diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
index e0ee86655..80665f195 100644
--- a/src/components/TableUtils.res
+++ b/src/components/TableUtils.res
@@ -75,7 +75,6 @@ type hideItem = {
   value: string,
 }
 
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
 external jsonToStr: Js.Json.t => string = "%identity"
 
 type textAlign = Left | Right
diff --git a/src/components/TableUtils.resi b/src/components/TableUtils.resi
index 8008ebd92..f5ed0a51f 100644
--- a/src/components/TableUtils.resi
+++ b/src/components/TableUtils.resi
@@ -26,7 +26,6 @@ type selectAllSubmitActions = {
   disableParam: disableField,
 }
 type hideItem = {key: string, value: string}
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
 external jsonToStr: Js.Json.t => string = "%identity"
 type textAlign = Left | Right
 type fontBold = bool
diff --git a/src/components/form/SelectBoxCard.res b/src/components/form/SelectBoxCard.res
index 70b94f830..6033b9a67 100644
--- a/src/components/form/SelectBoxCard.res
+++ b/src/components/form/SelectBoxCard.res
@@ -1,6 +1,5 @@
 module CustomViewSection = {
   external formEventToInt: ReactEvent.Form.t => int = "%identity"
-  external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
   external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
   external jsonArrToa: array<Js.Json.t> => array<'a> = "%identity"
 
@@ -52,7 +51,7 @@ module CustomViewSection = {
               ->ignore
             }
           } else {
-            let evArr = ev->formEventToStrArr
+            let evArr = ev->Identity.formReactEventToArrayOfString
             for i in 0 to evArr->Js.Array2.length - 1 {
               valueArrReversed
               ->Js.Array2.find(x => keyExtractor(x) == evArr[i]->Belt.Option.getWithDefault(""))
diff --git a/src/components/priority-logics/AddPLGateway.res b/src/components/priority-logics/AddPLGateway.res
index 97ca505c1..ee7bb14ca 100644
--- a/src/components/priority-logics/AddPLGateway.res
+++ b/src/components/priority-logics/AddPLGateway.res
@@ -1,4 +1,3 @@
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
 type gateway = PriorityLogicUtils.gateway
 
 module GatewayView = {
@@ -105,7 +104,7 @@ let make = (
     name: "gateways",
     onBlur: _ev => (),
     onChange: ev => {
-      let newSelectedOptions = ev->formEventToStrArr
+      let newSelectedOptions = ev->Identity.formReactEventToArrayOfString
       if newSelectedOptions->Js.Array2.length === 0 {
         gateWaysInput.onChange([]->Identity.anyTypeToReactEvent)
       } else {
diff --git a/src/components/priority-logics/PriorityLogicUtils.res b/src/components/priority-logics/PriorityLogicUtils.res
index 219143a86..83f1337b9 100644
--- a/src/components/priority-logics/PriorityLogicUtils.res
+++ b/src/components/priority-logics/PriorityLogicUtils.res
@@ -1,8 +1,6 @@
 type val =
   StringArray(array<string>) | String(string) | IntArray(array<int>) | Int(int) | Bool(bool)
 
-external tojsonObjTest: 'a => Js.Json.t = "%identity"
-
 type gateway = {
   gateway_name: string,
   distribution: int,
diff --git a/src/entities/analytics/IntegrationsEntity.res b/src/entities/analytics/IntegrationsEntity.res
index f415e33f0..3cc43a93f 100644
--- a/src/entities/analytics/IntegrationsEntity.res
+++ b/src/entities/analytics/IntegrationsEntity.res
@@ -1,4 +1,3 @@
-external toDict: 'a => Js.Dict.t<Js.Json.t> = "%identity"
 let domain = "integrations"
 
 open LogicUtils
diff --git a/src/genericUtils/DOMUtils.res b/src/genericUtils/DOMUtils.res
index ba46d9617..7e73c403e 100644
--- a/src/genericUtils/DOMUtils.res
+++ b/src/genericUtils/DOMUtils.res
@@ -12,15 +12,6 @@ type event
 external event: string => event = "Event"
 @send external dispatchEvent: ('a, event) => unit = "dispatchEvent"
 @send external postMessage: (window, Js.Json.t, string) => unit = "postMessage"
-
 @val @scope(("window", "location")) external windowOrigin: string = "origin"
-external toString: option<Js.Json.t> => string = "%identity"
-external convertToStrDict: 't => Js.Json.t = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
-
-external toJson: exn => Js.Json.t = "%identity"
-external toRespJson: Fetch.Response.t => Js.Json.t = "%identity"
 @get external keyCode: 'a => int = "keyCode"
-
-external formEventToBoolean: ReactEvent.Form.t => bool = "%identity"
 @send external querySelectorAll: (document, string) => array<Dom.element> = "querySelectorAll"
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
index 024baa29c..b23176438 100644
--- a/src/genericUtils/Identity.res
+++ b/src/genericUtils/Identity.res
@@ -4,3 +4,9 @@ external anyTypeToReactEvent: 'a => ReactEvent.Form.t = "%identity"
 external arrofStringToReactEvent: array<string> => ReactEvent.Form.t = "%identity"
 external jsonToNullableJson: Js.Json.t => Js.Nullable.t<Js.Json.t> = "%identity"
 external jsonToReactDOMStyle: Js.Json.t => ReactDOM.style = "%identity"
+external genericTypeToJson: 'a => Js.Json.t = "%identity"
+external genericTypeToBool: 'a => bool = "%identity"
+external formReactEventToBool: ReactEvent.Form.t => bool = "%identity"
+external genericObjectOrRecordToJson: {..} => Js.Json.t = "%identity"
+external genericTypeToDictOfJson: 't => Js.Dict.t<Js.Json.t> = "%identity"
+external formReactEventToArrayOfString: ReactEvent.Form.t => array<string> = "%identity"
diff --git a/src/hooks/AuthHooks.res b/src/hooks/AuthHooks.res
index 8e7bacd98..5d60501df 100644
--- a/src/hooks/AuthHooks.res
+++ b/src/hooks/AuthHooks.res
@@ -14,7 +14,6 @@ type sessionStorage = {
 
 external dictToObj: Js.Dict.t<'a> => {..} = "%identity"
 @val external atob: string => string = "atob"
-external toJson: 'a => Js.Json.t = "%identity"
 let getAgentId = _ => {
   switch LocalStorage.getItem("agentId")->Js.Nullable.toOption {
   | Some(str) => str
@@ -74,7 +73,7 @@ let getHeadersJson = (
         key
         ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
         ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-        ->toJson,
+        ->Identity.genericTypeToJson,
       )
     } else {
       Js.Dict.set(headerObj, "X-RequestId", requestId->Js.Json.string)
@@ -94,7 +93,7 @@ let getHeadersJson = (
           key
           ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
           ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-          ->toJson,
+          ->Identity.genericTypeToJson,
         )
       }
     }
@@ -110,11 +109,12 @@ let getHeadersJson = (
           key
           ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
           ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-          ->toJson,
+          ->Identity.genericTypeToJson,
         )
       }
     }
   }
+
   headerObj->Js.Json.object_
 }
 
diff --git a/src/libraries/Jose.res b/src/libraries/Jose.res
index ce6bbe66d..a356301bd 100644
--- a/src/libraries/Jose.res
+++ b/src/libraries/Jose.res
@@ -75,7 +75,7 @@ external generateKeyPairs: 'a = "generateKeyPair"
 @module("jose") external importPKCS8: ('a, string) => Js.Promise.t<key> = "importPKCS8"
 @module("jose") external compactDecrypt: ('a, key) => Js.Promise.t<Js.Json.t> = "compactDecrypt"
 @module("jose") external compactVerify: ('a, key) => Js.Promise.t<bool> = "compactVerify"
-external toJson: 'a => Js.Json.t = "%identity"
+
 let getKey = keyType => {
   switch LocalStorage.getItem(keyType)->Js.Nullable.toOption {
   | Some(str) => str
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index c0303e12f..2be798615 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -1,6 +1,5 @@
 external toString: option<Js.Json.t> => string = "%identity"
 external convertToStrDict: 't => Js.Json.t = "%identity"
-external asJson: 'a => Js.Json.t = "%identity"
 external sankeyTest: string => SankeyCharts.sankeyEntity = "%identity"
 @get external keyCode: 'a => int = "keyCode"
 type window
diff --git a/src/screens/HyperSwitch/Analytics/DownloadReportModal.res b/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
index 6955e3041..a793e92df 100644
--- a/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
+++ b/src/screens/HyperSwitch/Analytics/DownloadReportModal.res
@@ -1,5 +1,3 @@
-external toJson: 'a => Js.Json.t = "%identity"
-
 type lteGte = {
   gte: Js.Json.t,
   lte: Js.Json.t,
@@ -62,7 +60,7 @@ let make = (~reportModal, ~setReportModal, ~entityName) => {
         endTime: lte,
       },
       dimensions: [],
-    }->toJson
+    }->Identity.genericTypeToJson
     downloadReport(body)
   }
 
@@ -80,7 +78,7 @@ let make = (~reportModal, ~setReportModal, ~entityName) => {
         lte: Js.Date.now()->Js.Date.fromFloat->Js.Date.toISOString->Js.Json.string,
       },
     },
-  }->toJson
+  }->Identity.genericTypeToJson
 
   <Modal
     modalHeading="Generate Reports"
diff --git a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
index 516800622..a315b48f0 100644
--- a/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
+++ b/src/screens/HyperSwitch/Analytics/HSAnalyticsUtils.res
@@ -61,7 +61,6 @@ let options: Js.Json.t => array<EntityType.optionType<'t>> = json => {
   ->Belt.Option.getWithDefault([])
 }
 
-external toDict: 't => Js.Dict.t<Js.Json.t> = "%identity"
 let filterByData = (txnArr, value) => {
   let searchText = LogicUtils.getStringFromJson(value, "")
 
@@ -70,7 +69,7 @@ let filterByData = (txnArr, value) => {
   ->Belt.Array.keepMap((data: 't) => {
     let valueArr =
       data
-      ->toDict
+      ->Identity.genericTypeToDictOfJson
       ->Js.Dict.entries
       ->Js.Array2.map(item => {
         let (_, value) = item
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
index 91073e932..e50416cb1 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -1,5 +1,3 @@
-external formEventToBool: ReactEvent.Form.t => bool = "%identity"
-
 let connectorsWithIntegrationSteps: array<ConnectorTypes.connectorName> = [
   ADYEN,
   CHECKOUT,
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
index 648298560..56c3db9d8 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
@@ -1,5 +1,3 @@
-external formEventToBool: ReactEvent.Form.t => bool = "%identity"
-
 module AdvanceSettings = {
   @react.component
   let make = (~isUpdateFlow, ~frmName, ~renderCountrySelector) => {
@@ -14,7 +12,7 @@ module AdvanceSettings = {
       name: `input`,
       onBlur: _ev => (),
       onChange: ev => {
-        let value = ev->formEventToBool
+        let value = ev->Identity.formReactEventToBool
         setIsFRMSettings(_ => value)
         [frmName, "global"]->Js.Array2.forEach(ele =>
           hyperswitchMixPanel(
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
index 361371c48..f3966caab 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
@@ -1,5 +1,3 @@
-external convertToJsonDict: 't => Js.Dict.t<Js.Json.t> = "%identity"
-
 module RadioSection = {
   open ConnectorTypes
   open FRMTypes
@@ -344,7 +342,7 @@ let make = (~setCurrentStep, ~retrivedValues=None, ~setInitialValues, ~isUpdateF
       ->parseFRMConfig
       ->Js.Array2.filter(config => config.payment_methods->Js.Array2.length > 0)
 
-    valuesDict->Js.Dict.set("frm_configs", filteredArray->toJson)
+    valuesDict->Js.Dict.set("frm_configs", filteredArray->Identity.genericTypeToJson)
     setInitialValues(_ => valuesDict->Js.Json.object_)
     setCurrentStep(prev => prev->getNextStep)
 
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res b/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
index 1c8228f7e..14d5aa999 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMUtils.res
@@ -17,8 +17,6 @@ let base64Format = (. ~value, ~name as _) => {
   value->Js.Json.decodeString->Belt.Option.getWithDefault("")->atob->Js.Json.string
 }
 
-external toJson: 'a => Js.Json.t = "%identity"
-
 let toggleDefaultStyle = "mb-2 relative inline-flex flex-shrink-0 h-6 w-12 border-2 rounded-full  transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75 items-center"
 
 let accordionDefaultStyle = "border pointer-events-none inline-block h-3 w-3 rounded-full bg-white dark:bg-white shadow-lg transform ring-0 transition ease-in-out duration-200"
diff --git a/src/screens/HyperSwitch/HSwitchUtils.res b/src/screens/HyperSwitch/HSwitchUtils.res
index 0f1fc990b..11e40900c 100644
--- a/src/screens/HyperSwitch/HSwitchUtils.res
+++ b/src/screens/HyperSwitch/HSwitchUtils.res
@@ -16,7 +16,6 @@ type browserDetailsObject = {
 
 let feedbackModalOpenCountForConnectors = 4
 
-external objToJson: {..} => Js.Json.t = "%identity"
 let errorClass = "text-sm leading-4 font-medium text-start ml-1 mt-2"
 
 type pageLevelVariant =
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
index 661ca040a..2514bd116 100644
--- a/src/screens/HyperSwitch/Order/OrderUIUtils.res
+++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -100,7 +100,6 @@ let filterUrl = `${HSwitchGlobalVars.hyperSwitchApiPrefix}/payments/filter`
 
 let (startTimeFilterKey, endTimeFilterKey) = ("start_time", "end_time")
 
-external toDict: 't => Js.Dict.t<Js.Json.t> = "%identity"
 let filterByData = (txnArr, value) => {
   open LogicUtils
   let searchText = value->getStringFromJson("")
@@ -110,7 +109,7 @@ let filterByData = (txnArr, value) => {
   ->Belt.Array.keepMap(data => {
     let valueArr =
       data
-      ->toDict
+      ->Identity.genericTypeToDictOfJson
       ->Js.Dict.entries
       ->Js.Array2.map(item => {
         let (_, value) = item
diff --git a/src/screens/HyperSwitch/Refunds/RefundUtils.res b/src/screens/HyperSwitch/Refunds/RefundUtils.res
index 99c9c4868..2421f3469 100644
--- a/src/screens/HyperSwitch/Refunds/RefundUtils.res
+++ b/src/screens/HyperSwitch/Refunds/RefundUtils.res
@@ -48,7 +48,6 @@ let customUI =
 
 let (startTimeFilterKey, endTimeFilterKey) = ("start_time", "end_time")
 
-external toDict: 't => Js.Dict.t<Js.Json.t> = "%identity"
 let filterByData = (txnArr, value) => {
   open LogicUtils
   let searchText = value->getStringFromJson("")
@@ -58,7 +57,7 @@ let filterByData = (txnArr, value) => {
   ->Belt.Array.keepMap(data => {
     let valueArr =
       data
-      ->toDict
+      ->Identity.genericTypeToDictOfJson
       ->Js.Dict.entries
       ->Js.Array2.map(item => {
         let (_, value) = item
diff --git a/src/screens/HyperSwitch/Routing/RoutingStack.res b/src/screens/HyperSwitch/Routing/RoutingStack.res
index 0deba0211..169da83b8 100644
--- a/src/screens/HyperSwitch/Routing/RoutingStack.res
+++ b/src/screens/HyperSwitch/Routing/RoutingStack.res
@@ -1,5 +1,4 @@
 open APIUtils
-external toJson: 'a => Js.Json.t = "%identity"
 @react.component
 let make = (~remainingPath, ~previewOnly=false) => {
   let fetchDetails = useGetMethod()
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
index c662025a3..d3ea4e15b 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
@@ -1,5 +1,3 @@
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
-external toJson: 'a => Js.Json.t = "%identity"
 external anyToEnum: 'a => AdvancedRoutingTypes.connectorSelectionData = "%identity"
 
 @react.component
@@ -36,7 +34,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
     name: "gateways",
     onBlur: _ev => (),
     onChange: ev => {
-      let newSelectedOptions = ev->formEventToStrArr
+      let newSelectedOptions = ev->Identity.formReactEventToArrayOfString
 
       if newSelectedOptions->Js.Array2.length === 0 {
         gateWaysInput.onChange([]->Identity.anyTypeToReactEvent)
@@ -54,14 +52,14 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
                 merchant_connector_id: item,
               },
               split: sharePercent,
-            }->toJson
+            }->Identity.genericTypeToJson
           } else {
             {
               connector: (
                 connectorList->ConnectorTableUtils.getConnectorNameViaId(item)
               ).connector_name,
               merchant_connector_id: item,
-            }->toJson
+            }->Identity.genericTypeToJson
           }
         })
         gateWaysInput.onChange(gatewaysArr->Identity.anyTypeToReactEvent)
@@ -98,9 +96,9 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
             merchant_connector_id: obj.merchant_connector_id,
           },
           split: sharePercent,
-        }->toJson
+        }->Identity.genericTypeToJson
 
-      | VolumeObject(obj) => obj.connector->toJson
+      | VolumeObject(obj) => obj.connector->Identity.genericTypeToJson
       }
     })
     gateWaysInput.onChange(gatewaysArr->Identity.anyTypeToReactEvent)
@@ -118,7 +116,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
     if value < 100 {
       let newList = selectedOptions->Js.Array2.map(option => {
         switch option {
-        | PriorityObject(obj) => obj.connector->toJson
+        | PriorityObject(obj) => obj.connector->Identity.genericTypeToJson
         | VolumeObject(obj) =>
           {
             ...obj,
@@ -128,7 +126,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
               ).merchant_connector_id
               ? value
               : obj.split,
-          }->toJson
+          }->Identity.genericTypeToJson
         }
       })
       gateWaysInput.onChange(newList->Identity.anyTypeToReactEvent)
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 7c93e1a4e..86954f45b 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -3,7 +3,6 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open LogicUtils
 
-external toJson: 'a => Js.Json.t = "%identity"
 external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external toWasm: Js.Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
 
@@ -248,8 +247,8 @@ module RuleBasedUI = {
     let addRule = (index, copy) => {
       let existingRules = ruleInput.value->getArrayFromJson([])
       let newRule = copy
-        ? existingRules[index]->Belt.Option.getWithDefault(defaultRule->toJson)
-        : defaultRule->toJson
+        ? existingRules[index]->Belt.Option.getWithDefault(defaultRule->Identity.genericTypeToJson)
+        : defaultRule->Identity.genericTypeToJson
       let newRules = existingRules->Js.Array2.concat([newRule])
       ruleInput.onChange(newRules->arrToFormEvent)
     }
@@ -339,7 +338,9 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
   let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom)
   let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
   let (profile, setProfile) = React.useState(_ => defaultBusinessProfile.profile_id)
-  let (initialValues, setInitialValues) = React.useState(_ => initialValues->toJson)
+  let (initialValues, setInitialValues) = React.useState(_ =>
+    initialValues->Identity.genericTypeToJson
+  )
   let (initialRule, setInitialRule) = React.useState(() => None)
   let showToast = ToastState.useShowToast()
   let fetchDetails = useGetMethod()
@@ -593,7 +594,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
       }
 
       let getActivateUrl = getURL(~entityName=ROUTING, ~methodType=Post, ~id=None, ())
-      let response = await updateDetails(getActivateUrl, payload->toJson, Post)
+      let response = await updateDetails(getActivateUrl, payload->Identity.genericTypeToJson, Post)
 
       showToast(
         ~message="Successfully Created a new Configuration !",
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 2b5db95f3..61ef2af65 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -4,7 +4,6 @@ open FormRenderer
 
 external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
-external formEventToStrArr: ReactEvent.Form.t => array<string> = "%identity"
 
 module LogicalOps = {
   @react.component
@@ -146,7 +145,7 @@ module ValueInp = {
       name: "string",
       onBlur: _ev => (),
       onChange: ev => {
-        let value = ev->formEventToStrArr
+        let value = ev->Identity.formReactEventToArrayOfString
         valueField.onChange(value->Identity.anyTypeToReactEvent)
       },
       onFocus: _ev => (),
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
index 0c342c5a1..45e55a43c 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUtils.res
@@ -1,5 +1,3 @@
-external toJson: 'a => Js.Json.t = "%identity"
-
 let getCurrentDetailedUTCTime = () => {
   Js.Date.fromFloat(Js.Date.now())->Js.Date.toUTCString
 }
@@ -410,7 +408,7 @@ let generateRule = rulesDict => {
     {
       "name": ruleDict->getString("name", ""),
       "connectorSelection": ruleDict->getJsonObjectFromDict("connectorSelection"),
-      "statements": modifiedStatements->Js.Array2.map(toJson)->Js.Json.array,
+      "statements": modifiedStatements->Js.Array2.map(Identity.genericTypeToJson)->Js.Json.array,
     }
   })
   modifiedRules
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
index fe9300e49..a4712dd51 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -1,5 +1,4 @@
 let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ())
-external toJson: 'a => Js.Json.t = "%identity"
 external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 
 module SDKConfiguarationFields = {
@@ -140,7 +139,7 @@ let make = () => {
         </div>
         <div className="p-7 flex flex-col gap-16">
           <Form
-            initialValues={initialValues->toJson}
+            initialValues={initialValues->Identity.genericTypeToJson}
             formClass="grid grid-cols-2 gap-x-8 gap-y-4"
             onSubmit>
             <SDKConfiguarationFields initialValues />
diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
index a09ef692c..834d4a598 100644
--- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res
+++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res
@@ -1,5 +1,3 @@
-external toJson: 'a => Js.Json.t = "%identity"
-
 @react.component
 let make = (
   ~returnUrl,
@@ -47,9 +45,14 @@ let make = (
     open SDKPaymentUtils
     try {
       let url = `${HSwitchGlobalVars.hyperSwitchApiPrefix}/payments`
-      let paymentData = initialValues->toJson->Js.Json.stringify->safeParse->getTypedValueForPayment
+      let paymentData =
+        initialValues
+        ->Identity.genericTypeToJson
+        ->Js.Json.stringify
+        ->safeParse
+        ->getTypedValueForPayment
       paymentData.currency = paymentData.currency->getCurrencyValue
-      let body = paymentData->toJson
+      let body = paymentData->Identity.genericTypeToJson
       let response = await updateDetails(url, body, Post)
       let clientSecret = response->getDictFromJsonObject->getOptionString("client_secret")
       setPaymentId(_ => response->getDictFromJsonObject->getOptionString("payment_id"))
diff --git a/src/screens/HyperSwitch/SDKPayment/WebSDK.res b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
index a9a0785c6..5c13ca33b 100644
--- a/src/screens/HyperSwitch/SDKPayment/WebSDK.res
+++ b/src/screens/HyperSwitch/SDKPayment/WebSDK.res
@@ -1,7 +1,6 @@
 open HyperSwitch
 open HyperSwitchTypes
 open Promise
-external objToJson: 'a => Js.Json.t = "%identity"
 
 @val external window: 'a = "window"
 @val @scope("window") external parent: 'a = "parent"
@@ -135,11 +134,11 @@ module CheckoutForm = {
               "padding": "15px 32px",
               "borderRadius": "5px",
               "fontWeight": "700",
-            }->objToJson,
-          }->objToJson,
+            }->Identity.genericTypeToJson,
+          }->Identity.genericTypeToJson,
           theme,
         },
-      }->objToJson
+      }->Identity.genericTypeToJson
       setAppearanceElem(_ => appearanceVal)
       elements.update(appearanceVal)
       None
@@ -157,7 +156,7 @@ module CheckoutForm = {
             spacedAccordionItems: isSpaceAccordion,
           },
           "paymentMethodOrder": methodsOrder,
-        }->objToJson
+        }->Identity.genericTypeToJson
         setPaymentElem(_ => paymentVal)
         ele.update(paymentVal)
       | None => ()
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index 35814ca2c..96183969f 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -103,7 +103,9 @@ let make = () => {
   let fetchDetails = useGetMethod(~showErrorToast=false, ())
   let updateDetails = useUpdateMethod(~showErrorToast=false, ())
   let (wasm, setWasm) = React.useState(_ => None)
-  let (initialValues, _setInitialValues) = React.useState(_ => buildInitial3DSValue->toJson)
+  let (initialValues, _setInitialValues) = React.useState(_ =>
+    buildInitial3DSValue->Identity.genericTypeToJson
+  )
   let (initialRule, setInitialRule) = React.useState(() => None)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let (pageView, setPageView) = React.useState(_ => NEW)
@@ -185,7 +187,7 @@ let make = () => {
       let threeDsPayload = values->buildThreeDsPayloadBody
 
       let getActivateUrl = getURL(~entityName=THREE_DS, ~methodType=Put, ())
-      let _ = await updateDetails(getActivateUrl, threeDsPayload->toJson, Put)
+      let _ = await updateDetails(getActivateUrl, threeDsPayload->Identity.genericTypeToJson, Put)
       fetchDetails()->ignore
       setShowWarning(_ => true)
       RescriptReactRouter.replace(`/3ds`)
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res b/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res
index dd71cc234..fbfcef590 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/ThreeDSUtils.res
@@ -1,5 +1,3 @@
-external toJson: 'a => Js.Json.t = "%identity"
-
 type pageState = NEW | LANDING
 
 let statementObject: array<AdvancedRoutingTypes.statement> = [
diff --git a/src/screens/analyticsScreens/AnalyticsCommonComponents.res b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
index 8e20b3751..e4a35f44d 100644
--- a/src/screens/analyticsScreens/AnalyticsCommonComponents.res
+++ b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
@@ -9,7 +9,6 @@ type window
 @val external window: window = "window"
 @scope("window") @val external parent: window = "parent"
 
-external formEventToBoolean: ReactEvent.Form.t => bool = "%identity"
 open LogicUtils
 open Promise
 type modalView = SavedList | SaveNew
@@ -2099,7 +2098,7 @@ let useTableSankeyWrapper = (
   let showDeltaInput: ReactFinalForm.fieldRenderPropsInput = {
     name: "showDelta",
     onBlur: _ev => (),
-    onChange: ev => setShowDelta(_ => ev->formEventToBoolean),
+    onChange: ev => setShowDelta(_ => ev->Identity.formReactEventToBool),
     onFocus: _ev => (),
     value: showDelta->Js.Json.boolean,
     checked: false,
diff --git a/src/server/Server.res b/src/server/Server.res
index 1851223e1..087289adc 100644
--- a/src/server/Server.res
+++ b/src/server/Server.res
@@ -37,8 +37,6 @@ if appName === Some("hyperswitch") {
   Fs.writeFileSync("dist/hyperswitch/hyperswitch.html", htmlInFs)
 }
 
-external asJson: {..} => Js.Json.t = "%identity"
-
 type encodeType = {encoding: string}
 
 @module("child_process")
diff --git a/src/utils/FullscreenUtils.res b/src/utils/FullscreenUtils.res
index 2ea6c8da6..ab21842f5 100644
--- a/src/utils/FullscreenUtils.res
+++ b/src/utils/FullscreenUtils.res
@@ -1,5 +1,3 @@
-external toBool: 'a => bool = "%identity"
-
 type elem = {
   requestFullscreen: (. unit) => unit,
   mozRequestFullScreen: (. unit) => unit,
@@ -19,26 +17,28 @@ type document = {
 @val external document: document = "document"
 
 let enableFullscreen = () => {
+  open Identity
   let elem = document.documentElement
-  if elem.requestFullscreen->toBool {
+  if elem.requestFullscreen->genericTypeToBool {
     elem.requestFullscreen(.)
-  } else if elem.mozRequestFullScreen->toBool {
+  } else if elem.mozRequestFullScreen->genericTypeToBool {
     elem.mozRequestFullScreen(.) // Firefox
-  } else if elem.webkitRequestFullscreen->toBool {
+  } else if elem.webkitRequestFullscreen->genericTypeToBool {
     elem.webkitRequestFullscreen(.) // Chrome, Safari, and Opera
-  } else if elem.msRequestFullscreen->toBool {
+  } else if elem.msRequestFullscreen->genericTypeToBool {
     elem.msRequestFullscreen(.) // Internet Explorer/Edge
   }
 }
 
 let exitFullscreen = () => {
-  if document.exitFullscreen->toBool {
+  open Identity
+  if document.exitFullscreen->genericTypeToBool {
     document.exitFullscreen(.)
-  } else if document.mozCancelFullScreen->toBool {
+  } else if document.mozCancelFullScreen->genericTypeToBool {
     document.mozCancelFullScreen(.) // Firefox
-  } else if document.msExitFullscreen->toBool {
+  } else if document.msExitFullscreen->genericTypeToBool {
     document.msExitFullscreen(.) // Internet Explorer/Edge
-  } else if document.webkitExitFullscreen->toBool {
+  } else if document.webkitExitFullscreen->genericTypeToBool {
     document.webkitExitFullscreen(.) // Chrome, Safari, and Opera
   }
 }

From 07a2cf1d5f36541e69dcf701c38fce33697f0df0 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Mon, 11 Dec 2023 19:28:14 +0530
Subject: [PATCH 05/11] feat: Webhook Section Update - In Connector Preview
 (#90)

---
 public/hyperswitch/icons/solid.svg            |  18 ++-
 .../Connectors/ConnectorAccountDetails.res    |   6 +-
 .../HyperSwitch/Connectors/ConnectorHome.res  |   5 +-
 .../Connectors/ConnectorPreview.res           |  68 ++++++------
 .../HyperSwitch/Connectors/ConnectorTypes.res |   2 +-
 .../HyperSwitch/Connectors/ConnectorUtils.res |   3 +-
 .../Connectors/ConnectorWebhooks.res          | 104 ------------------
 .../HyperSwitch/FraudAndRisk/FRMConfigure.res |   3 +-
 .../HyperSwitch/FraudAndRisk/FRMInfo.res      |   2 +-
 .../FraudAndRisk/FRMIntegrationFields.res     |   6 +-
 .../HyperSwitch/FraudAndRisk/FRMSummary.res   |  14 ---
 .../CommonConnectorFlow/SetupConnector.res    |   8 +-
 12 files changed, 64 insertions(+), 175 deletions(-)
 delete mode 100644 src/screens/HyperSwitch/Connectors/ConnectorWebhooks.res

diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg
index 6920b90d2..7c73d26b4 100644
--- a/public/hyperswitch/icons/solid.svg
+++ b/public/hyperswitch/icons/solid.svg
@@ -4116,7 +4116,8 @@ License)
   <symbol id="show-filters" viewBox="0 0 12 12" fill="none">
     <path
       d="M7.01525 5.48329L10.5229 1.20037H1.47689L5.02157 5.48329C5.09564 5.59392 5.1322 5.70502 5.1322 5.81563V9.65563L6.86752 10.505V5.77904C6.86752 5.66842 6.94158 5.55732 7.01518 5.48374L7.01525 5.48329ZM11.8893 1.05265L7.82754 5.96329V11.2433C7.82754 11.6127 7.45816 11.8339 7.16284 11.6863L4.46752 10.3939C4.31986 10.3198 4.17221 10.1721 4.17221 9.95089V5.96329L0.110454 1.05265C-0.147822 0.757344 0.073423 0.277344 0.479826 0.277344H11.5198C11.9258 0.277344 12.1475 0.720312 11.8892 1.05265H11.8893Z"
-      fill="#354052"></path>
+      fill="#354052"
+    ></path>
   </symbol>
   <symbol id="shower" viewBox="0 0 512 512">
     <path
@@ -8218,10 +8219,7 @@ License)
       />
     </g>
   </symbol>
-  <symbol
-    id="nonselected"
-    viewBox="0 0 12 12"
-  >
+  <symbol id="nonselected" viewBox="0 0 12 12">
     <path
       d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.68 6C1.68 8.38587 3.61413 10.32 6 10.32C8.38587 10.32 10.32 8.38587 10.32 6C10.32 3.61413 8.38587 1.68 6 1.68C3.61413 1.68 1.68 3.61413 1.68 6Z"
       fill="#CCCCCC"
@@ -8767,7 +8765,7 @@ License)
       d="M2.2 12H9.8C11.0148 12 12 11.0466 12 9.87097V2.12903C12 0.953381 11.0148 0 9.8 0H2.2C0.98516 0 0 0.953381 0 2.12903V9.87097C0 11.0466 0.98516 12 2.2 12ZM4.8 10.8387V1.16129H7.2V10.8387H4.8ZM10.8 2.12903V9.87097C10.8 10.1273 10.6945 10.3737 10.507 10.5552C10.3195 10.7367 10.0649 10.8387 9.8 10.8387H8.4V1.16129H9.8C10.0648 1.16129 10.3195 1.26336 10.507 1.4448C10.6945 1.62624 10.8 1.87272 10.8 2.12903ZM1.2 2.12903C1.2 1.59451 1.64766 1.16129 2.2 1.16129H3.6V10.8387H2.2C1.64766 10.8387 1.2 10.4055 1.2 9.87097V2.12903Z"
     ></path>
   </symbol>
-    <symbol
+  <symbol
     id="check-black"
     viewBox="0 0 20 20"
     fill="none"
@@ -8798,4 +8796,12 @@ License)
       </clipPath>
     </defs>
   </symbol>
+  <symbol id="tooltip_info" viewBox="0 0 12 13">
+    <path
+      d="M6 1.25C3.10078 1.25 0.75 3.60078 0.75 6.5C0.75 9.39922 3.10078 11.75 6 11.75C8.89922 11.75 11.25 9.39922 11.25 6.5C11.25 3.60078 8.89922 1.25 6 1.25ZM6 10.8594C3.59297 10.8594 1.64062 8.90703 1.64062 6.5C1.64062 4.09297 3.59297 2.14062 6 2.14062C8.40703 2.14062 10.3594 4.09297 10.3594 6.5C10.3594 8.90703 8.40703 10.8594 6 10.8594Z"
+    ></path>
+    <path
+      d="M5.46332 4H6.52896V4.96657H5.46332V4ZM5 8.20669H5.20077C5.30888 8.20669 5.3861 8.17933 5.43243 8.12462C5.47876 8.06383 5.50193 7.97264 5.50193 7.85106V6.79939C5.50193 6.66565 5.48134 6.56839 5.44015 6.5076C5.40412 6.44681 5.32947 6.41641 5.21622 6.41641H5V5.6231H6.51351V7.8693C6.51351 7.9848 6.53411 8.06991 6.57529 8.12462C6.62162 8.17933 6.69627 8.20669 6.79923 8.20669H7V9H5V8.20669Z"
+    ></path>
+  </symbol>
 </svg>
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
index e50416cb1..52b924357 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -68,7 +68,7 @@ module BusinessProfileRender = {
                     mixpanelEventWrapper(
                       ~url,
                       ~selectedConnector,
-                      ~actionName=`settings_choose_country`,
+                      ~actionName=`settings_choose_profile`,
                       ~hyperswitchMixPanel,
                     )
                   }
@@ -80,7 +80,7 @@ module BusinessProfileRender = {
               ~options={
                 arrayOfBusinessProfile->MerchantAccountUtils.businessProfileNameDropDownOption
               },
-              ~buttonText="Select Country",
+              ~buttonText="Select Profile",
               ~placeholder="",
               (),
             ),
@@ -306,7 +306,7 @@ let make = (
         ~url,
         ~hyperswitchMixPanel,
       )
-      setCurrentStep(_ => isPayoutFlow ? PaymentMethods : Webhooks)
+      setCurrentStep(_ => PaymentMethods)
       setScreenState(_ => Success)
       setInitialValues(_ => body)
     } catch {
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorHome.res b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
index 07a99b6b4..1b0bf74f3 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorHome.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
@@ -150,14 +150,13 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
       <UIUtils.RenderIf condition={currentStep !== Preview && showStepIndicator}>
         <ConnectorCurrentStepIndicator currentStep stepsArr borderWidth />
       </UIUtils.RenderIf>
-      <div className="bg-white rounded-lg border h-3/4 overflow-scroll shadow-boxShadowMultiple">
+      <div
+        className="bg-white rounded-lg border h-3/4 overflow-scroll shadow-boxShadowMultiple show-scrollbar">
         {switch currentStep {
         | IntegFields =>
           <ConnectorAccountDetails
             currentStep setCurrentStep setInitialValues initialValues isUpdateFlow isPayoutFlow
           />
-        | Webhooks =>
-          <ConnectorWebhooks connectorName={connector} setCurrentStep currentStep isUpdateFlow />
         | PaymentMethods =>
           <ConnectorPaymentMethod
             currentStep
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
index c3ea22bfc..fffed44df 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
@@ -12,6 +12,26 @@ module InfoField = {
   }
 }
 
+module KeyAndCopyArea = {
+  @react.component
+  let make = (~copyValue) => {
+    let showToast = ToastState.useShowToast()
+    <div className={`flex flex-col md:flex-row gap-2 items-start`}>
+      <p className="text-base text-grey-700 opacity-70 break-all overflow-scroll">
+        {copyValue->React.string}
+      </p>
+      <div
+        className="cursor-pointer h-20 w-20 pt-1"
+        onClick={_ => {
+          Clipboard.writeText(copyValue)
+          showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
+        }}>
+        <img src={`/assets/CopyToClipboard.svg`} />
+      </div>
+    </div>
+  }
+}
+
 module MenuOption = {
   open HeadlessUI
   @react.component
@@ -99,9 +119,6 @@ module ConnectorSummaryGrid = {
     ~isPayoutFlow,
     ~setScreenState,
   ) => {
-    let url = RescriptReactRouter.useUrl()
-    let showToast = ToastState.useShowToast()
-    let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let businessProfiles = HyperswitchAtom.businessProfilesAtom->Recoil.useRecoilValueFromAtom
     let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
     let arrayOfBusinessProfile = businessProfiles->MerchantAccountUtils.getArrayOfBusinessProfile
@@ -112,6 +129,10 @@ module ConnectorSummaryGrid = {
       )
       ->Belt.Option.getWithDefault(defaultBusinessProfile)
     let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
+    let copyValueOfWebhookEndpoint = ConnectorUtils.getWebhooksUrl(
+      ~connectorName={connectorInfo.merchant_connector_id},
+      ~merchantId,
+    )
     let connectorDetails = React.useMemo1(() => {
       try {
         if connector->Js.String2.length > 0 {
@@ -135,21 +156,21 @@ module ConnectorSummaryGrid = {
     let (_, connectorAccountFields, _, _, _, _) = ConnectorUtils.getConnectorFields(
       connectorDetails,
     )
-    let webhooksUrl = ConnectorUtils.getWebhooksUrl(~connectorName=connector, ~merchantId)
 
     <div className="p-2 md:px-10">
       <div className="grid grid-cols-4 my-12">
-        <h4 className="text-lg font-semibold"> {"Processor Mode"->React.string} </h4>
+        <div className="flex items-start">
+          <h4 className="text-lg font-semibold"> {"Webhook Endpoint"->React.string} </h4>
+          <ToolTip
+            height=""
+            description="Configure this endpoint in the processors dashboard under webhook settings for us to receive events from the processor"
+            toolTipFor={<Icon name="tooltip_info" className={`mt-1 ml-1`} />}
+            toolTipPosition=Top
+            tooltipWidthClass="w-fit"
+          />
+        </div>
         <div className="col-span-3">
-          {if connectorInfo.test_mode {
-            <span className="font-semibold p-2 px-3 bg-orange-200 rounded-full">
-              {"TEST MODE"->React.string}
-            </span>
-          } else {
-            <span className="font-semibold p-2 px-3 bg-blue-200 rounded-full">
-              {"LIVE MODE"->React.string}
-            </span>
-          }}
+          <KeyAndCopyArea copyValue={copyValueOfWebhookEndpoint} />
         </div>
       </div>
       <div className="grid grid-cols-4 my-12">
@@ -175,25 +196,6 @@ module ConnectorSummaryGrid = {
           ->React.array}
         </div>
       </div>
-      <div className="grid grid-cols-4 my-12">
-        <h4 className="text-lg font-semibold"> {"Webhooks"->React.string} </h4>
-        <div className="flex col-span-3">
-          <div> {webhooksUrl->React.string} </div>
-          <img
-            src={`/assets/CopyToClipboard.svg`}
-            onClick={_ => {
-              Clipboard.writeText(webhooksUrl)
-              showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
-              hyperswitchMixPanel(
-                ~pageName=`${url.path->LogicUtils.getListHead}`,
-                ~contextName="webhook_processor",
-                ~actionName="hs_webhookcopied",
-                (),
-              )
-            }}
-          />
-        </div>
-      </div>
       <div className="grid grid-cols-4  my-12">
         <h4 className="text-lg font-semibold"> {"PMTs"->React.string} </h4>
         <div className="flex flex-col gap-6 col-span-3">
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTypes.res b/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
index 160af42a5..cfa47adaf 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
@@ -1,4 +1,4 @@
-type steps = IntegFields | PaymentMethods | SummaryAndTest | Preview | Webhooks
+type steps = IntegFields | PaymentMethods | SummaryAndTest | Preview
 type connectorIntegrationField = {
   placeholder?: string,
   label?: string,
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
index e28212c72..10f14a5a1 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
@@ -10,14 +10,13 @@ external changeType: Js.Json.t => 't = "%identity"
 type object = {fromEntries: (. map) => Js.Json.t}
 external object: object = "Object"
 
-let stepsArr = [IntegFields, Webhooks, PaymentMethods, SummaryAndTest]
+let stepsArr = [IntegFields, PaymentMethods, SummaryAndTest]
 
 let payoutStepsArr = [IntegFields, PaymentMethods, SummaryAndTest]
 
 let getStepName = step => {
   switch step {
   | IntegFields => "Credentials"
-  | Webhooks => "Webhooks"
   | PaymentMethods => "Payment Methods"
   | SummaryAndTest => "Summary"
   | Preview => "Preview"
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorWebhooks.res b/src/screens/HyperSwitch/Connectors/ConnectorWebhooks.res
deleted file mode 100644
index 6cde1d7c5..000000000
--- a/src/screens/HyperSwitch/Connectors/ConnectorWebhooks.res
+++ /dev/null
@@ -1,104 +0,0 @@
-let highlightedText = "text-base font-normal text-blue-700 underline"
-let subTextStyle = "text-base font-normal text-grey-700 opacity-50"
-let headerTextStyle = "text-xl font-semibold text-grey-700"
-
-module SetupWebhookProcessor = {
-  @react.component
-  let make = (~connectorName="", ~headerSectionText, ~subtextSectionText, ~customRightSection) => {
-    <div className="flex flex-col gap-8">
-      <div className="flex flex-col bg-jp-gray-light_gray_bg p-10 gap-6">
-        <div className="flex flex-col gap-2 col-span-1">
-          <p className={`${subTextStyle} !opacity-100`}> {headerSectionText->React.string} </p>
-          <p className=subTextStyle> {subtextSectionText->React.string} </p>
-        </div>
-        <div className="col-span-1"> {customRightSection} </div>
-      </div>
-    </div>
-  }
-}
-
-module KeyAndCopyArea = {
-  @react.component
-  let make = (~copyValue, ~contextName, ~actionName, ~shadowClass="") => {
-    let showToast = ToastState.useShowToast()
-    let hyperswitchMixPanel = HSMixPanel.useSendEvent()
-    let url = RescriptReactRouter.useUrl()
-    <div
-      className={`flex flex-col md:flex-row gap-4 border rounded-md py-2 px-4 items-center w-full md:w-max bg-white flex-wrap ${shadowClass}`}>
-      <p className="text-base text-grey-700 opacity-70 break-all overflow-scroll">
-        {copyValue->React.string}
-      </p>
-      <div
-        className="py-1 px-4 border rounded-md flex gap-2 items-center cursor-pointer"
-        onClick={_ => {
-          Clipboard.writeText(copyValue)
-          showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
-          hyperswitchMixPanel(
-            ~pageName=`${url.path->LogicUtils.getListHead}`,
-            ~contextName,
-            ~actionName,
-            (),
-          )
-        }}>
-        <img src={`/assets/CopyToClipboard.svg`} />
-        <p className="text-lg text-normal text-grey-700 opacity-50"> {"Copy"->React.string} </p>
-      </div>
-    </div>
-  }
-}
-
-@react.component
-let make = (~connectorName, ~setCurrentStep, ~currentStep, ~isUpdateFlow) => {
-  let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
-  let hyperswitchMixPanel = HSMixPanel.useSendEvent()
-  let url = RescriptReactRouter.useUrl()
-  let copyValue = ConnectorUtils.getWebhooksUrl(~connectorName, ~merchantId)
-
-  <div className="flex flex-col ">
-    <div className="flex justify-between border-b p-2 md:px-10 md:py-6">
-      <div className="flex gap-2 items-center">
-        <GatewayIcon gateway={connectorName->Js.String2.toUpperCase} className="w-14 h-14" />
-        <h2 className="text-xl font-semibold">
-          {connectorName->LogicUtils.capitalizeString->React.string}
-        </h2>
-      </div>
-      <div className="self-center">
-        <Button
-          text="Proceed"
-          buttonType={Primary}
-          onClick={_ => {
-            ConnectorUtils.getMixpanelForConnectorOnSubmit(
-              ~connectorName,
-              ~currentStep,
-              ~isUpdateFlow,
-              ~url,
-              ~hyperswitchMixPanel,
-            )
-            setCurrentStep(_ => ConnectorTypes.PaymentMethods)
-          }}
-        />
-      </div>
-    </div>
-    <div className="flex flex-col gap-8 p-2 md:p-10">
-      <div className="flex flex-col gap-2 ">
-        <p className=headerTextStyle>
-          {`Setup Webhook on ${connectorName->LogicUtils.capitalizeString}`->React.string}
-        </p>
-        <p className=subTextStyle>
-          {"Configure hyperswitch's webhook on your processor's end"->React.string}
-        </p>
-      </div>
-      <SetupWebhookProcessor
-        connectorName
-        headerSectionText="Hyperswitch Webhook Endpoint"
-        subtextSectionText="Configure this endpoint in the processors dashboard under webhook settings for us to receive events from the processor"
-        customRightSection={<KeyAndCopyArea
-          copyValue
-          contextName="setup_webhook_processor"
-          actionName="hs_webhookcopied"
-          shadowClass="shadow shadow-hyperswitch_box_shadow !w-max"
-        />}
-      />
-    </div>
-  </div>
-}
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
index f1cce8246..8a804ac3f 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
@@ -120,8 +120,7 @@ let make = () => {
             setCurrentStep retrivedValues=Some(initialValues) setInitialValues isUpdateFlow
           />
         | SummaryAndTest
-        | Preview
-        | _ =>
+        | Preview =>
           <FRMSummary initialValues currentStep setCurrentStep isUpdateFlow />
         }}
       </div>
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMInfo.res b/src/screens/HyperSwitch/FraudAndRisk/FRMInfo.res
index d613284a0..4c07a6c31 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMInfo.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMInfo.res
@@ -77,7 +77,7 @@ let getNextStep: ConnectorTypes.steps => ConnectorTypes.steps = currentStep => {
   | PaymentMethods => IntegFields
   | IntegFields => SummaryAndTest
   | SummaryAndTest => SummaryAndTest
-  | Preview | _ => Preview
+  | Preview => Preview
   }
 }
 
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
index 56c3db9d8..33224ae07 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
@@ -2,7 +2,7 @@ module AdvanceSettings = {
   @react.component
   let make = (~isUpdateFlow, ~frmName, ~renderCountrySelector) => {
     let (isFRMSettings, setIsFRMSettings) = React.useState(_ => isUpdateFlow)
-
+    let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
     let form = ReactFinalForm.useForm()
     let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let url = RescriptReactRouter.useUrl()
@@ -40,7 +40,7 @@ module AdvanceSettings = {
       None
     }, [businessProfileValue.profile_id])
 
-    <>
+    <UIUtils.RenderIf condition={featureFlagDetails.businessProfile}>
       <div className="flex gap-2 items-center p-2">
         <BoolInput input={inputLabel} isDisabled={isUpdateFlow} boolCustomClass="rounded-full" />
         <p className="font-semibold !text-black opacity-50 ">
@@ -50,7 +50,7 @@ module AdvanceSettings = {
       <UIUtils.RenderIf condition={renderCountrySelector && isFRMSettings}>
         <ConnectorAccountDetails.BusinessProfileRender isUpdateFlow selectedConnector={frmName} />
       </UIUtils.RenderIf>
-    </>
+    </UIUtils.RenderIf>
   }
 }
 
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
index 255e5eff6..a967599f2 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
@@ -130,20 +130,6 @@ let make = (~initialValues, ~currentStep, ~setCurrentStep, ~isUpdateFlow) => {
       }}
     </div>
     <div>
-      <div className="grid grid-cols-2 md:w-1/2 m-12">
-        <h4 className="text-lg font-semibold"> {"Processor Mode"->React.string} </h4>
-        <div>
-          {if frmInfo.test_mode {
-            <span className="font-semibold p-2 px-3 bg-orange-200 rounded-full">
-              {"TEST MODE"->React.string}
-            </span>
-          } else {
-            <span className="font-semibold p-2 px-3 bg-blue-200 rounded-full">
-              {"LIVE MODE"->React.string}
-            </span>
-          }}
-        </div>
-      </div>
       <div className="grid grid-cols-2 md:w-1/2 m-12">
         <h4 className="text-lg font-semibold"> {"Profile id"->React.string} </h4>
         <div> {frmInfo.profile_id->React.string} </div>
diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
index 84e126a53..82cdf8b01 100644
--- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
+++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res
@@ -133,9 +133,11 @@ module ConfigureProcessor = {
         nextButton={<FormRenderer.SubmitButton
           loadingText="Processing..." text="Proceed" buttonSize={Small}
         />}>
-        <ConnectorAccountDetails.BusinessProfileRender
-          isUpdateFlow=false selectedConnector={connectorName}
-        />
+        <UIUtils.RenderIf condition={featureFlagDetails.businessProfile}>
+          <ConnectorAccountDetails.BusinessProfileRender
+            isUpdateFlow=false selectedConnector={connectorName}
+          />
+        </UIUtils.RenderIf>
         <SetupConnectorCredentials.ConnectorDetailsForm
           connectorName
           connectorDetails

From ad02852925ac24b6f83f7eef4bc395d44649317f Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 11 Dec 2023 14:34:54 +0000
Subject: [PATCH 06/11] chore(version): v1.5.0

---
 CHANGELOG.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13ad1ec53..bd6b18d39 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,29 @@ All notable changes to this project will be documented in this file. See [conven
 
 - - -
 
+## 1.5.0 (2023-12-11)
+
+### Features
+
+- Refunds search based on refunds id ([#83](https://github.com/juspay/hyperswitch-control-center/pull/83)) ([`f5363b4`](https://github.com/juspay/hyperswitch-control-center/commit/f5363b4ac3547232bd637884bd8a9fad85056608))
+- Identity file changes in Codebase. ([#89](https://github.com/juspay/hyperswitch-control-center/pull/89)) ([`9e3aec7`](https://github.com/juspay/hyperswitch-control-center/commit/9e3aec7f7434cf4610db50a716653e73693aec94))
+- Webhook Section Update - In Connector Preview ([#90](https://github.com/juspay/hyperswitch-control-center/pull/90)) ([`07a2cf1`](https://github.com/juspay/hyperswitch-control-center/commit/07a2cf1d5f36541e69dcf701c38fce33697f0df0))
+
+### Bug Fixes
+
+- Recoil value for feature flag updated ([#85](https://github.com/juspay/hyperswitch-control-center/pull/85)) ([`d7bb46e`](https://github.com/juspay/hyperswitch-control-center/commit/d7bb46e26c766ab8b43488ff42c6a0ad4eb21864))
+- Added configure return url after business profile ([#82](https://github.com/juspay/hyperswitch-control-center/pull/82)) ([`ade63aa`](https://github.com/juspay/hyperswitch-control-center/commit/ade63aa8177d6269e02ac0db4f6e63867511b661))
+- SDK Processing - Go to payments not working fix ([#88](https://github.com/juspay/hyperswitch-control-center/pull/88)) ([`f45d8dd`](https://github.com/juspay/hyperswitch-control-center/commit/f45d8dd6016f859b76013364c83c0758e5a42114))
+
+### Refactors
+
+- Common file for all identity functions ([#86](https://github.com/juspay/hyperswitch-control-center/pull/86)) ([`6ad715f`](https://github.com/juspay/hyperswitch-control-center/commit/6ad715fb11da557f4f07ff35e8f616b69684ff0c))
+
+**Full Changelog:** [`v1.4.0...v1.5.0`](https://github.com/juspay/hyperswitch-control-center/compare/v1.4.0...v1.5.0)
+
+- - -
+
+
 ## 1.4.0 (2023-12-08)
 
 ### Features

From 706a414e4e3f455ebdc9a0cbf792b240e6f1b384 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Mon, 11 Dec 2023 20:05:22 +0530
Subject: [PATCH 07/11] feat: Identity file changes (#91)

---
 src/components/ButtonGroupIp.res              |  3 +-
 src/components/CsvFileUpload.res              |  6 ----
 .../CustomCharts/HighchartBarChart.res        |  4 +--
 .../CustomCharts/LineChartUtils.res           | 14 ++++-----
 src/components/DatePicker.res                 |  2 --
 .../DistributionDonut/DistributionDonut.res   | 31 +++++++++----------
 src/components/ExportTable.res                |  3 +-
 src/components/HSwitchSingleStatWidget.res    | 24 ++++++++------
 src/components/HighchartFunnelChart.res       | 27 ++++++++--------
 src/components/InputFields.res                |  4 +--
 src/components/InputFields.resi               |  2 --
 src/components/RedirectSearchInput.res        |  2 --
 src/components/SelectBox.res                  | 26 ++++++----------
 src/components/SelectBox.resi                 |  6 ----
 src/components/form/MultipleTextInput.res     |  4 +--
 src/components/form/SelectBoxCard.res         |  3 +-
 .../analytics/EulerAnalyticsLogUtils.res      |  1 -
 src/genericUtils/Identity.res                 |  4 +++
 src/libraries/Highcharts.res                  |  2 --
 src/libraries/SankeyHighcharts.res            |  6 ++--
 .../HyperSwitch/Analytics/Analytics.res       |  3 --
 .../RoutingRevamp/AdvancedRouting.res         |  7 ++---
 .../RoutingRevamp/AdvancedRoutingUIUtils.res  | 14 +++++++--
 .../HyperSwitch/SDKPayment/SDKPage.res        |  4 +--
 .../ThreeDSFlow/HSwitchThreeDS.res            |  7 ++---
 .../AnalyticsCommonComponents.res             | 11 ++-----
 26 files changed, 95 insertions(+), 125 deletions(-)

diff --git a/src/components/ButtonGroupIp.res b/src/components/ButtonGroupIp.res
index 5e649003a..58fd16ccb 100644
--- a/src/components/ButtonGroupIp.res
+++ b/src/components/ButtonGroupIp.res
@@ -1,4 +1,3 @@
-external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 open SelectBox
 @react.component
 let make = (
@@ -9,7 +8,7 @@ let make = (
   ~isSeparate=false,
   ~buttonSize=?,
 ) => {
-  let onChange = str => input.onChange(str->strToFormEvent)
+  let onChange = str => input.onChange(str->Identity.stringToFormReactEvent)
   let buttonState = {isDisabled ? Button.Disabled : Button.Normal}
 
   let buttons =
diff --git a/src/components/CsvFileUpload.res b/src/components/CsvFileUpload.res
index 30629d66a..03548e79e 100644
--- a/src/components/CsvFileUpload.res
+++ b/src/components/CsvFileUpload.res
@@ -1,12 +1,6 @@
 type t
-
 type formData
-external formDataToStr: t => string = "%identity"
-
-external toString: 't => string = "%identity"
-external toRef: 'a => 't = "%identity"
 @new external formData: unit => t = "FormData"
-
 @send external append: (t, string, 'a) => unit = "append"
 @send external delete: (t, string) => unit = "delete"
 @send external get: (t, string) => 'k = "get"
diff --git a/src/components/CustomCharts/HighchartBarChart.res b/src/components/CustomCharts/HighchartBarChart.res
index 81a46ab95..5d5c409c2 100644
--- a/src/components/CustomCharts/HighchartBarChart.res
+++ b/src/components/CustomCharts/HighchartBarChart.res
@@ -1,5 +1,3 @@
-external objToJson: {..} => Js.Json.t = "%identity"
-
 module RawBarChart = {
   @react.component
   let make = (~options: Js.Json.t) => {
@@ -59,7 +57,7 @@ module HighBarChart1D = {
         },
         "series": barSeries,
         "legend": {"enabled": false},
-      }->objToJson
+      }->Identity.genericObjectOrRecordToJson
       barOption
     }, (barSeries, gridLineColor))
     if barSeries->Js.Array2.length > 0 {
diff --git a/src/components/CustomCharts/LineChartUtils.res b/src/components/CustomCharts/LineChartUtils.res
index fa44abd58..11075cee5 100644
--- a/src/components/CustomCharts/LineChartUtils.res
+++ b/src/components/CustomCharts/LineChartUtils.res
@@ -1,8 +1,8 @@
 external legendItemAsBool: Highcharts.legendItem => Highcharts.element = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
 
 open LogicUtils
 open Highcharts
+open Identity
 let defaultColor = "#7cb5ec"
 let legendColor = [
   defaultColor,
@@ -804,7 +804,7 @@ let legendItemStyle = (theme: ThemeProvider.theme, legendFontFamilyClass, legend
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   | Light =>
     {
       "color": "rgba(53, 64, 82, 0.8)",
@@ -813,7 +813,7 @@ let legendItemStyle = (theme: ThemeProvider.theme, legendFontFamilyClass, legend
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
 }
 
@@ -831,7 +831,7 @@ let legendHiddenStyle = (
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   | Light =>
     {
       "color": "rgba(53, 64, 82, 0.2)",
@@ -840,7 +840,7 @@ let legendHiddenStyle = (
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
 }
 
@@ -853,7 +853,7 @@ let chartTitleStyle = (theme: ThemeProvider.theme) => {
       "fontWeight": "500",
       "fontFamily": "IBM Plex Sans",
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   | Light =>
     {
       "color": "#354052",
@@ -861,7 +861,7 @@ let chartTitleStyle = (theme: ThemeProvider.theme) => {
       "fontWeight": "500",
       "fontFamily": "IBM Plex Sans",
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
 }
 
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index 83f694b19..f77716bb1 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -1,5 +1,3 @@
-external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
-
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
diff --git a/src/components/DistributionDonut/DistributionDonut.res b/src/components/DistributionDonut/DistributionDonut.res
index 6a056d565..4611f2a6e 100644
--- a/src/components/DistributionDonut/DistributionDonut.res
+++ b/src/components/DistributionDonut/DistributionDonut.res
@@ -1,5 +1,3 @@
-external objToJson: {..} => Js.Json.t = "%identity"
-
 type dataPoint = {y: int, name: string}
 
 module LegendField = {
@@ -50,6 +48,7 @@ let make = (
   ~data: array<Js.Json.t>,
   ~getGroupBasedData: (array<Js.Json.t>, string) => array<dataPoint>,
 ) => {
+  open Identity
   let (groupBy, setGroupBy) = React.useState(_ => "")
   let (groupBasedData, setGroupBasedData) = React.useState((_): array<dataPoint> => [])
   let getDonutOptions = (_): Js.Json.t => {
@@ -58,37 +57,37 @@ let make = (
         "text": Js.Json.null,
         "align": "center",
         "margin": 0,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "colors": colors,
       "credits": {
         "enabled": false,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "subtitle": {
         "useHTML": true,
         "text": getSubtilteHtml(groupBasedData),
         "floating": true,
         "verticalAlign": "middle",
         "y": 10,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "legend": {
         "enabled": false,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "chart": {
         "backgroundColor": Js.Json.null,
         "className": "h-60",
         "height": 260,
         "width": 260,
         "borderColor": Js.Json.null,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "tooltip": {
         "valueDecimals": 0,
         "valueSuffix": "",
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "plotOptions": {
         "series": {
           "animation": {
             "duration": 0,
-          }->objToJson,
+          }->genericObjectOrRecordToJson,
           "borderWidth": 5,
           "colorByPoint": true,
           "type": "pie",
@@ -101,23 +100,23 @@ let make = (
             "style": {
               "fontWeight": "bold",
               "fontSize": "16px",
-            }->objToJson,
+            }->genericObjectOrRecordToJson,
             "connectorWidth": 0,
-          }->objToJson,
-        }->objToJson,
-      }->objToJson,
+          }->genericObjectOrRecordToJson,
+        }->genericObjectOrRecordToJson,
+      }->genericObjectOrRecordToJson,
       "series": [
         {
           "color": "black",
           "type": "pie",
           "name": tooltipTitle,
           "data": Js.Array.map(
-            (d: dataPoint): Js.Json.t => {"y": d.y, "name": d.name}->objToJson,
+            (d: dataPoint): Js.Json.t => {"y": d.y, "name": d.name}->genericObjectOrRecordToJson,
             groupBasedData,
           ),
-        }->objToJson,
+        }->genericObjectOrRecordToJson,
       ],
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
   React.useEffect1(() => {
     setGroupBy(_ =>
diff --git a/src/components/ExportTable.res b/src/components/ExportTable.res
index 67a0f834f..452db359a 100644
--- a/src/components/ExportTable.res
+++ b/src/components/ExportTable.res
@@ -1,4 +1,3 @@
-external convertToStrDict: 't => Js.Json.t = "%identity"
 @react.component
 let make = (
   ~title: string,
@@ -11,7 +10,7 @@ let make = (
   let actualDataOrig =
     tableData
     ->Belt.Array.keepMap(item => item->Js.Nullable.toOption)
-    ->Js.Array2.map(convertToStrDict)
+    ->Js.Array2.map(Identity.genericTypeToJson)
 
   let headerNames = visibleColumns->Belt.Array.keepMap(head => {
     let item = head->getHeading
diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
index f6a4ffa04..1a3666ad9 100644
--- a/src/components/HSwitchSingleStatWidget.res
+++ b/src/components/HSwitchSingleStatWidget.res
@@ -17,6 +17,7 @@ let make = (
   ~statThreshold: Js.Dict.t<float>=Js.Dict.empty(),
   ~isHomePage=false,
 ) => {
+  open Identity
   let (updateKey, setUpdateKey) = React.useState(_ => false)
 
   let sortedData = React.useMemo1(() => {
@@ -85,21 +86,21 @@ let make = (
           "height": (isHomePage ? "80" : "50")->Some,
           "width": isHomePage ? None : Some("105"),
           "events": None,
-        }->LineChartUtils.objToJson,
+        }->genericObjectOrRecordToJson,
       ),
       title: {
         "text": "",
         "style": Js.Json.object_(Js.Dict.empty()),
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       credits: {
         "enabled": false,
       },
       legend: {
         "enabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       tooltip: {
         "enabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       plotOptions: Some(
         {
           "area": {
@@ -114,7 +115,7 @@ let make = (
               },
             },
             "lineWidth": 3,
-          }->LineChartUtils.objToJson,
+          }->genericObjectOrRecordToJson,
           "boxplot": {
             "visible": false,
           },
@@ -129,21 +130,24 @@ let make = (
               "legendItemClick": None,
               "mouseOver": Some(""),
             }),
-          }->LineChartUtils.objToJson,
-        }->LineChartUtils.objToJson,
+          }->genericObjectOrRecordToJson,
+        }->genericObjectOrRecordToJson,
       ),
       xAxis: {
         "type": "datetime",
         "zoomEnabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       yAxis: {
         "tickPositioner": None,
         "plotLines": None,
         "visible": false,
-        "title": {"text": "", "style": Js.Json.object_(Js.Dict.empty())}->LineChartUtils.objToJson,
+        "title": {
+          "text": "",
+          "style": Js.Json.object_(Js.Dict.empty()),
+        }->genericObjectOrRecordToJson,
         "labels": {"formatter": None, "enabled": false, "useHTML": false}->Some,
         "zoomEnabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       series: [
         {
           color: Some(strokeColor),
diff --git a/src/components/HighchartFunnelChart.res b/src/components/HighchartFunnelChart.res
index 8367ffff4..7f006d707 100644
--- a/src/components/HighchartFunnelChart.res
+++ b/src/components/HighchartFunnelChart.res
@@ -1,6 +1,5 @@
 open Highcharts
 open LogicUtils
-external objToJson: {..} => Js.Json.t = "%identity"
 type options = {x: int}
 type tooltipPoints = {
   name: string,
@@ -50,7 +49,7 @@ let make = (
             ->Belt.Array.get(0)
             ->Belt.Option.getWithDefault("")}${opacity}`,
           "color": `${chartColors->Belt.Array.get(0)->Belt.Option.getWithDefault("")}`,
-        }->LineChartUtils.objToJson
+        }->Identity.genericObjectOrRecordToJson
       }),
       "area",
     )
@@ -70,7 +69,7 @@ let make = (
         {
           "name": key,
           "y": item->Js.Nullable.return,
-        }->LineChartUtils.objToJson
+        }->Identity.genericObjectOrRecordToJson
       })
       let values = {
         "name": key,
@@ -78,7 +77,7 @@ let make = (
         "color": chartColors->Belt.Array.get(chartItemIndex),
         "pointPlacement": "on",
         "legendIndex": chartItemIndex,
-      }->LineChartUtils.objToJson
+      }->Identity.genericObjectOrRecordToJson
       if zonesFor1D->Js.Array2.length !== 0 {
         Js.Array2.concat(
           values->getDictFromJsonObject->Js.Dict.entries,
@@ -102,12 +101,12 @@ let make = (
           "backgroundColor": Js.Nullable.null,
           "events": None,
           "marginBottom": 50,
-        }->objToJson,
+        }->Identity.genericObjectOrRecordToJson,
       ),
       title: {
         "text": "",
         "style": Js.Json.object_(Js.Dict.empty()),
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       credits: {
         "enabled": false,
       },
@@ -129,13 +128,13 @@ let make = (
         "style": {
           "color": theme === Light ? "rgba(246, 248, 249, 1)" : "rgba(25, 26, 26, 1)",
         },
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       plotOptions: Some(
         {
           "area": {
             "inverted": true,
             "lineWidth": 2,
-          }->objToJson,
+          }->Identity.genericObjectOrRecordToJson,
           "boxplot": {
             "visible": false,
           },
@@ -153,12 +152,12 @@ let make = (
               "legendItemClick": None,
               "mouseOver": Some(""),
             }),
-          }->objToJson,
-        }->objToJson,
+          }->Identity.genericObjectOrRecordToJson,
+        }->Identity.genericObjectOrRecordToJson,
       ),
       legend: {
         "enabled": false,
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       xAxis: {
         "visible": true,
         "lineWidth": 0,
@@ -175,7 +174,7 @@ let make = (
           },
         },
         "categories": categories,
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       yAxis: {
         "title": "",
         "max": maxValueForTheDataSet,
@@ -195,8 +194,8 @@ let make = (
             "letterSpacing": "1px",
             "color": theme === Light ? "#4B5468" : "rgba(246, 248, 249, 0.25)",
           },
-        }->objToJson,
-      }->objToJson,
+        }->Identity.genericObjectOrRecordToJson,
+      }->Identity.genericObjectOrRecordToJson,
       series: chartData,
     }
   }, (dataSet, categories, formatter))
diff --git a/src/components/InputFields.res b/src/components/InputFields.res
index c6743ee56..d784b24dd 100644
--- a/src/components/InputFields.res
+++ b/src/components/InputFields.res
@@ -12,7 +12,6 @@ type comboCustomInputRecord = {
 }
 
 module DOBPicker = {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make = (
     ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -154,7 +153,6 @@ module DOBPicker = {
   }
 }
 module NumericArrayInput = {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make = (~input: ReactFinalForm.fieldRenderPropsInput, ~placeholder) => {
     let (localValue, setLocalValue) = React.useState(() => input.value)
@@ -173,7 +171,7 @@ module NumericArrayInput = {
             value->Js.Json.string
           }
           setLocalValue(_ => value)
-          input.onChange(value->jsonToForm)
+          input.onChange(value->Identity.jsonToFormReactEvent)
         },
       }
     }, (input, localValue, setLocalValue))
diff --git a/src/components/InputFields.resi b/src/components/InputFields.resi
index 9b4cc6ce2..548a553cf 100644
--- a/src/components/InputFields.resi
+++ b/src/components/InputFields.resi
@@ -5,7 +5,6 @@ type customInputFn = (
 type comboCustomInputFn = array<ReactFinalForm.fieldRenderProps> => React.element
 type comboCustomInputRecord = {fn: comboCustomInputFn, names: array<string>}
 module DOBPicker: {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make: (
     ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -16,7 +15,6 @@ module DOBPicker: {
   ) => React.element
 }
 module NumericArrayInput: {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make: (~input: ReactFinalForm.fieldRenderPropsInput, ~placeholder: string) => React.element
 }
diff --git a/src/components/RedirectSearchInput.res b/src/components/RedirectSearchInput.res
index b97607155..2cb6408c6 100644
--- a/src/components/RedirectSearchInput.res
+++ b/src/components/RedirectSearchInput.res
@@ -1,5 +1,3 @@
-external toReactForm: Js.Json.t => ReactEvent.Form.t = "%identity"
-
 module SearchInput = {
   @react.component
   let make = (
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 2454906fc..6e36e5bcd 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -434,7 +434,6 @@ let makeOptions = (options: array<string>): array<dropdownOption> => {
 }
 
 module BaseSelect = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make = (
     ~showSelectAll=true,
@@ -554,7 +553,8 @@ module BaseSelect = {
         }
         onSelect(data)
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -577,7 +577,8 @@ module BaseSelect = {
 
       onSelect(newValues)
       switch onBlur {
-      | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+      | Some(fn) =>
+        "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
       | None => ()
       }
     }
@@ -942,8 +943,6 @@ module BaseSelect = {
 }
 
 module BaseSelectButton = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~showDropDown=false,
@@ -985,7 +984,8 @@ module BaseSelectButton = {
         setAssignButtonState(_ => true)
 
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -1105,8 +1105,6 @@ module BaseSelectButton = {
   }
 }
 module BaseRadio = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~showDropDown=false,
@@ -1184,7 +1182,8 @@ module BaseRadio = {
         }
         setSearchString(_ => "")
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -1362,8 +1361,6 @@ module BaseRadio = {
 }
 
 module CustomUISearchOptionUI = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~showDropDown=false,
@@ -1415,7 +1412,8 @@ module CustomUISearchOptionUI = {
         }
         setSearchString(_ => "")
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -2115,8 +2113,6 @@ module BaseDropdown = {
 }
 
 module InfraSelectBox = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~options: array<dropdownOption>,
@@ -2186,8 +2182,6 @@ module InfraSelectBox = {
 }
 
 module ChipFilterSelectBox = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~options: array<dropdownOption>,
diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi
index c35d29b27..d51532307 100644
--- a/src/components/SelectBox.resi
+++ b/src/components/SelectBox.resi
@@ -76,7 +76,6 @@ type opt = {name_: string}
 let makeUpdatedOptions: (array<string>, array<string>) => array<dropdownOption>
 let makeOptions: array<string> => array<dropdownOption>
 module BaseSelect: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showSelectAll: bool=?,
@@ -133,7 +132,6 @@ module BaseSelect: {
   ) => React.element
 }
 module BaseSelectButton: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showDropDown: bool=?,
@@ -158,7 +156,6 @@ module BaseSelectButton: {
   ) => React.element
 }
 module BaseRadio: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showDropDown: bool=?,
@@ -197,7 +194,6 @@ module BaseRadio: {
   ) => React.element
 }
 module CustomUISearchOptionUI: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showDropDown: bool=?,
@@ -298,7 +294,6 @@ module BaseDropdown: {
   ) => React.element
 }
 module InfraSelectBox: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~options: array<dropdownOption>,
@@ -312,7 +307,6 @@ module InfraSelectBox: {
   ) => React.element
 }
 module ChipFilterSelectBox: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~options: array<dropdownOption>,
diff --git a/src/components/form/MultipleTextInput.res b/src/components/form/MultipleTextInput.res
index 82e0744b5..ae847738a 100644
--- a/src/components/form/MultipleTextInput.res
+++ b/src/components/form/MultipleTextInput.res
@@ -27,7 +27,7 @@ module Tag = {
     }
   }
 }
-external toForm: Js.Array2.t<string> => ReactEvent.Form.t = "%identity"
+
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -49,7 +49,7 @@ let make = (
   }, [input.value])
 
   let setTags = tags => {
-    tags->toForm->input.onChange
+    tags->Identity.arrayOfGenericTypeToFormReactEvent->input.onChange
   }
 
   let (text, setText) = React.useState(_ => "")
diff --git a/src/components/form/SelectBoxCard.res b/src/components/form/SelectBoxCard.res
index 6033b9a67..a91ae97d2 100644
--- a/src/components/form/SelectBoxCard.res
+++ b/src/components/form/SelectBoxCard.res
@@ -1,6 +1,5 @@
 module CustomViewSection = {
   external formEventToInt: ReactEvent.Form.t => int = "%identity"
-  external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
   external jsonArrToa: array<Js.Json.t> => array<'a> = "%identity"
 
   @react.component
@@ -60,7 +59,7 @@ module CustomViewSection = {
               ->ignore
             }
           }
-          onChange(finalArr->arrToFormEvent)
+          onChange(finalArr->Identity.arrayOfGenericTypeToFormReactEvent)
         },
       }
       input
diff --git a/src/entities/analytics/EulerAnalyticsLogUtils.res b/src/entities/analytics/EulerAnalyticsLogUtils.res
index 03a1740dc..8fe7d7585 100644
--- a/src/entities/analytics/EulerAnalyticsLogUtils.res
+++ b/src/entities/analytics/EulerAnalyticsLogUtils.res
@@ -2,7 +2,6 @@
 external location: {..} = "location"
 external toJson: exn => Js.Json.t = "%identity"
 external toExn: string => exn = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
 
 let useAddLogsAroundFetch = () => {
   let addLogsAroundFetch = (~setStatusDict=?, ~logTitle, fetchPromise) => {
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
index b23176438..008ac1180 100644
--- a/src/genericUtils/Identity.res
+++ b/src/genericUtils/Identity.res
@@ -10,3 +10,7 @@ external formReactEventToBool: ReactEvent.Form.t => bool = "%identity"
 external genericObjectOrRecordToJson: {..} => Js.Json.t = "%identity"
 external genericTypeToDictOfJson: 't => Js.Dict.t<Js.Json.t> = "%identity"
 external formReactEventToArrayOfString: ReactEvent.Form.t => array<string> = "%identity"
+external jsonToFormReactEvent: Js.Json.t => ReactEvent.Form.t = "%identity"
+external arrayOfGenericTypeToFormReactEvent: array<'a> => ReactEvent.Form.t = "%identity"
+external webAPIFocusEventToReactEventFocus: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t =
+  "%identity"
diff --git a/src/libraries/Highcharts.res b/src/libraries/Highcharts.res
index 6f0b19fb4..6da586eb3 100644
--- a/src/libraries/Highcharts.res
+++ b/src/libraries/Highcharts.res
@@ -50,8 +50,6 @@ external makeSomethingSeries: (~\"type": string, ~something: (float, int, string
 let x = makeAreaSeries(~\"type"="hello", ~something=false)
 let y = makeSomethingSeries(~\"type"="hello", ~something=(2., 1, "heloo"))
 
-external makeAttribute: {..} => Js.Json.t = "%identity"
-
 type gridLine = {attr: (. Js.Json.t) => unit}
 type pos
 type tick = {
diff --git a/src/libraries/SankeyHighcharts.res b/src/libraries/SankeyHighcharts.res
index a680a6bdc..e32490914 100644
--- a/src/libraries/SankeyHighcharts.res
+++ b/src/libraries/SankeyHighcharts.res
@@ -205,9 +205,9 @@ let init = (data: array<(string, string, int, int, int)>, nodes) => {
             "fontStyle": "normal",
             "fontWeight": 600,
           },
-        }->LineChartUtils.objToJson,
+        }->Identity.genericObjectOrRecordToJson,
         "connectEnds": false,
-      }->LineChartUtils.objToJson,
+      }->Identity.genericObjectOrRecordToJson,
     ],
     "chart": {
       "height": 698,
@@ -225,7 +225,7 @@ let init = (data: array<(string, string, int, int, int)>, nodes) => {
       "valueDecimals": 2,
       "backgroundColor": theme === Dark ? "white" : "black",
     },
-  }->LineChartUtils.objToJson
+  }->Identity.genericObjectOrRecordToJson
   options
 }
 
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index 2be798615..e4ee6760e 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -1,6 +1,3 @@
-external toString: option<Js.Json.t> => string = "%identity"
-external convertToStrDict: 't => Js.Json.t = "%identity"
-external sankeyTest: string => SankeyCharts.sankeyEntity = "%identity"
 @get external keyCode: 'a => int = "keyCode"
 type window
 @val external window: window = "window"
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 86954f45b..076b6c8cd 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -3,7 +3,6 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open LogicUtils
 
-external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external toWasm: Js.Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
 
 let defaultRule = {
@@ -240,7 +239,7 @@ module RuleBasedUI = {
     let (rules, setRules) = React.useState(_ => ruleInput.value->getArrayFromJson([]))
 
     React.useEffect1(() => {
-      ruleInput.onChange(rules->arrToFormEvent)
+      ruleInput.onChange(rules->Identity.arrayOfGenericTypeToFormReactEvent)
       None
     }, [rules])
 
@@ -250,13 +249,13 @@ module RuleBasedUI = {
         ? existingRules[index]->Belt.Option.getWithDefault(defaultRule->Identity.genericTypeToJson)
         : defaultRule->Identity.genericTypeToJson
       let newRules = existingRules->Js.Array2.concat([newRule])
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     let removeRule = index => {
       let existingRules = ruleInput.value->getArrayFromJson([])
       let newRules = existingRules->Array.filterWithIndex((_, i) => i !== index)
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     <div className="flex flex-col my-5">
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 61ef2af65..10d32844e 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -2,7 +2,6 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open FormRenderer
 
-external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 
 module LogicalOps = {
@@ -398,12 +397,21 @@ module MakeRuleField = {
     let onPlusClick = _ => {
       if plusBtnEnabled {
         let toAdd = Js.Dict.empty()
-        conditionsInput.onChange(Js.Array2.concat(fields, [toAdd->Js.Json.object_])->arrToFormEvent)
+        conditionsInput.onChange(
+          Js.Array2.concat(
+            fields,
+            [toAdd->Js.Json.object_],
+          )->Identity.arrayOfGenericTypeToFormReactEvent,
+        )
       }
     }
 
     let onCrossClick = index => {
-      conditionsInput.onChange(fields->Array.filterWithIndex((_, i) => index !== i)->arrToFormEvent)
+      conditionsInput.onChange(
+        fields
+        ->Array.filterWithIndex((_, i) => index !== i)
+        ->Identity.arrayOfGenericTypeToFormReactEvent,
+      )
     }
 
     <div className="flex flex-wrap items-center">
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
index a4712dd51..4c37a06ed 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -1,5 +1,4 @@
 let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ())
-external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 
 module SDKConfiguarationFields = {
   open MerchantAccountUtils
@@ -55,7 +54,8 @@ module SDKConfiguarationFields = {
               ev => {
                 let eventValueToInt =
                   ev->Identity.formReactEventToString->LogicUtils.getIntFromString(0)
-                let valInCents = (eventValueToInt * 100)->string_of_int->strToFormEvent
+                let valInCents =
+                  (eventValueToInt * 100)->string_of_int->Identity.stringToFormReactEvent
                 input.onChange(valInCents)
               }
             },
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index 96183969f..fc7e3f54f 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -1,6 +1,5 @@
 open RoutingTypes
 external toWasm: Js.Dict.t<Js.Json.t> => wasmModule = "%identity"
-external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 
 module ActiveRulePreview = {
   open LogicUtils
@@ -42,20 +41,20 @@ module Configure3DSRule = {
     let ruleInput = ReactFinalForm.useField("algorithm.rules").input
     let (rules, setRules) = React.useState(_ => ruleInput.value->LogicUtils.getArrayFromJson([]))
     React.useEffect1(() => {
-      ruleInput.onChange(rules->arrToFormEvent)
+      ruleInput.onChange(rules->Identity.arrayOfGenericTypeToFormReactEvent)
       None
     }, [rules])
     let addRule = (index, _copy) => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
       let newRule = existingRules[index]->Belt.Option.getWithDefault(Js.Json.null)
       let newRules = existingRules->Js.Array2.concat([newRule])
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     let removeRule = index => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
       let newRules = existingRules->Array.filterWithIndex((_, i) => i !== index)
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     <div>
diff --git a/src/screens/analyticsScreens/AnalyticsCommonComponents.res b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
index e4a35f44d..e0af3a513 100644
--- a/src/screens/analyticsScreens/AnalyticsCommonComponents.res
+++ b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
@@ -1,8 +1,3 @@
-external toString: option<Js.Json.t> => string = "%identity"
-external convertToStrDict: 't => Js.Json.t = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
-external toJson: exn => Js.Json.t = "%identity"
-external toRespJson: Fetch.Response.t => Js.Json.t = "%identity"
 @get external keyCode: 'a => int = "keyCode"
 
 type window
@@ -887,7 +882,7 @@ module FiltersComponent = {
               filteredTabKeys->Js.Array2.includes(dimension)
             })
             ->Js.Json.array,
-          }->LineChartUtils.objToJson,
+          }->Identity.genericObjectOrRecordToJson,
         )
       | None => None
       }
@@ -1090,7 +1085,7 @@ module DownloadCsv = {
     let actualDataOrig =
       tableData
       ->Belt.Array.keepMap(item => item->Js.Nullable.toOption)
-      ->Js.Array2.map(convertToStrDict)
+      ->Js.Array2.map(Identity.genericTypeToJson)
 
     let headerNames = visibleColumns->Belt.Array.keepMap(head => {
       let item = head->getHeading
@@ -1512,7 +1507,7 @@ module ErrorModalContent = {
         "credits": {
           "enabled": false,
         },
-      }->objToJson
+      }->Identity.genericObjectOrRecordToJson
     }, (chartData, categoryData, colName, theme))
     if showModalBarChart == "Table" {
       <div className="-mt-6">

From 6c3f3cf326c31b3bd2aa8931c169c86238d9ad88 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:20:09 +0530
Subject: [PATCH 08/11] refactor: dead code removal. (#92)

---
 src/components/MultiLineInputBox.res          |  140 -
 src/components/NProgressIndicator.res         |    6 -
 src/components/Navbar.res                     |  100 -
 src/components/NewCalendarList.res            |   12 -
 src/components/NewDateRangePicker.res         |    2 +-
 src/components/NewPagination.res              |    7 -
 src/components/NoDataFound.res                |   14 +-
 src/components/NoteUI.res                     |    8 -
 src/components/Pagination.res                 |    6 -
 src/components/PaginationRevamp.res           |  203 --
 src/components/PopOver.res                    |   50 -
 src/components/RedirectSearchInput.res        |   11 -
 src/components/RemoteFiltersUtils.res         |  168 +-
 src/components/RouterTabs.res                 |   68 -
 src/components/SDKFunnelChart.res             |  732 -----
 src/components/SankeyUtils.res                |   37 +-
 src/components/SectionAccordion.res           |  105 -
 src/components/ServerComponent.res            |   14 -
 src/components/SidebarStyleUtils.res          |   55 -
 src/components/StagedProgressBar.res          |   93 -
 src/components/StaticTable.res                |  211 --
 src/components/SynchronizedCharts.res         |  294 --
 src/components/ThemeSelector.res              |   82 -
 src/components/ThemeToggle.res                |   41 -
 src/components/TimeInput.res                  |   17 -
 src/components/TimeRangeInput.res             |  242 --
 src/components/TimeRangeInputUtils.res        |   33 -
 src/components/Timer.res                      |   27 -
 src/components/TopActions.res                 |  146 -
 src/components/UploadImage.res                |   50 -
 .../hyperswitch/HyperSwitchApp.res            |   11 +-
 src/genericUtils/AtomsStorage.res             |    8 -
 src/genericUtils/BreadCrumbNavigation.res     |    2 -
 src/genericUtils/UseEvent.res                 |   12 -
 src/hooks/AnalyticsHooks.res                  |  174 -
 src/hooks/AuthHooks.res                       |  227 +-
 src/hooks/DateRefreshHooks.res                |    2 +-
 src/hooks/ModalsState.res                     |   13 -
 src/hooks/NewThemeHooks.res                   |   42 -
 .../AnalyticsCommonComponents.res             | 2809 -----------------
 40 files changed, 31 insertions(+), 6243 deletions(-)
 delete mode 100644 src/components/MultiLineInputBox.res
 delete mode 100644 src/components/NProgressIndicator.res
 delete mode 100644 src/components/NoteUI.res
 delete mode 100644 src/components/PaginationRevamp.res
 delete mode 100644 src/components/PopOver.res
 delete mode 100644 src/components/RouterTabs.res
 delete mode 100644 src/components/SDKFunnelChart.res
 delete mode 100644 src/components/SectionAccordion.res
 delete mode 100644 src/components/ServerComponent.res
 delete mode 100644 src/components/SidebarStyleUtils.res
 delete mode 100644 src/components/StagedProgressBar.res
 delete mode 100644 src/components/StaticTable.res
 delete mode 100644 src/components/SynchronizedCharts.res
 delete mode 100644 src/components/ThemeSelector.res
 delete mode 100644 src/components/ThemeToggle.res
 delete mode 100644 src/components/TimeRangeInput.res
 delete mode 100644 src/components/TimeRangeInputUtils.res
 delete mode 100644 src/components/Timer.res
 delete mode 100644 src/components/TopActions.res
 delete mode 100644 src/components/UploadImage.res
 delete mode 100644 src/genericUtils/AtomsStorage.res
 delete mode 100644 src/hooks/NewThemeHooks.res
 delete mode 100644 src/screens/analyticsScreens/AnalyticsCommonComponents.res

diff --git a/src/components/MultiLineInputBox.res b/src/components/MultiLineInputBox.res
deleted file mode 100644
index 166cffabc..000000000
--- a/src/components/MultiLineInputBox.res
+++ /dev/null
@@ -1,140 +0,0 @@
-@react.component
-let make = (
-  ~input: ReactFinalForm.fieldRenderPropsInput,
-  ~placeholder,
-  ~isDisabled,
-  ~rows=?,
-  ~cols=?,
-  ~customClass="",
-  ~readOnly=?,
-  ~maxLength=?,
-  ~class="",
-  ~roundedBorder=false,
-  ~prefix=?,
-  ~handleRemove=_ => (),
-  ~setShow=_ => (),
-) => {
-  let (focus, setFocus) = React.useState(_ => false)
-  let (error, setError) = React.useState(_ => None)
-  let cursorClass = if isDisabled {
-    "cursor-not-allowed"
-  } else {
-    ""
-  }
-
-  let handleRemove = _ => {
-    input.onChange(""->Identity.stringToFormReactEvent)
-    setError(_ => None)
-    setFocus(_ => false)
-    handleRemove()
-  }
-
-  let className = `rounded-md border border-jp-gray-lightmode_steelgray border-opacity-75 font-normal p-2 text-jp-gray-900  text-opacity-75 placeholder-jp-gray-900 placeholder-opacity-25 hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-20 hover:border-jp-gray-900 hover:border-opacity-20 focus:text-opacity-100 focus:outline-none focus:border-blue-800 focus:border-opacity-100 dark:text-jp-gray-text_darktheme dark:text-opacity-75 dark:border-jp-gray-960 dark:hover:border-jp-gray-960 dark:hover:bg-jp-gray-970 dark:bg-jp-gray-darkgray_background dark:placeholder-jp-gray-text_darktheme dark:placeholder-opacity-25 dark:focus:text-opacity-100 dark:focus:border-blue-800 ${cursorClass} ${customClass}`
-  let value = switch input.value->Js.Json.classify {
-  | JSONString(str) => str
-  | JSONNumber(num) => num->Belt.Float.toString
-  | _ => ""
-  }
-
-  let onBlur = _ => {
-    let value = value->Js_string.trim
-
-    let lengthError =
-      maxLength->Belt.Option.flatMap(length =>
-        value->Js_string.length <= length
-          ? None
-          : Some(`Maximum length should be ${length->Belt.Int.toString}`)
-      )
-
-    let error = lengthError
-
-    if value === "" || error->Belt.Option.isNone {
-      setFocus(_ => false)
-      input.onChange(value->Identity.stringToFormReactEvent)
-      setShow(_ => false)
-    } else {
-      setError(_ => error)
-      setShow(_ => false)
-    }
-  }
-
-  let isError = error->Belt.Option.isSome
-
-  let borderColor = isError
-    ? "border rounded-md border-red-600 dark:border-red-600"
-    : focus
-    ? "border-opacity-100 border-blue-800"
-    : roundedBorder
-    ? "border-gray-300 dark:border-jp-gray-800"
-    : "border-opacity-75 border-gray-300 dark:border-jp-gray-800"
-
-  let textAreaComponent =
-    <textarea
-      className
-      name={input.name}
-      onBlur
-      onChange={input.onChange}
-      onFocus={_ => {
-        setError(_ => None)
-        setFocus(_ => true)
-        setShow(_ => true)
-      }}
-      value
-      disabled={isDisabled}
-      placeholder={placeholder}
-      autoFocus=focus
-      type_="text"
-      inputMode="text"
-      ?rows
-      ?cols
-      ?readOnly
-    />
-
-  if focus || value === "" {
-    <div className="flex flex-col gap-1 w-full">
-      <div className="w-full flex flex-row gap-2 items-center">
-        <div className={`flex flex-row w-full pb-1 ${borderColor}`}>
-          {switch prefix {
-          | Some(text) =>
-            <div
-              className={`bg-transparent px-2 h-10 flex flex-row items-center bg-gray-200 dark:bg-jp-gray-800 text-gray-700 dark:text-gray-100 rounded-l-md`}>
-              {React.string(text)}
-            </div>
-          | None => React.null
-          }}
-          textAreaComponent
-        </div>
-      </div>
-      {switch error {
-      | Some(errorMessage) =>
-        <div className="text-red-600 ml-1 text-base"> {errorMessage->React.string} </div>
-      | None => React.null
-      }}
-    </div>
-  } else {
-    let alignItems = roundedBorder ? "items-center" : "items-end"
-    <div className={`${class} flex flex-row gap-4 ml-1 ${alignItems}`}>
-      <div
-        className={`text-gray-500 dark:text-gray-300 text-md font-semibold text-ellipsis overflow-hidden`}>
-        {React.string(prefix->Belt.Option.getWithDefault("") ++ value)}
-      </div>
-      <div style={ReactDOMStyle.make(~minWidth="2rem", ())}>
-        <Icon
-          name="edit-pen"
-          size=22
-          onClick={_ => setFocus(_ => true)}
-          themeBased=true
-          className="cursor-pointer"
-        />
-      </div>
-      <div style={ReactDOMStyle.make(~minWidth="2rem", ())}>
-        <Icon
-          onClick=handleRemove
-          name="trash"
-          size=17
-          className="text-jp-gray-800 dark:text-jp-gray-400 opacity-50 mb-1 ml-2 cursor-pointer"
-        />
-      </div>
-    </div>
-  }
-}
diff --git a/src/components/NProgressIndicator.res b/src/components/NProgressIndicator.res
deleted file mode 100644
index 80be8e6cf..000000000
--- a/src/components/NProgressIndicator.res
+++ /dev/null
@@ -1,6 +0,0 @@
-@react.component
-let make = () => {
-  ApiProgressHooks.useReqProgressIndicator()
-
-  React.null
-}
diff --git a/src/components/Navbar.res b/src/components/Navbar.res
index 18e5b2392..cb69a1287 100644
--- a/src/components/Navbar.res
+++ b/src/components/Navbar.res
@@ -1,6 +1,4 @@
-type appType = UPI | EULER
 let bgClass = "bg-white hover:bg-jp-gray-100"
-@val @scope(("window", "location")) external pathName: string = "pathname"
 
 module MenuOption = {
   @react.component
@@ -19,104 +17,6 @@ module MenuOption = {
   }
 }
 
-module NameIcon = {
-  @react.component
-  let make = (~name, ~onClick=?) => {
-    let words =
-      name
-      ->Js.String2.toUpperCase
-      ->Js.String2.replaceByRe(%re("/_/g"), " ")
-      ->Js.String2.split(" ")
-      ->Js.Array2.filter(x => x !== "")
-    let firstLetters =
-      words->Js.Array2.map(word => Js.String2.charAt(word, 0))->Js.Array2.joinWith("")
-    <div ?onClick className="flex items-center justify-center h-8 w-8 rounded-full bg-gray-200">
-      {firstLetters->Js.String2.slice(~from=0, ~to_=2)->React.string}
-    </div>
-  }
-}
-
-module FeedbackModal = {
-  @react.component
-  let make = (~setShowModal, ~showModal) => {
-    let makeFieldInfo = FormRenderer.makeFieldInfo
-    let field = makeFieldInfo(
-      ~label="",
-      ~name="feedbacks",
-      ~placeholder="Please provide your feedback/suggestions here ...",
-      ~customInput=InputFields.multiLineTextInput(
-        ~isDisabled=false,
-        ~rows=Some(6),
-        ~cols=Some(4),
-        (),
-      ),
-      (),
-    )
-
-    let selectBetween = makeFieldInfo(
-      ~name="category",
-      ~label="",
-      ~customInput=InputFields.radioInput(
-        ~options=["Suggestion", "Bugs", "Other"]->SelectBox.makeOptions,
-        ~buttonText="options",
-        ~isHorizontal=true,
-        (),
-      ),
-      (),
-    )
-
-    let validate = values => {
-      let errors = Js.Dict.empty()
-      let values = values->LogicUtils.getDictFromJsonObject
-      if values->LogicUtils.getString("feedbacks", "") === "" {
-        errors->Js.Dict.set("feedbacks", "Please give the feedback"->Js.Json.string)
-      }
-      if values->LogicUtils.getString("category", "") === "" {
-        errors->Js.Dict.set("category", "Please select the category"->Js.Json.string)
-      }
-      if values->LogicUtils.getInt("rating", -1) === -1 {
-        errors->Js.Dict.set("rating", "Please rate"->Js.Json.string)
-      }
-      errors->Js.Json.object_
-    }
-
-    let onSubmit = (_, _) => {
-      setShowModal(_ => false)
-      Js.Nullable.null->Js.Promise.resolve
-    }
-
-    <Modal
-      modalHeading="Send Us Your Feedback"
-      modalHeadingDescription="Tell us what you liked most and if you have a suggestion or found some bug, let us know in the field below"
-      headingClass="!bg-transparent"
-      showModal
-      setShowModal
-      borderBottom=true
-      closeOnOutsideClick=true
-      modalClass="md:w-2/5 mx-auto my-8 p-4 pb-8">
-      <ReactFinalForm.Form
-        subscription=ReactFinalForm.subscribeToValues
-        onSubmit
-        validate
-        render={({handleSubmit}) => {
-          <form onSubmit={handleSubmit}>
-            <div className="flex flex-col justify-center mb-2">
-              <RatingOptions
-                icons=["angry", "frown", "smile", "smile-beam", "grin-hearts"] size=45
-              />
-              <FormRenderer.FieldRenderer field />
-              <FormRenderer.FieldRenderer field=selectBetween />
-              <div className="flex justify-end p-1 mt-4">
-                <FormRenderer.SubmitButton text="Send Feedback" />
-              </div>
-            </div>
-          </form>
-        }}
-      />
-    </Modal>
-  }
-}
-
 @react.component
 let make = (
   ~headerActions=?,
diff --git a/src/components/NewCalendarList.res b/src/components/NewCalendarList.res
index 5f5d3a277..0098d19d2 100644
--- a/src/components/NewCalendarList.res
+++ b/src/components/NewCalendarList.res
@@ -2,18 +2,6 @@ open DateTimeUtils
 external ffInputToSelectInput: ReactFinalForm.fieldRenderPropsInput => ReactFinalForm.fieldRenderPropsCustomInput<
   array<string>,
 > = "%identity"
-let getStrArray = jsonArr => {
-  jsonArr->Js.Array2.reduce((acc, jsonElement) => {
-    switch jsonElement->Js.Json.decodeString {
-    | Some(str) => {
-        let _ = Js.Array2.push(acc, str)
-      }
-
-    | None => ()
-    }
-    acc
-  }, [])
-}
 
 open NewCalendar
 @react.component
diff --git a/src/components/NewDateRangePicker.res b/src/components/NewDateRangePicker.res
index 7a94ab608..49353c710 100644
--- a/src/components/NewDateRangePicker.res
+++ b/src/components/NewDateRangePicker.res
@@ -16,7 +16,7 @@ let useErroryValueResetter = (
   React.useEffect1(() => {
     let isErroryTimeValue = value => {
       try {
-        let _checkEnd = value->isoStringToCustomTimeZone
+        let _ = value->isoStringToCustomTimeZone
         false
       } catch {
       | _error => true
diff --git a/src/components/NewPagination.res b/src/components/NewPagination.res
index 38034528d..9141bddea 100644
--- a/src/components/NewPagination.res
+++ b/src/components/NewPagination.res
@@ -1,10 +1,3 @@
-module PaginationButton = {
-  @react.component
-  let make = (~onClick, ~text) => {
-    <button onClick> {text->React.string} </button>
-  }
-}
-
 @react.component
 let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4) => {
   let pageNumbers = []
diff --git a/src/components/NoDataFound.res b/src/components/NoDataFound.res
index a2f17c2aa..e9e1ce65b 100644
--- a/src/components/NoDataFound.res
+++ b/src/components/NoDataFound.res
@@ -1,4 +1,4 @@
-type renderType = InfoBox | Painting | NotFound | Locked | LoadError | UPINoDataFoundPage
+type renderType = InfoBox | Painting | NotFound | Locked | LoadError
 
 @react.component
 let make = (
@@ -19,7 +19,6 @@ let make = (
     | Locked => "mt-32 p-16"
     | LoadError => "mt-32 p-16"
     | InfoBox => ""
-    | UPINoDataFoundPage => "mt-32 p-16"
     }
     isMobileView ? "" : marginPaddingClass
   }
@@ -99,17 +98,6 @@ let make = (
               }}
             </div>
           </div>
-        | UPINoDataFoundPage =>
-          <div className={`${containerClass}`}>
-            <img className="w-1/2" src={`icons/upilogo2.svg`} />
-            <div className="p-2 mt-8 text-black text-2xl text-bold"> {React.string(message)} </div>
-            <div>
-              {switch children {
-              | Some(child) => child
-              | None => React.null
-              }}
-            </div>
-          </div>
         }}
       </div>
     </div>}
diff --git a/src/components/NoteUI.res b/src/components/NoteUI.res
deleted file mode 100644
index 6e682fe25..000000000
--- a/src/components/NoteUI.res
+++ /dev/null
@@ -1,8 +0,0 @@
-@react.component
-let make = (~note: string, ~isInfo=false, ~textSize="text-fs-12") => {
-  <div
-    className={`ml-6 ${textSize} mb-5 block p-2 not-italic font-normal text-black dark:text-white bg-blue-info dark:bg-blue-info dark:bg-opacity-20`}
-    style={ReactDOMStyle.make(~borderLeft="6px solid #2196F3", ~maxWidth="max-content", ())}>
-    <div className="flex flex-row gap-2"> {note->React.string} </div>
-  </div>
-}
diff --git a/src/components/Pagination.res b/src/components/Pagination.res
index d6976d316..db14cf252 100644
--- a/src/components/Pagination.res
+++ b/src/components/Pagination.res
@@ -1,9 +1,3 @@
-module PaginationButton = {
-  @react.component
-  let make = (~onClick, ~text) => {
-    <button onClick> {text->React.string} </button>
-  }
-}
 external formEventToInt: ReactEvent.Form.t => int = "%identity"
 
 @react.component
diff --git a/src/components/PaginationRevamp.res b/src/components/PaginationRevamp.res
deleted file mode 100644
index cf192eff7..000000000
--- a/src/components/PaginationRevamp.res
+++ /dev/null
@@ -1,203 +0,0 @@
-external formEventToInt: ReactEvent.Form.t => int = "%identity"
-
-@react.component
-let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4) => {
-  let pageNumbers = []
-  let isMobileView = MatchMedia.useMobileChecker()
-  let (dropDownVal, setDropDownVal) = React.useState(_ => "1-10")
-  let total = Js.Math.ceil(Belt.Int.toFloat(totalResults) /. Belt.Int.toFloat(resultsPerPage))
-
-  for x in 1 to total {
-    Js.Array2.push(pageNumbers, x)->ignore
-  }
-
-  let pageToLeft =
-    btnCount - (total - currentPage) < btnCount / 2
-      ? btnCount / 2
-      : btnCount - (total - currentPage)
-
-  let arr = []
-  for x in 1 to totalResults {
-    arr->Js.Array2.push(x)->ignore
-  }
-  let rangeNum =
-    arr
-    ->Js.Array2.map(ele => {
-      mod(ele, 10) === 0 ? Js.Array2.indexOf(arr, ele + 1) : 0
-    })
-    ->Js.Array2.filter(i => i !== 0)
-
-  let ranges = []
-
-  rangeNum->Js.Array2.forEach(ele => {
-    ranges->Js.Array2.push((ele - 9)->Belt.Int.toString ++ "-" ++ ele->Belt.Int.toString)->ignore
-  })
-  let lastNum =
-    rangeNum->Belt.Array.get(Js.Array2.length(rangeNum) - 1)->Belt.Option.getWithDefault(0)
-  if totalResults > lastNum {
-    let start = lastNum + (totalResults - lastNum)
-    start === totalResults
-      ? ranges->Js.Array2.push(start->Belt.Int.toString)->ignore
-      : ranges
-        ->Js.Array2.push(start->Belt.Int.toString ++ "-" ++ totalResults->Belt.Int.toString)
-        ->ignore
-  }
-
-  let startIndex = Js.Math.max_int(1, currentPage - pageToLeft)
-  let endIndex = Js.Math.min_int(startIndex + btnCount, total)
-
-  let nonEmpty = s => s >= startIndex && s <= endIndex
-
-  let buttonType: Button.buttonType = Secondary
-  let leftArrowCursorClass = currentPage > 1 ? "cursor-pointer" : "cursor-not-allowed opacity-50"
-  let leftArrowOnClick =
-    currentPage > 1 ? _evt => paginate(Js.Math.max_int(1, currentPage - 1)) : _ => ()
-
-  let rightArrowCursorClass =
-    currentPage < Belt.Array.length(pageNumbers)
-      ? "cursor-pointer"
-      : "cursor-not-allowed opacity-50"
-  let rightArrowOnClick =
-    currentPage < Belt.Array.length(pageNumbers) ? _evt => paginate(currentPage + 1) : _ => ()
-
-  let selectedClass = "text-fs-12 font-medium text-jp-2-light-primary-600 px-2.5 py-1 bg-jp-2-light-primary-100 rounded-lg"
-  let nonSelectedClass = "text-fs-12 font-medium text-jp-2-light-gray-1200 hover:text-jp-2-light-primary-600 px-2.5 py-1 rounded-lg cursor-pointer"
-  let pageOnclick = (isSelected, number) => {
-    isSelected ? _ => () : _evt => paginate(number)
-  }
-
-  let pageInput1: ReactFinalForm.fieldRenderPropsInput = {
-    name: "pageSelector-1",
-    onBlur: _ev => (),
-    onChange: ev => {
-      ev->formEventToInt->paginate
-    },
-    onFocus: _ev => (),
-    value: currentPage->Belt.Int.toFloat->Js.Json.number,
-    checked: true,
-  }
-  let pageInput2: ReactFinalForm.fieldRenderPropsInput = {
-    name: "pageSelector-2",
-    onBlur: _ev => (),
-    onChange: ev => {
-      ev->formEventToInt->paginate
-    },
-    onFocus: _ev => (),
-    value: currentPage->Belt.Int.toFloat->Js.Json.number,
-    checked: true,
-  }
-
-  if !isMobileView {
-    <div className="flex gap-3 items-center px-6">
-      <Icon
-        name="leftArrow"
-        size=20
-        className={`p-1.5 ${leftArrowCursorClass}`}
-        onClick=leftArrowOnClick
-      />
-      {if total > 5 {
-        let pageN = []
-        if currentPage <= 3 {
-          Js.Array2.pushMany(pageN, [1, 2, 3, 4, -2, total])->ignore
-        } else if currentPage >= total - 2 {
-          Js.Array2.pushMany(pageN, [1, -1, total - 3, total - 2, total - 1, total])->ignore
-        } else {
-          Js.Array2.pushMany(
-            pageN,
-            [1, -1, currentPage - 1, currentPage, currentPage + 1, -2, total],
-          )->ignore
-        }
-
-        pageN
-        ->Js.Array2.mapi((number, idx) => {
-          let isSelected = number === currentPage
-
-          if number < 0 {
-            let input = number === -1 ? pageInput1 : pageInput2
-            let prevValue = pageN->LogicUtils.getValueFromArray(idx - 1, 0)
-            let nextValue = pageN->LogicUtils.getValueFromArray(idx + 1, 0)
-            let dropDownOptions =
-              Belt.Array.range(prevValue + 1, nextValue - 1)
-              ->Js.Array2.map(int => int->Belt.Int.toString)
-              ->SelectBox.makeOptions
-            <div key={idx->string_of_int}>
-              <SelectBox.BaseDropdown
-                allowMultiSelect=false
-                hideMultiSelectButtons=true
-                buttonText="..."
-                input
-                baseComponent={<div className="font-semibold text-jp-2-gray-1200 cursor-pointer">
-                  {"..."->React.string}
-                </div>}
-                options=dropDownOptions
-                searchable=false
-                showClearAll=false
-                showSelectAll=false
-              />
-            </div>
-          } else {
-            <div
-              key={idx->string_of_int}
-              className={isSelected ? selectedClass : nonSelectedClass}
-              onClick={pageOnclick(isSelected, number)}>
-              {React.string(number->string_of_int)}
-            </div>
-          }
-        })
-        ->React.array
-      } else {
-        pageNumbers
-        ->Js.Array2.filter(nonEmpty)
-        ->Js.Array2.mapi((number, idx) => {
-          let isSelected = number === currentPage
-
-          <div
-            key={idx->string_of_int}
-            className={isSelected ? selectedClass : nonSelectedClass}
-            onClick={pageOnclick(isSelected, number)}>
-            {React.string(number->string_of_int)}
-          </div>
-        })
-        ->React.array
-      }}
-      <Icon
-        name="leftArrow"
-        size=20
-        className={`p-1.5 rotate-180 ${rightArrowCursorClass}`}
-        onClick=rightArrowOnClick
-      />
-    </div>
-  } else {
-    let dropDownOptions = ranges->Js.Array2.mapi((item, idx): SelectBox.dropdownOption => {
-      {
-        label: item,
-        value: (idx + 1)->Belt.Int.toString,
-      }
-    })
-
-    let selectInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "dummy-name",
-      onBlur: _ev => (),
-      onChange: _evt => {
-        let val =
-          ranges->Belt.Array.get(_evt->formEventToInt - 1)->Belt.Option.getWithDefault("1-10")
-        setDropDownVal(_ => val)
-        paginate(_evt->formEventToInt)
-      },
-      onFocus: _ev => (),
-      value: ""->Js.Json.string,
-      checked: true,
-    }
-
-    <SelectBox.BaseDropdown
-      options=dropDownOptions
-      searchable=false
-      input=selectInput
-      hideMultiSelectButtons=true
-      deselectDisable=true
-      buttonType
-      allowMultiSelect=false
-      buttonText=dropDownVal
-    />
-  }
-}
diff --git a/src/components/PopOver.res b/src/components/PopOver.res
deleted file mode 100644
index c9e54d26b..000000000
--- a/src/components/PopOver.res
+++ /dev/null
@@ -1,50 +0,0 @@
-type popOverSize = Small | Medium
-
-@react.component
-let make = (
-  ~title="",
-  ~description="",
-  ~descriptionElement=?,
-  ~popOverSize=Small,
-  ~dismissable=false,
-  ~popOverPosition: option<ToolTip.toolTipPosition>=?,
-  ~popOverFor=?,
-  ~popOverArrowSize=5,
-) => {
-  let paddingClass = switch popOverSize {
-  | Small => "p-4"
-  | Medium => "px-4 py-5"
-  }
-  let gapClass = switch popOverSize {
-  | Small => "gap-1.5"
-  | Medium => "gap-2"
-  }
-
-  let titleClass = switch popOverSize {
-  | Small => "text-fs-16 font-medium text-jp-2-dark-gray-2000"
-  | Medium => "text-fs-20 font-medium text-jp-2-dark-gray-2000"
-  }
-  let descriptionClass = switch popOverSize {
-  | Small => "text-fs-12 font-normal text-jp-2-dark-gray-2000"
-  | Medium => "text-fs-14 font-normal text-jp-2-dark-gray-2000"
-  }
-  let descriptionComponent = switch descriptionElement {
-  | Some(element) => element
-  | None =>
-    <div className={`flex flex-col w-80 ${gapClass} ${paddingClass}`}>
-      <span className=titleClass> {React.string(title)} </span>
-      <span className=descriptionClass> {React.string(description)} </span>
-    </div>
-  }
-
-  <ToolTip
-    descriptionComponent
-    toolTipPosition=?popOverPosition
-    tooltipWidthClass="w-fit"
-    hoverOnToolTip=true
-    dismissable
-    descriptionComponentClass="flex flex-row-reverse items-start"
-    toolTipFor=?popOverFor
-    tooltipArrowSize=popOverArrowSize
-  />
-}
diff --git a/src/components/RedirectSearchInput.res b/src/components/RedirectSearchInput.res
index 2cb6408c6..3eec1fe18 100644
--- a/src/components/RedirectSearchInput.res
+++ b/src/components/RedirectSearchInput.res
@@ -47,14 +47,3 @@ module SearchInput = {
     />
   }
 }
-
-let redirectSearchInput = (
-  ~input: ReactFinalForm.fieldRenderPropsInput,
-  ~placeholder,
-  ~redirectUrl,
-  ~widthMatchwithPlaceholderLength=None,
-  ~customStyle="",
-  (),
-) => {
-  <SearchInput input placeholder redirectUrl widthMatchwithPlaceholderLength customStyle />
-}
diff --git a/src/components/RemoteFiltersUtils.res b/src/components/RemoteFiltersUtils.res
index 85035816f..d95549c91 100644
--- a/src/components/RemoteFiltersUtils.res
+++ b/src/components/RemoteFiltersUtils.res
@@ -1,69 +1,15 @@
 type urlKEyType = Boolean | Float | Int
 
-let getQueryParamsDict = searchParams => {
-  let dict = Js.Dict.empty()
-
-  if searchParams->Js.String2.includes("=") {
-    searchParams
-    ->Js.String2.split("&")
-    ->Js.Array2.forEach(paramStr => {
-      let keyValArr = Js.String2.split(paramStr, "=")
-      let key = keyValArr[0]->Belt.Option.getWithDefault("")
-      let value = if keyValArr->Js.Array2.length > 0 {
-        keyValArr[1]->Belt.Option.getWithDefault("")
-      } else {
-        ""
-      }
-      Js.Dict.set(dict, key, value)
-    })
-  }
-  dict
-}
-
-let getQueryFinalUrl = (uri, searchParams, offset, limit) => {
-  let splitUri = Js.String2.split(uri, "?")
-  if searchParams === "" {
-    uri
-  } else {
-    let queryParamsDict = getQueryParamsDict(searchParams)
-    queryParamsDict->Js.Dict.set("offset", offset->Belt.Int.toString)
-    queryParamsDict->Js.Dict.set("limit", limit->Belt.Int.toString)
-
-    let queryParams =
-      queryParamsDict
-      ->Js.Dict.entries
-      ->Js.Array2.map(entry => {
-        let (key, value) = entry
-        let modifiedValue = switch key {
-        | "offset" => {
-            let floatValue = switch value->Belt.Float.fromString {
-            | Some(val) => val
-            | _ => 0.
-            }
-            let pageNo = (floatValue /. limit->Belt.Float.fromInt)->Js.Math.floor_int
-            (pageNo * limit)->string_of_int
-          }
-        | _ => value
-        }
-        `${key}=${modifiedValue}`
-      })
-      ->Js.Array2.joinWith("&")
-      ->LogicUtils.stringReplaceAll("%20", " ")
-
-    `${splitUri[0]->Belt.Option.getWithDefault("")}?${queryParams}`
-  }
-}
-
 let getFinalDict = (
   ~filterJson,
   ~filtersFromUrl,
-  ~options: array<EntityType.optionType<'t>>=[],
-  ~isEulerOrderEntity=false,
-  ~dropdownSearchKeyValueNames=[],
-  ~searchkeysDict=Js.Dict.empty(),
-  ~isSearchKeyArray=false,
+  ~options: array<EntityType.optionType<'t>>,
+  ~isEulerOrderEntity,
+  ~dropdownSearchKeyValueNames,
+  ~searchkeysDict,
+  ~isSearchKeyArray,
   ~defaultKeysAllowed=["offset", "order", "orderType", "merchantId"],
-  ~urlKeyTypeDict=Js.Dict.empty(),
+  ~urlKeyTypeDict,
   (),
 ) => {
   let unflattenDict = filtersFromUrl->JsonFlattenUtils.unflattenObject
@@ -211,67 +157,6 @@ let getFinalDict = (
   }
 }
 
-let updateUrlWith = (
-  url: RescriptReactRouter.url,
-  dict: Js.Dict.t<string>,
-  tableName: option<Js.String.t>,
-) => {
-  let path = url.path->Belt.List.toArray->Js.Array2.joinWith("/")
-  let tableName = tableName->Belt.Option.getWithDefault("")
-  let keys = Js.Dict.keys(dict)
-  let values = Js.Dict.values(dict)
-  let urlKeys =
-    url.search
-    ->Js.String2.split("&")
-    ->Js.Array2.map(item => {Js.String.split("=", item)[0]->Belt.Option.getWithDefault("")})
-
-  let queryParamsString = keys->Js.Array2.reducei((acc, key, idx) => {
-    let tableKey = Js.String.length(tableName) > 0 ? Js.String.concat(`-${key}`, tableName) : key
-    let keyIndex = tableKey->Js.Array.indexOf(urlKeys)
-    if keyIndex !== -1 {
-      let oldValue =
-        Js.String.split(
-          "=",
-          Js.String.split("&", acc)[keyIndex]->Belt.Option.getWithDefault(""),
-        )[1]->Belt.Option.getWithDefault("")
-      let acc =
-        acc->Js.String2.replace(
-          `${tableKey}=${oldValue}`,
-          `${tableKey}=${values[idx]->Belt.Option.getWithDefault("")}`,
-        )
-      acc
-    } else {
-      let acc = Js.String.length(acc) > 0 ? Js.String.concat(`&`, acc) : acc
-      let acc = Js.String.concat(`${tableKey}=${values[idx]->Belt.Option.getWithDefault("")}`, acc)
-      Js.Array.push(tableKey, urlKeys)->ignore
-      acc
-    }
-  }, url.search)
-
-  RescriptReactRouter.push(`/${path}?${queryParamsString}`)
-}
-
-let getOffsetFromUrl = (searchParams, defaultOffset, ~tableName=?, ()) => {
-  let tableKey = switch tableName {
-  | Some(tn) => tn->Js.String.length > 0 ? Js.String.concat(`-offset`, tn) : "offset"
-  | None => "offset"
-  }
-
-  if searchParams->Js.String.length > 0 {
-    let optionalOffsetValue =
-      searchParams
-      ->getQueryParamsDict
-      ->Js.Dict.get(tableKey)
-      ->Belt.Option.flatMap(Belt.Int.fromString)
-    switch optionalOffsetValue {
-    | Some(intNum) => intNum
-    | None => defaultOffset
-    }
-  } else {
-    defaultOffset
-  }
-}
-
 let getStrFromJson = (key, val) => {
   switch val->Js.Json.classify {
   | JSONString(str) => str
@@ -281,28 +166,6 @@ let getStrFromJson = (key, val) => {
   }
 }
 
-let getTableNamesFromURL = () => {
-  let url = RescriptReactRouter.useUrl().search
-  if url->Js.String2.length > 0 {
-    url
-    ->Js.String2.split("&")
-    ->Js.Array2.map(key => {
-      key
-      ->Js.String2.split("=")
-      ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault("")
-      ->Js.String2.split("-")
-      ->Js.Array2.slice(~start=0, ~end_=-1)
-      ->Js.Array2.map(word => {
-        word->Js.String2.charAt(0)->Js.String2.toUpperCase ++ word->Js.String2.sliceToEnd(~from=1)
-      })
-      ->Js.Array2.joinWith(" ")
-    })
-  } else {
-    []
-  }
-}
-
 let getInitialValuesFromUrl = (
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
@@ -367,8 +230,8 @@ let getLocalFiltersData = (
   ~resArr: Js.Array2.t<Js.Nullable.t<'t>>,
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
-  ~dateRangeFilterDict: Js.Dict.t<Js.Json.t>=Js.Dict.empty(),
-  ~options: array<EntityType.optionType<'t>>=[],
+  ~dateRangeFilterDict: Js.Dict.t<Js.Json.t>,
+  ~options: array<EntityType.optionType<'t>>,
   (),
 ) => {
   let res = ref(resArr)
@@ -567,18 +430,3 @@ let applyFilters = (
     }
   }
 }
-
-let updateUrlWithSort = (url: RescriptReactRouter.url, sortKey: string, sortValue: string) => {
-  let path = url.path->Belt.List.toArray->Js.Array2.joinWith("/")
-
-  let filters =
-    url.search
-    ->Js.String2.split("&")
-    ->Js.Array2.filter(item => !(item->Js.String2.includes("sortBy_")) && item != "")
-
-  filters->Js.Array2.push(`${sortKey}=${sortValue}`)->ignore
-
-  let queryParamsString = filters->Js.Array2.joinWith("&")
-
-  RescriptReactRouter.push(`/${path}?${queryParamsString}`)
-}
diff --git a/src/components/RouterTabs.res b/src/components/RouterTabs.res
deleted file mode 100644
index ec818ccc6..000000000
--- a/src/components/RouterTabs.res
+++ /dev/null
@@ -1,68 +0,0 @@
-type routeTab = {
-  title: string,
-  route: string,
-  access: AuthTypes.authorization,
-}
-
-let getDefaultIndex = routes => {
-  let currPath = RescriptReactRouter.useUrl().path
-  let urlArr = []
-  currPath->Js.List.iter((. str) => urlArr->Js.Array2.push(str)->ignore, _)
-  let urlStr = `/${urlArr->Js.Array2.joinWith("/")}`
-
-  let (_, index) = routes->Js.Array2.reducei((acc, {route}, i) => {
-    let route = route->Js.String2.split("?")->Belt.Array.get(0)->Belt.Option.getWithDefault(route)
-    let (oldDiff, _) = acc
-    let diff = urlStr->Js.String2.length - route->Js.String2.length
-
-    urlStr->Js.String2.includes(route) && diff < oldDiff ? (diff, i) : acc
-  }, (urlStr->Js.String2.length, 0))
-
-  index
-}
-
-@react.component
-let make = (
-  ~routeTabs as allRouteTabs: array<routeTab>,
-  ~isScrollIntoViewRequired=false,
-  ~lightThemeColor: string="blue-800",
-  ~showBorder: bool=true,
-  ~backgroundStyle: string="bg-gradient-to-b",
-  ~tabContainerClass="",
-  ~bottomMargin=?,
-) => {
-  let urlPrefix = LogicUtils.useUrlPrefix()
-  let routeTabs = allRouteTabs->Js.Array2.filter(routeTab => {
-    routeTab.access !== NoAccess
-  })
-
-  let defaultIndex = getDefaultIndex(routeTabs)
-
-  let (initialIndex, setInitialIndex) = React.useState(() => defaultIndex)
-
-  React.useEffect1(() => {
-    setInitialIndex(_ => defaultIndex)
-    None
-  }, [defaultIndex])
-
-  let tabs = routeTabs->Js.Array2.map((routeTab): Tabs.tab => {
-    {title: routeTab.title, renderContent: () => React.null}
-  })
-
-  <Tabs
-    tabs
-    isScrollIntoViewRequired
-    lightThemeColor
-    showBorder
-    backgroundStyle
-    ?bottomMargin
-    initialIndex={initialIndex >= 0 ? initialIndex : 0}
-    onTitleClick={i => {
-      switch routeTabs->Belt.Array.get(i) {
-      | Some(routeTab) => RescriptReactRouter.push(`${urlPrefix}${routeTab.route}`)
-      | None => ()
-      }
-    }}
-    tabContainerClass
-  />
-}
diff --git a/src/components/SDKFunnelChart.res b/src/components/SDKFunnelChart.res
deleted file mode 100644
index e8900edec..000000000
--- a/src/components/SDKFunnelChart.res
+++ /dev/null
@@ -1,732 +0,0 @@
-open HighchartFunnelChart
-open LogicUtils
-type colType =
-  | Initiate
-  | Render
-  | MethodSelected
-  | ProceedToPayClicked
-  | TxnStatus
-  | QuickPayRender
-  | QuickPayOpt
-  | QuickPayChange
-  | QuickPayOverLayClick
-  | QuickPayOverLayDrop
-  | FunnelSteps
-let defaultColumns = [Initiate, Render, MethodSelected, ProceedToPayClicked, TxnStatus]
-
-let getHeading = colType => {
-  switch colType {
-  | Initiate =>
-    Table.makeHeaderInfo(
-      ~key="initiate",
-      ~title="Payment Page Requested",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | Render =>
-    Table.makeHeaderInfo(
-      ~key="render",
-      ~title="Payment Page Rendered",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | MethodSelected =>
-    Table.makeHeaderInfo(
-      ~key="methodSelecyed",
-      ~title="Payment Option Selected",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | ProceedToPayClicked =>
-    Table.makeHeaderInfo(
-      ~key="clicked",
-      ~title="Proceed to Pay Clicked",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | TxnStatus =>
-    Table.makeHeaderInfo(
-      ~key="txnStatus",
-      ~title="Order Success",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-
-  | FunnelSteps =>
-    Table.makeHeaderInfo(
-      ~key="funnelSteps",
-      ~title="Funnel Steps",
-      ~showSort=false,
-      ~headerElement=<div className="font-medium flex flex-row gap-4 text-sm">
-        {React.string("Funnel Steps")}
-        <Icon name="arrow-right" size=12 />
-      </div>,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayRender =>
-    Table.makeHeaderInfo(
-      ~key="quickPayRender",
-      ~title="Quickpay Rendered",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayOpt =>
-    Table.makeHeaderInfo(
-      ~key="quickPayOpt",
-      ~title="Quickpay Opted",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayChange =>
-    Table.makeHeaderInfo(
-      ~key="quickPayChange",
-      ~title="Quickpay Changed",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayOverLayClick =>
-    Table.makeHeaderInfo(
-      ~key="quickpayoverlayclick",
-      ~title="Quickpay Overlay Clicked",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayOverLayDrop =>
-    Table.makeHeaderInfo(
-      ~key="qpay",
-      ~title="Quickpay overlay Dropped",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  }
-}
-
-module ShowDate = {
-  let parseDateRange = (dateRangeStr: string): string => {
-    /* Split the date range string into start and end date parts */
-    let dateParts = Js.String.split(" to ", dateRangeStr)
-
-    switch dateParts {
-    | [startStr, endStr] =>
-      /* Convert date strings to Date objects */
-      let startDate = Js.Date.fromString(startStr)
-      let endDate = Js.Date.fromString(endStr)
-
-      /* Format dates into a human-readable format */
-
-      let startDateStr = Js.Date.toDateString(startDate)
-      let endDateStr = Js.Date.toDateString(endDate)
-
-      /* Create the human-readable date range */
-      let dateRangeReadable = startDateStr ++ " to " ++ endDateStr
-      dateRangeReadable
-    | _ => /* Handle invalid input */
-      "Invalid date range format"
-    }
-  }
-  @react.component
-  let make = (~data, ~selectedRow, ~setSelectedRow) => {
-    let value = data->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-    let onClick = _ => setSelectedRow(_ => value)
-    <>
-      <div className="flex cursor-pointer" onClick>
-        <RadioIcon isSelected={value == selectedRow} />
-        <div className={`pl-2 ${value == selectedRow ? "text-blue-800" : ""}`}>
-          {React.string(value->parseDateRange)}
-        </div>
-      </div>
-      <UIUtils.RenderIf condition={value == selectedRow}>
-        <div className={`text-sm text-[#B9B7B7]  ml-6 mt-1`}>
-          {React.string("Reference Date")}
-        </div>
-      </UIUtils.RenderIf>
-    </>
-  }
-}
-module RenderCompare = {
-  @react.component
-  let make = (~val1, ~val2) => {
-    let value1 = val1->Belt.Float.fromString->Belt.Option.getWithDefault(0.)
-    let value2 = val2->Belt.Float.fromString->Belt.Option.getWithDefault(0.)
-
-    if value1 > value2 {
-      //increase
-      let change = value1 -. value2
-      let percentageChange = change /. value2
-      let str = (percentageChange *. 100.0)->Js.Math.round->Belt.Float.toString
-      <div
-        className="text-green-800 p-0.5 mt-1 bg-green-200 w-fit rounded-2xl text-[10px] flex pr-2">
-        <Icon name="arrow-up" size=8 className={`mx-1 fill-[#B9BABE] dark:fill-slate-500`} />
-        {React.string(`${str}%`)}
-      </div>
-    } else {
-      let change = value2 -. value1
-      let percentageChange = change /. value2
-      let str = (percentageChange *. 100.0)->Js.Math.round->Belt.Float.toString
-      <div className="text-red-800 p-0.5 mt-1 bg-red-200 w-fit rounded-2xl text-[10px] flex pr-2">
-        <Icon name="arrow-down" size=8 className={`mx-1 fill-[#B9BABE] dark:fill-slate-500`} />
-        {React.string(`${str}%`)}
-      </div>
-    }
-  }
-  // Module contents
-}
-module ShowData = {
-  // Module contents
-  @react.component
-  let make = (~data, ~index, ~selectedRow, ~actualData) => {
-    let valueDt = data->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-    let value = data->Belt.Array.get(index)->Belt.Option.getWithDefault("")
-    let refData =
-      actualData
-      ->Js.Array2.filter(x => x->Belt.Array.get(0)->Belt.Option.getWithDefault("") == selectedRow)
-      ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault([])
-    let refVal = refData->Belt.Array.get(index)->Belt.Option.getWithDefault("")
-    let pctDrop = if index == 1 {
-      0.0
-    } else {
-      let pastVal =
-        data
-        ->Belt.Array.get(index - 1)
-        ->Belt.Option.getWithDefault("")
-        ->Belt.Float.fromString
-        ->Belt.Option.getWithDefault(0.)
-      let currVal = value->Belt.Float.fromString->Belt.Option.getWithDefault(0.)
-      let val = (pastVal -. currVal) /. pastVal
-      if currVal == 0. {
-        0.0
-      } else {
-        (val *. 100.0)->Js.Math.round
-      }
-    }
-    <>
-      <div className="flex">
-        {React.string(
-          shortNum(
-            ~labelValue=value->Belt.Float.fromString->Belt.Option.getWithDefault(0.0),
-            ~numberFormat=IND,
-            (),
-          ),
-        )}
-        <div className="pl-2 text-gray-500">
-          {pctDrop == 0.0
-            ? React.null
-            : {React.string(`(-${pctDrop->Js.Math.abs_float->Js.Float.toString}%)`)}}
-        </div>
-      </div>
-      <UIUtils.RenderIf condition={valueDt != selectedRow && value != "0" && refVal != "0"}>
-        <ToolTip
-          description="In comparision with reference date data"
-          toolTipFor={<RenderCompare val1=value val2=refVal />}
-          contentAlign=Left
-          justifyClass="justify-start"
-        />
-      </UIUtils.RenderIf>
-    </>
-  }
-}
-let getIndexOfStep = (categories, keyName) => {
-  Js.Array.indexOf(keyName, categories) + 1
-}
-
-let getCell = (selectedRow, setSelectedRow, actualData, categories, data, colType): Table.cell => {
-  Js.log(categories)
-  switch colType {
-  | FunnelSteps => CustomCell(<ShowDate data selectedRow setSelectedRow />, "true")
-  | Initiate =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Payment Page Requested")} selectedRow actualData
-      />,
-      "",
-    )
-  | Render =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Payment Page Rendered")} selectedRow actualData
-      />,
-      "",
-    )
-  | MethodSelected =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Payment Option Selected")} selectedRow actualData
-      />,
-      "",
-    )
-  | ProceedToPayClicked =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Proceed to Pay Clicked")} selectedRow actualData
-      />,
-      "",
-    )
-  | TxnStatus =>
-    CustomCell(
-      <ShowData data index={getIndexOfStep(categories, "Order Success")} selectedRow actualData />,
-      "",
-    )
-  | QuickPayRender =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Rendered")} selectedRow actualData
-      />,
-      "",
-    )
-  | QuickPayOpt =>
-    CustomCell(
-      <ShowData data index={getIndexOfStep(categories, "Quickpay Opted")} selectedRow actualData />,
-      "",
-    )
-  | QuickPayChange =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Change")} selectedRow actualData
-      />,
-      "",
-    )
-  | QuickPayOverLayClick =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Overlay Clicked")} selectedRow actualData
-      />,
-      "",
-    )
-  | QuickPayOverLayDrop =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Overlay Drop")} selectedRow actualData
-      />,
-      "",
-    )
-  }
-}
-let categoryToColMapper = category => {
-  switch category {
-  | "Payment Page Requested" => Initiate
-  | "Payment Page Rendered" => Render
-  | "Quickpay Rendered" => QuickPayRender
-  | "Quickpay Opted" => QuickPayOpt
-  | "Quickpay Change" => QuickPayChange
-  | "Quickpay Overlay Clicked" => QuickPayOverLayClick
-  | "Quickpay Overlay Drop" => QuickPayOverLayDrop
-  | "Payment Option Selected" => MethodSelected
-  | "Proceed to Pay Clicked" => ProceedToPayClicked
-  | _ => TxnStatus
-  }
-}
-type series = {name: string}
-type data = {val: string}
-type formatterType = {
-  x: int,
-  y: int,
-  series: series,
-}
-
-type primaryDataLabel =
-  | PERCENT
-  | ABS_VOLUME
-type finalSummaryLabel =
-  | RATE
-  | FINAL_STEP_VOLUME
-type stepComparisonRule =
-  | PREVIOUS_STEP
-  | FIRST_STEP
-
-type dataSetType = {
-  fromPreviousStep: array<float>,
-  fromFirstStep: array<float>,
-  volume: array<float>,
-}
-@react.component
-let make = (
-  ~chartColors: array<string>=[],
-  ~showTable: bool=true,
-  ~dataSet: Js.Dict.t<array<float>>=Js.Dict.fromArray([("val", [7650., 4064., 1987., 976.])]),
-  ~categories: array<string>=["Awareness", "Interest", "Consideration", "Purchase"],
-  ~primaryDataLabel: primaryDataLabel=PERCENT,
-  ~finalSummaryLabel: finalSummaryLabel=RATE,
-  ~stepComparisonRule: stepComparisonRule=PREVIOUS_STEP,
-  ~selectStepsUi=React.null,
-) => {
-  // will uncomment it for testing purpose
-  // let dataSet: Js.Dict.t<array<float>> = Js.Dict.fromArray([
-  //   ("val", [7650., 4064., 1987., 976.]),
-  //   ("val2", [7050., 3064., 987., 1976.]),
-  // ])
-  // let categories: array<string> = ["Awareness", "Interest", "Consideration", "Purchase"]
-  let formattedDict = Js.Dict.empty()
-  dataSet
-  ->DictionaryUtils.copyOfDict
-  ->Js.Dict.entries
-  ->Js.Array2.forEach(item => {
-    let (key, value) = item
-    let updateValueFromFirst = value->Js.Array2.mapi((item, index) => {
-      if index === 0 {
-        100.
-      } else {
-        item *. 100. /. value->Belt.Array.get(0)->Belt.Option.getWithDefault(0.)
-      }
-    })
-    let updateValueFromPrevious = value->Js.Array2.mapi((item, index) => {
-      if index === 0 {
-        100.
-      } else {
-        item *. 100. /. value->Belt.Array.get(index - 1)->Belt.Option.getWithDefault(0.)
-      }
-    })
-    formattedDict->Js.Dict.set(
-      key,
-      {
-        fromPreviousStep: updateValueFromPrevious,
-        fromFirstStep: updateValueFromFirst,
-        volume: value,
-      },
-    )
-  })
-
-  let dataSet = if primaryDataLabel === PERCENT {
-    dataSet
-    ->Js.Dict.entries
-    ->Js.Array2.map(item => {
-      let (key, value) = item
-      let updateValueFromFirst = value->Js.Array2.mapi((item, index) => {
-        if index === 0 {
-          100.
-        } else {
-          item *. 100. /. value->Belt.Array.get(0)->Belt.Option.getWithDefault(0.)
-        }
-      })
-      (key, updateValueFromFirst)
-    })
-    ->Js.Dict.fromArray
-  } else {
-    dataSet
-  }
-
-  let mergedDict = Js.Dict.empty()
-
-  dataSet
-  ->Js.Dict.values
-  ->Js.Array2.forEach(arrVal => {
-    arrVal->Js.Array2.forEachi((item, index) => {
-      DictionaryUtils.appnedDataToKey(mergedDict, index->Belt.Int.toString, item)
-    })
-  })
-
-  let formatter: Js_OO.Callback.arity1<Js.Json.t => string> =
-    @this
-    (pointsJson: Js.Json.t) => {
-      let pointsDict = pointsJson->getDictFromJsonObject
-      let x_axis = pointsDict->getInt("x", 0)
-
-      let color = pointsDict->getString("color", "")
-
-      let deltaArr = if x_axis === 0 {
-        let getValues =
-          mergedDict->Js.Dict.get(x_axis->Belt.Int.toString)->Belt.Option.getWithDefault([])
-        getValues->Js.Array2.mapi((item, index) => {
-          let absValue = {shortNum(~labelValue=item, ~numberFormat=IND, ())}
-          let value = primaryDataLabel === PERCENT ? `${absValue}%` : absValue
-          let color = chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(color)
-          `<div style='' class="flex flex-row justify-between items-center">
-              <div class='flex h-2 w-2 rounded-full self-center mr-2' style='background-color: ${color}'"></div>
-              <div>
-                ${value}
-              </div>
-          </div>`
-        })
-      } else {
-        let getValues =
-          mergedDict->Js.Dict.get(x_axis->Belt.Int.toString)->Belt.Option.getWithDefault([])
-
-        getValues->Js.Array2.mapi((item, index) => {
-          let absValue = {shortNum(~labelValue=item, ~numberFormat=IND, ())}
-          let value = primaryDataLabel === PERCENT ? `${absValue}%` : absValue
-          let color = chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(color)
-
-          `<div style='' class="flex flex-row justify-between items-center">
-              <div class='flex h-2 w-2 rounded-full self-center mr-2' style='background-color: ${color}'"></div>
-              <div>
-                ${value}
-              </div>
-            </div>`
-        })
-      }
-
-      `<div class='flex flex-row gap-2' style='padding: 8px; border-radius: 8px; border: 1px solid var(--Grey-900, #E5E7EB); background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(1px);'>
-        ${deltaArr->Js.Array2.joinWith(
-          "<div style=' border-left: 1px solid rgba(234, 232, 232, 1); float: left;'></div>",
-        )}
-        </div>`
-    }
-
-  let tooltipFormatter = (points: HighchartFunnelChart.tooltipPoints) => {
-    let highlight = "font-weight:900; font-size:13px;"
-    let fromFirstValueArr = formattedDict->Js.Dict.values
-    let formattedDictKeys = formattedDict->Js.Dict.keys
-
-    let fromPreviousStep =
-      fromFirstValueArr
-      ->Js.Array2.map(item => {
-        `<td>${shortNum(
-            ~labelValue=item.fromPreviousStep
-            ->Belt.Array.get(points.x)
-            ->Belt.Option.getWithDefault(0.),
-            ~numberFormat=IND,
-            (),
-          )}%</td>`
-      })
-      ->Js.Array2.joinWith("<th></th>")
-
-    let fromFirstStep =
-      fromFirstValueArr
-      ->Js.Array2.map(item => {
-        `<td>${shortNum(
-            ~labelValue=item.fromFirstStep
-            ->Belt.Array.get(points.x)
-            ->Belt.Option.getWithDefault(0.),
-            ~numberFormat=IND,
-            (),
-          )}%</td>`
-      })
-      ->Js.Array2.joinWith("<th></th>")
-
-    let fromValues =
-      fromFirstValueArr
-      ->Js.Array2.map(item => {
-        `<td>${shortNum(
-            ~labelValue=item.volume->Belt.Array.get(points.x)->Belt.Option.getWithDefault(0.),
-            ~numberFormat=IND,
-            (),
-          )}</td>`
-      })
-      ->Js.Array2.joinWith("<th></th>")
-    let formattedHeading =
-      formattedDict
-      ->Js.Dict.keys
-      ->Js.Array2.mapi((_, index) =>
-        `<th><span style='color:${chartColors
-          ->Belt.Array.get(index)
-          ->Belt.Option.getWithDefault("")}; ${highlight}'> ${"\u25CF"} </span>Range${(index + 1)
-            ->Belt.Int.toString}</th>`
-      )
-      ->Js.Array2.joinWith("<th></th>")
-
-    if points.x === categories->Js.Array2.length {
-      ""
-    } else if points.name === formattedDictKeys->Belt.Array.get(0)->Belt.Option.getWithDefault("") {
-      `<table>
-        <tr>
-          <th> </th>
-          ${formattedHeading}
-        </tr>
-        <tr>
-          <td><span>Conversion Rate from the Start</span></td>
-          ${fromFirstStep}
-        </tr>
-        <tr>
-          <td><span>Conversion Rate from the Previous</span></td>
-          ${fromPreviousStep}
-        </tr>
-        <tr>
-          <td><span>Total Volume</span></td>
-          ${fromValues}
-        </tr>
-    </table>`
-    } else {
-      ""
-    }
-  }
-
-  let yAxisLabelFormatter = value => {
-    let value = if primaryDataLabel === PERCENT {
-      LineChartUtils.formatStatsAccToMetrix(Rate, value)
-    } else {
-      LineChartUtils.formatStatsAccToMetrix(Volume, value)
-    }
-    value
-  }
-
-  let _legendFormatter = (this: HighchartFunnelChart.legendObj) => {
-    let (fromFirstStepRate, volumeArr) = switch formattedDict->Js.Dict.get(this.userOptions.name) {
-    | Some(value) => (value.fromFirstStep, value.volume)
-    | None => ([], [])
-    }
-
-    if finalSummaryLabel === RATE {
-      `<div style='background: ${this.color};color: var(--table-typography-body, #111); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal;' class='py-1 px-3 rounded'>
-        ${shortNum(
-          ~labelValue=fromFirstStepRate
-          ->Belt.Array.get(fromFirstStepRate->Js.Array2.length - 1)
-          ->Belt.Option.getWithDefault(0.),
-          ~numberFormat=IND,
-          (),
-        )}%
-      </div>`
-    } else {
-      `<div style='background: ${this.color};color: var(--table-typography-body, #111); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal;' class='py-1 px-3 rounded'>
-         ${shortNum(
-          ~labelValue=volumeArr
-          ->Belt.Array.get(fromFirstStepRate->Js.Array2.length - 1)
-          ->Belt.Option.getWithDefault(0.),
-          ~numberFormat=IND,
-          (),
-        )}
-      </div>`
-    }
-  }
-  let legendTitle = if finalSummaryLabel === RATE {
-    "Conversion Rate"
-  } else {
-    "Conversion Volume"
-  }
-  <>
-    <div className="flex flex-row justify-between mb-5">
-      {selectStepsUi}
-      <div
-        className="flex flex-row justify-between p-3 border-[1px] rounded-lg gap-2 items-center  border-[#E5E7EB]">
-        <div
-          style={ReactDOMStyle.make(
-            ~color="#6D7280",
-            ~fontFamily="Inter",
-            ~fontSize="14px",
-            ~fontStyle="normal",
-            ~fontWeight="500",
-            ~lineHeight="normal",
-            (),
-          )}>
-          {legendTitle->React.string}
-        </div>
-        {formattedDict
-        ->Js.Dict.entries
-        ->Js.Array2.mapi((item, index) => {
-          let (_, value) = item
-          let {fromFirstStep, volume} = value
-          if finalSummaryLabel === RATE {
-            <div
-              key={index->Belt.Int.toString}
-              style={ReactDOMStyle.make(
-                ~backgroundColor=chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(""),
-                ~color="var(--table-typography-body, #111)",
-                ~fontFamily="Inter",
-                ~fontSize="16px",
-                ~fontStyle="normal",
-                ~fontWeight="600",
-                ~lineHeight="normal",
-                (),
-              )}
-              className="py-1 px-2 rounded">
-              {`${shortNum(
-                  ~labelValue=fromFirstStep
-                  ->Belt.Array.get(fromFirstStep->Js.Array2.length - 1)
-                  ->Belt.Option.getWithDefault(0.),
-                  ~numberFormat=IND,
-                  (),
-                )}%`->React.string}
-            </div>
-          } else {
-            <div
-              style={ReactDOMStyle.make(
-                ~backgroundColor=chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(""),
-                ~color="var(--table-typography-body, #111)0",
-                ~fontFamily="Inter",
-                ~fontSize="16px",
-                ~fontStyle="normal",
-                ~fontWeight="600",
-                ~lineHeight="normal",
-                (),
-              )}
-              className="py-1 px-3 rounded">
-              {`${shortNum(
-                  ~labelValue=volume
-                  ->Belt.Array.get(volume->Js.Array2.length - 1)
-                  ->Belt.Option.getWithDefault(0.),
-                  ~numberFormat=IND,
-                  (),
-                )}%`->React.string}
-            </div>
-          }
-        })
-        ->React.array}
-      </div>
-    </div>
-    <HighchartFunnelChart
-      dataSet
-      categories
-      chartColors
-      formatter
-      // legendFormatter
-      // legendTitle
-      tooltipFormatter
-      yAxisLabelFormatter
-    />
-  </>
-}
-
-let getData: Js.Json.t => array<array<string>> = _json => {
-  []
-}
-module SDKFunnelTable = {
-  @react.component
-  let make = (~funnelStepsValue: Js.Dict.t<array<float>>, ~categories) => {
-    let (selectedRow, setSelectedRow) = React.useState(_ => "")
-    let dataKeys = Js.Dict.keys(funnelStepsValue)
-    let actualDataR =
-      dataKeys->Js.Array2.map(key =>
-        Js.Array2.concat(
-          [key],
-          Js.Dict.get(funnelStepsValue, key)
-          ->Belt.Option.getWithDefault([])
-          ->Js.Array2.map(x => x->Belt.Float.toString),
-        )
-      )
-    let actualData = actualDataR->Js.Array2.map(Js.Nullable.return)
-    let (offset, setOffset) = React.useState(_ => 10)
-    Js.log(actualData)
-    let defaultColumns =
-      categories->Js.Array2.map(ele => ele->categoryToColMapper)->Js.Array.concat([FunnelSteps])
-    React.useEffect1(() => {
-      let defaultSelect = dataKeys->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-      setSelectedRow(_ => defaultSelect)
-
-      None
-    }, [funnelStepsValue])
-    let entity = EntityType.makeEntity(
-      ~uri="",
-      ~getObjects=getData,
-      ~defaultColumns,
-      ~getHeading,
-      ~getCell=getCell(selectedRow, setSelectedRow, actualDataR, categories),
-      ~dataKey="",
-      (),
-    )
-    <LoadedTable
-      entity
-      actualData
-      title="dummy"
-      totalResults=2
-      resultsPerPage=10
-      headBottomMargin="!gap-0"
-      tableDataBorderClass="border-1 border-jp-2-light-gray-300"
-      customCellColor="bg-[#F6F6F6]"
-      selectedRowColor=""
-      offset
-      setOffset
-      currrentFetchCount=10
-      hideTitle=true
-    />
-  }
-}
diff --git a/src/components/SankeyUtils.res b/src/components/SankeyUtils.res
index 0756c0764..2ca6489df 100644
--- a/src/components/SankeyUtils.res
+++ b/src/components/SankeyUtils.res
@@ -5,39 +5,6 @@ type nodeConfigs = {
   total_vol_metrix: string,
 }
 
-let sankeyConfig: nodeConfigs = {
-  success_vol_metrix: "success_volume",
-  total_vol_metrix: "total_volume",
-}
-
-let sankeyAlphabeticalSortFn = (e1, e2) => {
-  let (a1, b1, _) = e1
-  let (a2, b2, _) = e2
-  if a1 > a2 {
-    1
-  } else if a1 < a2 {
-    -1
-  } else if b1 > b2 {
-    1
-  } else if b1 < b2 {
-    -1
-  } else {
-    0
-  }
-}
-
-let sankeyvolSortFn = (e1, e2) => {
-  let (_, _, v1) = e1
-  let (_, _, v2) = e2
-  if v1 < v2 {
-    1
-  } else if v1 > v2 {
-    -1
-  } else {
-    0
-  }
-}
-
 let numericArraySortComperator = (a, b) => {
   let (_, val1) = a
   let (_, val2) = b
@@ -51,9 +18,9 @@ let numericArraySortComperator = (a, b) => {
 }
 
 let convertToSankeyFormat = (
-  ~lastStageAdd=true,
+  ~lastStageAdd,
   ~arr: array<Js.Json.t>,
-  ~sankeyConfig: nodeConfigs=sankeyConfig,
+  ~sankeyConfig: nodeConfigs,
   ~snakeyActiveTab: array<string>,
   ~topN: int,
 ) => {
diff --git a/src/components/SectionAccordion.res b/src/components/SectionAccordion.res
deleted file mode 100644
index d1b4b563b..000000000
--- a/src/components/SectionAccordion.res
+++ /dev/null
@@ -1,105 +0,0 @@
-open NewThemeUtils
-type mobileRenderType = Modal | Accordion
-@react.component
-let make = (
-  ~title="",
-  ~titleSize: headingSize=Large,
-  ~subtext="",
-  ~children,
-  ~mobileRenderType: mobileRenderType=Accordion,
-  ~hideHeaderWeb=false,
-  ~hideHeading=false,
-  ~isMobileView=false,
-  ~setShow=_ => (),
-  ~show="",
-) => {
-  let titleClass = "md:font-bold font-medium md:text-fs-16 text-fs-13 text-jp-gray-900 text-opacity-75 dark:text-white  dark:text-opacity-75"
-
-  let (isExpanded, setIsExpanded) = React.useState(_ => !isMobileView)
-
-  let url = RescriptReactRouter.useUrl()
-  let path =
-    url.path->Belt.List.toArray->Js.Array2.joinWith("/")->Js.Global.decodeURI->Js.String2.split("/")
-  let urlTitle = path[path->Js.Array2.length - 1]->Belt.Option.getWithDefault("")
-
-  let bgCss = "bg-white dark:bg-jp-gray-lightgray_background"
-
-  let checkTitle = isExpanded ? show === title ? "hidden" : "block" : "block"
-  let noBorder =
-    checkTitle === "hidden" ? "border-none" : "border-t-2 dark:border-jp-gray-950 md:border-0"
-  let expandCondition = show !== "show" ? isExpanded ? "" : "hidden" : "hidden"
-
-  React.useEffect1(_ => {
-    if show !== "show" {
-      setIsExpanded(_ => true)
-    } else {
-      setIsExpanded(_ => false)
-    }
-    None
-  }, [show])
-  let customBorder = Js.Array2.includes(["Configured Payment Methods"], show)
-    ? "border m-4"
-    : "border-none"
-  let titleBorder = Js.Array2.includes(["Configured Payment Methods"], show) ? "border-b pb-4" : ""
-  let borderCss = isExpanded ? customBorder : "border"
-
-  <AddDataAttributes attributes=[("data-section", title)]>
-    <div className={`${borderCss} md:border-0 dark:border-jp-gray-950 dark:bg-transparent`}>
-      {if isMobileView {
-        <div
-          className={`${titleClass} ${bgCss} px-4 py-3 flex justify-start text-jp-gray-900 text-opacity-75 ${checkTitle}`}
-          onClick={_ => {
-            RescriptReactRouter.push(`/settings/${urlTitle}/${title}`)
-            isMobileView
-              ? {
-                  setIsExpanded(prev => !prev)
-                  setShow(title)
-                }
-              : ()
-          }}>
-          <div className={`py-1 !text-lg ${checkTitle}`}> {title->React.string} </div>
-          <div
-            className={`cursor-pointer flex justify-center align-center text-jp-gray-900 text-right text-opacity-50 dark:text-jp-gray-text_darktheme dark:text-opacity-50 ml-auto ${checkTitle}`}>
-            <Icon name={isExpanded ? "angle-down" : "angle-right"} size=15 />
-          </div>
-        </div>
-      } else if !hideHeaderWeb {
-        <h3 className={`mt-7 text-fs-16 font-bold`}> {title->React.string} </h3>
-      } else {
-        React.null
-      }}
-      <DesktopView>
-        <UIUtils.RenderIf condition={!hideHeaderWeb}>
-          <p
-            className="mt-2 text-gray-900 text-opacity-50 dark:text-jp-gray-text_darktheme dark:text-opacity-50">
-            {subtext->React.string}
-          </p>
-        </UIUtils.RenderIf>
-      </DesktopView>
-      {if isMobileView {
-        switch mobileRenderType {
-        | Modal =>
-          <Modal
-            modalHeading=title
-            showModal=isExpanded
-            setShowModal=setIsExpanded
-            borderBottom=true
-            childClass="">
-            <div className="mx-4 mb-4"> {children} </div>
-          </Modal>
-        | Accordion =>
-          <div className={`${expandCondition} ${noBorder}`}>
-            <div className={`${titleBorder}`}>
-              <UIUtils.RenderIf condition={!hideHeading}>
-                <div className={"text-fs-16 font-bold mt-4 ml-5"}> {title->React.string} </div>
-              </UIUtils.RenderIf>
-            </div>
-            {children}
-          </div>
-        }
-      } else {
-        children
-      }}
-    </div>
-  </AddDataAttributes>
-}
diff --git a/src/components/ServerComponent.res b/src/components/ServerComponent.res
deleted file mode 100644
index 3f2b5614e..000000000
--- a/src/components/ServerComponent.res
+++ /dev/null
@@ -1,14 +0,0 @@
-@module("react-dom/server")
-external renderToStaticMarkup: React.element => string = "renderToStaticMarkup"
-
-let getPaymentFormStr = () => {
-  renderToStaticMarkup(<div />)
-}
-
-let getRedirectPage = () => {
-  renderToStaticMarkup(<div />)
-}
-
-let getMetatagsStr = () => {
-  renderToStaticMarkup(<div />)
-}
diff --git a/src/components/SidebarStyleUtils.res b/src/components/SidebarStyleUtils.res
deleted file mode 100644
index 3d2d4c3d7..000000000
--- a/src/components/SidebarStyleUtils.res
+++ /dev/null
@@ -1,55 +0,0 @@
-let getSideBarOptionStyle = (isSelected, isNewTheme) =>
-  if isNewTheme {
-    if isSelected {
-      "text-fs-14 font-bold text-white"
-    } else {
-      "text-fs-14 font-medium text-jp-2-gray-60"
-    }
-  } else if isSelected {
-    "text-base font-semibold text-black dark:text-jp-gray-text_darktheme"
-  } else {
-    "text-base font-semibold text-infra-gray-700 dark:text-jp-gray-text_darktheme text-opacity-40 dark:text-opacity-40"
-  }
-
-let getSelectedIconColor = (isSelected, isNewTheme) =>
-  isNewTheme ? isSelected ? "text-white brightness-200" : "text-jp-2-gray-60" : ""
-
-let defaultIconColor = (isAnySubItemSelected, isNewTheme) =>
-  isNewTheme ? isAnySubItemSelected ? "text-white" : "text-jp-2-gray-60" : ""
-
-let getSidebarSubOptionStyle = (isSelected, isNewTheme) =>
-  if isNewTheme {
-    if isSelected {
-      "text-white text-base"
-    } else {
-      "text-jp-2-gray-60 text-base"
-    }
-  } else {
-    "text-base pl-10"
-  }
-
-let textColor = isNewTheme => isNewTheme ? "text-white" : "dark:text-blue-800"
-
-let getIconSize = buttonType => {
-  switch buttonType {
-  | "small" => 16
-  | "medium" => 18
-  | _ => 20
-  }
-}
-
-let hoverColor = (isSelected, isNewTheme) =>
-  if isNewTheme {
-    `rounded-lg ${!isSelected
-        ? "hover:bg-jp-gray-text_darktheme hover:bg-opacity-5"
-        : "hover:bg-none"}`
-  } else {
-    "rounded-lg dark:hover:bg-jp-gray-text_darktheme dark:hover:bg-opacity-5"
-  }
-
-let getSelectedClass = (isExpanded, isNewTheme) =>
-  if isNewTheme {
-    isExpanded ? "bg-sidebar-slected py-1" : ""
-  } else {
-    "dark:bg-jp-gray-text_darktheme dark:bg-opacity-5"
-  }
diff --git a/src/components/StagedProgressBar.res b/src/components/StagedProgressBar.res
deleted file mode 100644
index fb97add21..000000000
--- a/src/components/StagedProgressBar.res
+++ /dev/null
@@ -1,93 +0,0 @@
-type progressPointerPosition = Start(bool) | Middle
-
-@react.component
-let make = (~selectedIdx, ~items, ~wrapperClass="", ~progressPointerPosition=Start(false)) => {
-  let isMobileView = MatchMedia.useMatchMedia("(max-width: 700px)")
-  let radius = isMobileView ? "h-2 w-2" : "h-3 w-3"
-
-  let itemWidthClass = switch progressPointerPosition {
-  | Middle => "flex-1"
-  | Start(isLast) => isLast ? "" : "w-full"
-  }
-
-  let barWidthClass = switch progressPointerPosition {
-  | Middle => "w-full"
-  | Start(isLast) => isLast ? "" : "w-full"
-  }
-
-  let textClass = switch progressPointerPosition {
-  | Middle => ` font-semibold ${isMobileView ? "text-xs" : ""} flex justify-center`
-  | Start(_) => `w-max font-semibold ${isMobileView ? "text-xs" : ""}`
-  }
-
-  <div className={`flex flex-row items-center justify-around ${wrapperClass}`}>
-    {items
-    ->Js.Array2.mapi((item, index) => {
-      let isLast = items->Js.Array2.length - 1 === index
-      let highlighted = index <= selectedIdx
-      <div key={string_of_int(index)} className={`${itemWidthClass} flex flex-col my-2`}>
-        <div className={`${barWidthClass} flex flex-row items-center my-2`}>
-          {switch progressPointerPosition {
-          | Start(_) =>
-            <>
-              <div
-                className={`${highlighted
-                    ? "bg-blue-800"
-                    : "bg-jp-gray-300"} ${radius} rounded-full`}
-              />
-              {if isLast {
-                React.null
-              } else {
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} w-full h-1`}
-                />
-              }}
-            </>
-          | Middle =>
-            if isLast {
-              <div className="flex-1 flex items-center">
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`}
-                />
-                <div
-                  className={`${highlighted
-                      ? "bg-blue-800"
-                      : "bg-jp-gray-300"} ${radius} rounded-full`}
-                />
-                <div className={"flex-1"} />
-              </div>
-            } else if index == 0 {
-              <div className="flex-1 flex items-center">
-                <div className={"flex-1"} />
-                <div
-                  className={`${highlighted
-                      ? "bg-blue-800"
-                      : "bg-jp-gray-300"} ${radius} rounded-full`}
-                />
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`}
-                />
-              </div>
-            } else {
-              <div className="flex-1 flex items-center">
-                <div className={`${highlighted ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`} />
-                <div
-                  className={`${highlighted
-                      ? "bg-blue-800"
-                      : "bg-jp-gray-300"} ${radius} rounded-full`}
-                />
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`}
-                />
-              </div>
-            }
-          }}
-        </div>
-        <div className={`${highlighted ? "text-blue-800" : "text-gray-300"} ${textClass}`}>
-          {React.string(item)}
-        </div>
-      </div>
-    })
-    ->React.array}
-  </div>
-}
diff --git a/src/components/StaticTable.res b/src/components/StaticTable.res
deleted file mode 100644
index f95769476..000000000
--- a/src/components/StaticTable.res
+++ /dev/null
@@ -1,211 +0,0 @@
-type view = Table | Card
-
-let getValue = (val: Table.cell) => {
-  switch val {
-  | Label(label) => label.title
-  | Text(str) => str === "No Value" ? "" : str
-  | _ => ""
-  }
-}
-
-let getValueWithType = (val: Table.cell) => {
-  switch val {
-  | Label(label) => (label.title, "numeric")
-  | Text(str) => (str, str->Belt.Float.fromString->Js.Option.isSome ? "numeric" : "string")
-  | _ => ("", "")
-  }
-}
-
-let sortRows = (
-  rowData: array<Js.Array2.t<Table.cell>>,
-  key,
-  sortOrder: Table.sortOrder,
-  heading,
-) => {
-  let index = heading->Js.Array2.findIndex((head: Table.header) => head.key === key)
-  rowData->Js.Array2.sortInPlaceWith((item1, item2) => {
-    if index === -1 {
-      1
-    } else {
-      let (value1, type1) = item1->Js.Array2.unsafe_get(index)->getValueWithType
-      let (value2, type2) = item2->Js.Array2.unsafe_get(index)->getValueWithType
-      if type1 === "numeric" || type2 === "numeric" {
-        let (value1, value2) = (
-          value1->Belt.Float.fromString->Belt.Option.getWithDefault(-1.0),
-          value2->Belt.Float.fromString->Belt.Option.getWithDefault(-1.0),
-        )
-        if value1 === value2 {
-          0
-        } else if value1 > value2 {
-          sortOrder === DEC ? 1 : -1
-        } else if sortOrder === DEC {
-          -1
-        } else {
-          1
-        }
-      } else if value1 === value2 {
-        0
-      } else if value1 > value2 {
-        sortOrder === DEC ? 1 : -1
-      } else if sortOrder === DEC {
-        -1
-      } else {
-        1
-      }
-    }
-  })
-}
-
-let filterRows = (
-  rowData: array<Js.Array2.t<Table.cell>>,
-  filterObj: array<Table.filterObject>,
-) => {
-  rowData->Js.Array2.filter(item => {
-    filterObj->Js.Array2.reduce((acc, filterOfColumn) => {
-      if (
-        filterOfColumn.options->Js.Array2.length === 0 ||
-          filterOfColumn.selected->Js.Array2.length === 0
-      ) {
-        true && acc
-      } else {
-        switch filterOfColumn.key->Belt.Int.fromString {
-        | Some(index) =>
-          switch item->Js.Array2.findi((_, idx) => idx === index) {
-          | Some(val) => {
-              let rowOfColumn = val->getValue
-              filterOfColumn.selected->Js.Array2.includes(rowOfColumn) && acc
-            }
-
-          | None => true && acc
-          }
-        | None => true && acc
-        }
-      }
-    }, true)
-  })
-}
-
-@react.component
-let make = (
-  ~tableHeading=?,
-  ~data,
-  ~handleRowClick,
-  ~heading,
-  ~getRowFromData,
-  ~sortedObj=?,
-  ~filterObj=?,
-  ~resultsPerPage=5,
-  ~showPagination=true,
-) => {
-  let isMobileView = MatchMedia.useMatchMedia("(max-width: 700px)")
-  let (dataView, setDataView) = React.useState(_ => isMobileView ? Card : Table)
-  let (offset, setOffset) = React.useState(() => 0)
-  let (sortedObj, setSortedObj) = React.useState(() => sortedObj)
-  let initialFilterObj = filterObj
-  let (filterObj, setFilterObj) = React.useState(() => filterObj)
-  let totalResults = {data->Js.Array.length}
-  let resultsPerPage = showPagination ? resultsPerPage : totalResults
-
-  let start = offset + 1
-  let toNum = resultsPerPage + start > totalResults ? totalResults : resultsPerPage + start - 1
-  let currentPage = offset / resultsPerPage + 1
-
-  React.useEffect1(() => {
-    setDataView(_prev => isMobileView ? Card : Table)
-    None
-  }, [isMobileView])
-
-  let paginate = React.useCallback3(pageNumber => {
-    let total = Js.Math.ceil(Belt.Int.toFloat(totalResults) /. Belt.Int.toFloat(resultsPerPage))
-    let defaultPageNumber = Js.Math.min_int(total, pageNumber)
-    let page = defaultPageNumber
-    let newOffset = (page - 1) * resultsPerPage
-    setOffset(_ => newOffset)
-  }, (setOffset, resultsPerPage, totalResults))
-
-  let rows = data->Belt.Array.keepMap(getRowFromData)
-
-  let heading = heading->Js.Array2.mapi((head: Table.header, index) => {
-    let getValue = row =>
-      row->Belt.Array.get(index)->Belt.Option.mapWithDefault("", Table.getTableCellValue)
-
-    let default = switch rows[0] {
-    | Some(row) => getValue(row)
-    | None => ""
-    }
-    let head: Table.header = {
-      ...head,
-      showSort: head.showSort &&
-      rows->Js.Array2.length > 0 &&
-      rows->Js.Array2.some(row => getValue(row) !== default),
-    }
-    head
-  })
-
-  let rows = rows->Js.Array2.slice(~start=offset, ~end_=toNum)
-
-  let filteredRows = switch filterObj {
-  | Some(obj: array<Table.filterObject>) => filterRows(rows, obj)
-  | None => rows
-  }
-
-  let sortedRows = switch sortedObj {
-  | Some(obj: Table.sortedObject) => sortRows(filteredRows, obj.key, obj.order, heading)
-  | None => filteredRows
-  }
-
-  <>
-    {switch tableHeading {
-    | Some(head) => <div className="font-bold text-3xl"> {React.string(head)} </div>
-    | None => React.null
-    }}
-    {if sortedRows->Js.Array2.length > 0 {
-      <div className="w-full overflow-x-scroll">
-        {switch dataView {
-        | Table =>
-          <Table
-            heading
-            rows={sortedRows}
-            onRowClick=handleRowClick
-            offset
-            showScrollBar=true
-            ?sortedObj
-            setSortedObj
-            ?filterObj
-          />
-        | Card => <CardTable heading rows={sortedRows} onRowClick=handleRowClick offset />
-        }}
-        {if showPagination {
-          <div className="flex flex-row justify-between mt-4">
-            <div className="text-gray-500 my-4">
-              {React.string(
-                `Showing ${start->string_of_int} to ${toNum->string_of_int} of ${totalResults->string_of_int} `,
-              )}
-            </div>
-            {if totalResults > resultsPerPage {
-              <div className="flex flex-row">
-                <Pagination totalResults currentPage resultsPerPage paginate />
-              </div>
-            } else {
-              React.null
-            }}
-          </div>
-        } else {
-          React.null
-        }}
-      </div>
-    } else if rows->Js.Array2.length > 0 {
-      <div
-        className="flex flex-col flex-1 items-center justify-center text-center text-2xl font-bold w-full m-4 gap-4">
-        {React.string("No Data Found!!")}
-        <Button
-          leftIcon={FontAwesome("arrow-alt-circle-left")}
-          onClick={_ => setFilterObj(_ => initialFilterObj)}
-          text="Clear filters"
-        />
-      </div>
-    } else {
-      React.null
-    }}
-  </>
-}
diff --git a/src/components/SynchronizedCharts.res b/src/components/SynchronizedCharts.res
deleted file mode 100644
index 3d7dc9c47..000000000
--- a/src/components/SynchronizedCharts.res
+++ /dev/null
@@ -1,294 +0,0 @@
-%%raw(`require("./highcharts.css")`)
-
-open LogicUtils
-type highcharts
-type tooltipPosition = {
-  x: int,
-  y: int,
-}
-type tooltipPoint = {
-  plotX: int,
-  plotY: int,
-}
-
-external chartsToDict: highcharts => Js.Dict.t<Js.Json.t> = "%identity"
-@send
-external setState: (Js.Json.t, string, bool) => unit = "setState"
-@send
-external drawCrosshair: (Js.Json.t, Js.Json.t, Js.Json.t) => unit = "drawCrosshair"
-@send
-external hideCrosshair: (Js.Json.t, unit) => unit = "hideCrosshair"
-@send
-external refresh: (Js.Dict.t<Js.Json.t>, array<Js.Json.t>) => unit = "refresh"
-@send
-external hide: (Js.Dict.t<Js.Json.t>, unit) => unit = "hide"
-@send
-external show: (Js.Dict.t<Js.Json.t>, unit) => unit = "show"
-@send
-external getPosition: (Js.Json.t, int, int, tooltipPoint) => tooltipPosition = "getPosition"
-@send
-external getChartPosition: Js.Json.t => Js.Json.t = "getChartPosition"
-
-@module("highcharts") external highchartsModule: highcharts = "default"
-
-type animation = {duration?: int}
-
-type style = {
-  color?: string,
-  fontWeight?: int,
-  fontSize?: int,
-  fontFamily?: string,
-  lineWidth?: int,
-  lineHeight?: float,
-  zIndex?: int,
-  width?: string,
-}
-
-type chart = {
-  \"type"?: string,
-  height?: int,
-  zoomType?: string,
-  panning?: bool,
-  className?: string,
-  borderColor?: string,
-  backgroundColor?: string,
-  borderWidth?: int,
-  borderRadius?: int,
-  spacingTop?: int,
-  spacingBottom?: int,
-  spacingLeft?: int,
-  spacingRight?: int,
-  animation?: animation,
-  fontFamily?: string,
-  style?: style,
-}
-
-type title = {
-  text?: string,
-  useHTML?: bool,
-  align?: string,
-  floating?: bool,
-  x?: int,
-  y?: int,
-  style?: style,
-}
-
-type crosshair = {color?: string, zIndex?: int}
-
-type xAxis = {
-  \"type"?: string,
-  lineColor?: string,
-  crosshair?: crosshair,
-}
-
-type yAxisRecord = {value: float}
-
-type labels = {
-  formatter?: Js_OO.Callback.arity1<yAxisRecord => string>,
-  enabled?: bool,
-  useHTML?: bool,
-}
-type tickPositionerYaxis = {dataMin: float, dataMax: float}
-type yAxis = {
-  title?: title,
-  tickPositioner?: Js_OO.Callback.arity1<tickPositionerYaxis => array<float>>,
-  opposite?: bool,
-  gridZIndex?: int,
-  gridLineColor?: string,
-  gridLineDashStyle?: string,
-  lineColor?: string,
-  lineWidth?: int,
-  visible?: bool,
-  labels?: labels,
-}
-
-type tooltip = {
-  xDateFormat?: string,
-  shared?: bool,
-  useHTML?: bool,
-  hideDelay?: int,
-  positioner?: Js_OO.Callback.arity4<(Js.Json.t, int, int, tooltipPoint) => tooltipPosition>,
-  formatter?: Js_OO.Callback.arity1<Js.Json.t => string>,
-  stickOnContact?: bool,
-  borderWidth?: int,
-  borderRadius?: int,
-  backgroundColor?: string,
-  shadow?: bool,
-  outside?: bool,
-  followPointer?: bool,
-  className?: string,
-  style?: style,
-}
-
-type legend = {enabled?: bool}
-type credits = {enabled?: bool}
-type halo = {size?: int}
-type hover = {
-  lineWidth?: int,
-  lineWidthPlus?: int,
-  enabled?: bool,
-  halo?: halo,
-}
-
-type inactive = {enabled?: bool}
-
-type states = {hover?: hover, inactive?: inactive}
-
-type area = {
-  fillOpacity?: float,
-  lineWidth?: int,
-  states?: states,
-}
-
-type boxplot = {visible?: bool}
-type marker = {
-  enabled?: bool,
-  radius?: float,
-  symbol?: string,
-}
-type events = {
-  mouseOver?: Js_OO.Callback.arity1<Js.Json.t => unit>,
-  mouseOut?: Js_OO.Callback.arity1<Js.Json.t => unit>,
-  click?: Js_OO.Callback.arity1<Js.Json.t => unit>,
-}
-
-type point = {events?: events}
-type series = {
-  marker?: marker,
-  states?: states,
-  point?: point,
-  cursor?: string,
-}
-
-type plotOptions = {
-  area?: area,
-  boxplot?: boxplot,
-  series?: series,
-}
-
-type seriesLine = {
-  name?: string,
-  data?: array<(float, float)>,
-  dashStyle?: string,
-  animation?: animation,
-  color?: string,
-  legendIndex?: int,
-  lineWidth?: float,
-  opacity?: float,
-  zIndex?: int,
-  marker?: marker,
-}
-
-type options = {
-  chart?: chart,
-  title?: title,
-  subtitle?: title,
-  xAxis?: xAxis,
-  yAxis?: yAxis,
-  tooltip?: tooltip,
-  legend?: legend,
-  credits?: credits,
-  plotOptions?: plotOptions,
-  series?: array<seriesLine>,
-}
-
-module HighchartsReact = {
-  @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: options=?) => React.element = "default"
-}
-
-let getMatchedPoint = (points, xAxis) => {
-  points->Js.Array2.find(point => {
-    point->getDictFromJsonObject->getFloat("x", 0.) === xAxis
-  })
-}
-
-let setHighlightState = (~hideTitle=false, ()) =>
-  @this
-  (point: Js.Json.t) => {
-    let charts =
-      highchartsModule
-      ->chartsToDict
-      ->getArrayFromDict("charts", [])
-      ->Belt.Array.keepMap(Js.Json.decodeObject)
-    let currentSeries = point->getDictFromJsonObject->getObj("series", Js.Dict.empty())
-    let currentChart = currentSeries->getObj("chart", Js.Dict.empty())
-    let xAxisPoint = point->getDictFromJsonObject->getFloat("x", 0.)
-    charts->Js.Array2.forEach(chart => {
-      let title = chart->getObj("title", Js.Dict.empty())
-      if !(title->Js.Json.object_->checkEmptyJson) && hideTitle {
-        title->hide()
-      }
-      if chart !== currentChart {
-        let matchedPoints = []
-        let series = chart->getArrayFromDict("series", [])
-        series->Js.Array2.forEach(s => {
-          let pointsArr = s->getDictFromJsonObject->getArrayFromDict("points", [])
-          let matchedPoint =
-            pointsArr
-            ->getMatchedPoint(xAxisPoint)
-            ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-
-          if !(matchedPoint->checkEmptyJson) {
-            matchedPoints->Js.Array2.push(matchedPoint)->ignore
-            matchedPoint->setState("hover", false)
-          }
-        })
-        let xAxisArr = chart->getArrayFromDict("xAxis", [])
-        let xAxis =
-          xAxisArr->Belt.Array.get(0)->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-
-        let matchedPoint_0 =
-          matchedPoints
-          ->Belt.Array.get(0)
-          ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-        let tooltip = chart->getObj("tooltip", Js.Dict.empty())
-        if !(tooltip->Js.Json.object_->checkEmptyJson) && !(xAxis->checkEmptyJson) {
-          tooltip->refresh(matchedPoints)
-          xAxis->drawCrosshair(Js.Dict.empty()->Js.Json.object_, matchedPoint_0)
-        }
-      }
-    })
-  }
-
-let hideHighlightState = (~showTitle=false, ()) =>
-  @this
-  (point: Js.Json.t) => {
-    let charts =
-      highchartsModule
-      ->chartsToDict
-      ->getArrayFromDict("charts", [])
-      ->Js.Array2.map(getDictFromJsonObject)
-    let currentSeries = point->getDictFromJsonObject->getObj("series", Js.Dict.empty())
-    let currentChart = currentSeries->getObj("chart", Js.Dict.empty())
-    let xAxisPoint = point->getDictFromJsonObject->getFloat("x", 0.)
-    charts->Js.Array2.forEach(chart => {
-      let title = chart->getObj("title", Js.Dict.empty())
-      if !(title->Js.Json.object_->checkEmptyJson) && showTitle {
-        title->show()
-      }
-      if chart !== currentChart {
-        let series = chart->getArrayFromDict("series", [])
-        series->Js.Array2.forEach(s => {
-          let pointsArr = s->getDictFromJsonObject->getArrayFromDict("points", [])
-          let matchedPoint =
-            pointsArr
-            ->getMatchedPoint(xAxisPoint)
-            ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-          if !(matchedPoint->checkEmptyJson) {
-            matchedPoint->setState("", false)
-          }
-        })
-        let xAxis =
-          chart
-          ->getArrayFromDict("xAxis", [])
-          ->Belt.Array.get(0)
-          ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-        let tooltip = chart->getObj("tooltip", Js.Dict.empty())
-        if !(tooltip->Js.Json.object_->checkEmptyJson) {
-          tooltip->hide()
-          xAxis->hideCrosshair()
-        }
-      }
-    })
-  }
diff --git a/src/components/ThemeSelector.res b/src/components/ThemeSelector.res
deleted file mode 100644
index ddea54caa..000000000
--- a/src/components/ThemeSelector.res
+++ /dev/null
@@ -1,82 +0,0 @@
-type theme = Light | Dark
-
-type record = {
-  key: string,
-  title: string,
-  value: bool,
-}
-
-module MenuOption = {
-  @react.component
-  let make = (~text, ~onClick=?, ~isSelected=false) => {
-    let bgClass = "bg-white dark:bg-jp-gray-950 hover:bg-jp-gray-100 dark:hover:bg-jp-gray-900"
-
-    <button
-      className={`px-4 py-3 flex text-sm text-gray-700 dark:text-gray-400 justify-between cursor-pointer ${bgClass}`}
-      ?onClick>
-      {React.string(text)}
-      <div className="mt-1">
-        <Tick isSelected />
-      </div>
-    </button>
-  }
-}
-
-@react.component
-let make = (~setIsAppearancePopupOpen, ~setisBrowserTheme=?) => {
-  let (theme, setTheme) = React.useContext(ThemeProvider.themeContext)
-  let (selectedTheme, setSelectedTheme) = React.useState(_ => {
-    switch LocalStorage.getItem("theme")->Js.Nullable.toOption {
-    | Some(str) => str
-    | None => "LightTheme"
-    }
-  })
-
-  let setIsSelected = React.useCallback2(newBoolValue => {
-    setTheme(
-      if newBoolValue {
-        Dark
-      } else {
-        Light
-      },
-    )
-  }, (theme, setTheme))
-
-  let isCurrentlyDark = MatchMedia.useMatchMedia("(prefers-color-scheme: dark)")
-
-  let themeList = [
-    {key: "BrowserTheme", title: "Use Device Theme", value: isCurrentlyDark},
-    {key: "DarkTheme", title: "Dark Theme", value: true},
-    {key: "LightTheme", title: "Light Theme", value: false},
-  ]
-
-  <>
-    <div className="flex mx-3 mb-3">
-      <div className="cursor-pointer" onClick={_ => setIsAppearancePopupOpen(_ => false)}>
-        <Icon className="mr-3 mt-1" size=12 name="chevron-left" />
-      </div>
-      <div className="text-black dark:text-white"> {React.string("Appearance")} </div>
-    </div>
-    <div className="m-3 text-sm text-gray-500 dark:text-gray-400">
-      {React.string("Settings applies to this browser only")}
-    </div>
-    {themeList
-    ->Js.Array2.mapi((obj, index) => {
-      <MenuOption
-        key={index->string_of_int}
-        onClick={_ => {
-          setIsSelected(obj.value)
-          setSelectedTheme(_ => obj.key)
-          switch setisBrowserTheme {
-          | Some(setisBrowserTheme) => setisBrowserTheme(_ => obj.key === "BrowserTheme")
-          | _ => ()
-          }
-          LocalStorage.setItem("theme", obj.key)
-        }}
-        text=obj.title
-        isSelected={selectedTheme === obj.key}
-      />
-    })
-    ->React.array}
-  </>
-}
diff --git a/src/components/ThemeToggle.res b/src/components/ThemeToggle.res
deleted file mode 100644
index bf130237b..000000000
--- a/src/components/ThemeToggle.res
+++ /dev/null
@@ -1,41 +0,0 @@
-@react.component
-let make = (~setIsAppearancePopupOpen, ~setisBrowserTheme) => {
-  let (theme, setTheme) = React.useContext(ThemeProvider.themeContext)
-  let toggleSetTheme = isDark => {
-    setisBrowserTheme(_ => false)
-    switch isDark {
-    | false => setTheme(Dark)
-    | true => setTheme(Light)
-    }
-  }
-
-  React.useEffect1(() => {
-    let selectedTheme = "LightTheme"
-
-    LocalStorage.setItem("theme", selectedTheme)
-    None
-  }, [theme])
-
-  <div className="flex pr-4">
-    <div
-      className="w-full py-3 pl-4 flex text-sm text-gray-700 dark:text-gray-400 cursor-pointer bg-white dark:bg-jp-gray-950 hover:bg-jp-gray-100 dark:hover:bg-jp-gray-900 justify-between"
-      onClick={_ => toggleSetTheme(theme === Dark)}>
-      {React.string("Dark Mode")}
-      <BoolInput.BaseComponent isSelected={theme === Dark} setIsSelected={a => toggleSetTheme(a)} />
-    </div>
-    <div className="pl-2 cursor-pointer justify-center flex">
-      <ToolTip
-        tooltipWidthClass="w:24"
-        description="Appearance Advance settings"
-        toolTipFor={<Icon
-          name="settings"
-          size=15
-          onClick={_ => setIsAppearancePopupOpen(_ => true)}
-          className="text-jp-gray-700 dark:hover:text-white hover:text-jp-gray-900 "
-        />}
-        toolTipPosition=Left
-        tooltipPositioning=#absolute
-      />
-    </div>
-  </div>
-}
diff --git a/src/components/TimeInput.res b/src/components/TimeInput.res
index d37eed727..acdb8517b 100644
--- a/src/components/TimeInput.res
+++ b/src/components/TimeInput.res
@@ -37,21 +37,6 @@ let make = (
 ) => {
   let _ = position
   let _ = icon
-  let {isFirst, isLast} = React.useContext(ButtonGroupContext.buttonGroupContext)
-  let cursorClass = if isDisabled {
-    "cursor-not-allowed"
-  } else {
-    ""
-  }
-  let roundingClass = if isFirst && isLast {
-    "rounded-md"
-  } else if isFirst {
-    "rounded-l-md"
-  } else if isLast {
-    "rounded-r-md"
-  } else {
-    ""
-  }
   let value = switch input.value->Js.Json.decodeString {
   | Some(str) => str
   | None => ""
@@ -78,8 +63,6 @@ let make = (
   let onMinuteChange = React.useCallback1(changeVal(1), [changeVal])
   let onSecondsChange = React.useCallback1(changeVal(2), [changeVal])
 
-  let _className = `${roundingClass} ${cursorClass} border border-jp-gray-lightmode_steelgray border-opacity-75 h-8 w-48 font-semibold pl-3 pt-3 pb-3 text-jp-gray-900 text-lg text-opacity-75 placeholder-jp-gray-900 placeholder-opacity-25 hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-20 hover:border-jp-gray-900 hover:border-opacity-20 focus:text-opacity-100 focus:outline-none focus:border-blue-800 focus:border-opacity-100 dark:text-jp-gray-text_darktheme dark:text-opacity-75 dark:border-jp-gray-960 dark:hover:border-jp-gray-960 dark:hover:bg-jp-gray-970 dark:bg-jp-gray-lightgray_background dark:placeholder-jp-gray-text_darktheme dark:placeholder-opacity-25 dark:focus:text-opacity-100 dark:focus:border-blue-800 `
-
   <div className="h-8 max-w-min flex flex-row gap-1 text-sm">
     {switch label {
     | Some(str) => <div className="font-semibold mr-1"> {React.string(str)} </div>
diff --git a/src/components/TimeRangeInput.res b/src/components/TimeRangeInput.res
deleted file mode 100644
index d5b0eead2..000000000
--- a/src/components/TimeRangeInput.res
+++ /dev/null
@@ -1,242 +0,0 @@
-external intToFormEvent: int => ReactEvent.Form.t = "%identity"
-
-open TimeRangeInputUtils
-module BaseTimeComponent = {
-  @react.component
-  let make = (~value, ~setVal, ~fontStyle="") => {
-    let passedTime = Js.String2.slice(~from=0, ~to_=5, value)
-    let splitValue = Js.String2.split(passedTime, ":")
-    let defaultHour = switch Belt.Array.get(splitValue, 0) {
-    | Some(a) => a == "" ? "12" : a
-    | None => "01"
-    }
-    let defaultMinute = switch Belt.Array.get(splitValue, 1) {
-    | Some(a) => a
-    | None => "00"
-    }
-    let getMeridianFromValue = Js.String2.slice(~from=5, ~to_=value->Js.String2.length, value)
-    let defaultMeridian = switch getMeridianFromValue->Js.String2.length {
-    | 0 => "am"
-    | _ => getMeridianFromValue
-    }
-
-    let hoursArr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
-    let minutesArr = ["00", "15", "29", "30", "45", "59"]
-    let ampmArr = SelectBox.makeUpdatedOptions(["AM", "PM"], ["am", "pm"])
-
-    let (hours, setHours) = React.useState(() => defaultHour)
-    let (min, setMin) = React.useState(() => defaultMinute)
-    let (ampm, setAmpm) = React.useState(() => defaultMeridian)
-
-    React.useEffect3(() => {
-      setVal(`${hours}:${min}${ampm}`)
-      None
-    }, (hours, min, ampm))
-
-    let handleHourChange = ev => {
-      let target = ev->ReactEvent.Form.target
-      let value = target["value"]
-      setHours(value)
-    }
-
-    let handleMinChange = ev => {
-      let target = ev->ReactEvent.Form.target
-      let value = target["value"]
-      setMin(value)
-    }
-    let handleAmpmChange = ev => {
-      let target = ev->ReactEvent.Form.target
-      let value = target["value"]
-      setAmpm(value)
-    }
-
-    <div className="flex w-min">
-      <select
-        name="hours"
-        value={hours}
-        onChange=handleHourChange
-        className={`bg-transparent appearance-none outline-none ${fontStyle}`}>
-        {hoursArr
-        ->Js.Array2.mapi((item: string, i) => {
-          <option key={string_of_int(i)} value=item> {React.string(item)} </option>
-        })
-        ->React.array}
-      </select>
-      <span className="mx-0.5"> {React.string(":")} </span>
-      <select
-        name="minutes"
-        value={min}
-        onChange={handleMinChange}
-        className={`bg-transparent appearance-none outline-none mr-3 ${fontStyle}`}>
-        {minutesArr
-        ->Js.Array2.mapi((item: string, i) => {
-          <option key={string_of_int(i)} value=item> {React.string(item)} </option>
-        })
-        ->React.array}
-      </select>
-      <select
-        name="ampm"
-        value={ampm}
-        onChange={handleAmpmChange}
-        className={`bg-transparent appearance-none outline-none ${fontStyle}`}>
-        {ampmArr
-        ->Js.Array2.mapi((item: SelectBox.dropdownOption, i) => {
-          <option key={string_of_int(i)} value={item.value}> {React.string(item.label)} </option>
-        })
-        ->React.array}
-      </select>
-    </div>
-  }
-}
-
-let getTimein24Format = time => {
-  let temptime2 = if Js.String2.includes(time, "am") {
-    let temp = Js.String2.split(time, "am")
-    let temp2 = Js.String2.split(temp[0]->Belt.Option.getWithDefault(""), ":")
-    let mins = temp2[1]->Belt.Option.getWithDefault("")
-    let hour = temp2[0]->Belt.Option.getWithDefault("")
-    if hour == "12" {
-      Js.String2.split(`00:${mins}`, ":")
-    } else {
-      Js.String2.split(temp[0]->Belt.Option.getWithDefault(""), ":")
-    }
-  } else {
-    let temp = Js.String2.split(time, "pm")
-    let temp2 = Js.String2.split(temp[0]->Belt.Option.getWithDefault(""), ":")
-    let mins = temp2[1]->Belt.Option.getWithDefault("")
-    let hour = switch Belt.Int.fromString(temp2[0]->Belt.Option.getWithDefault("")) {
-    | Some(a) => a != 12 ? Belt.Int.toString(a + 12) : Belt.Int.toString(a)
-    | None => ""
-    }
-    Js.String2.split(`${hour}:${mins}`, ":")
-  }
-  temptime2
-}
-
-type valType = {start: string, end: string}
-external ffInputToStringInput: ReactFinalForm.fieldRenderPropsInput => ReactFinalForm.fieldRenderPropsCustomInput<
-  string,
-> = "%identity"
-let getTimein12Format = time => {
-  let arr = Js.String2.split(time, ":")
-  let hr = switch Belt.Int.fromString(arr[0]->Belt.Option.getWithDefault("00")) {
-  | Some(a) => a
-  | None => 0
-  }
-  let minutePart = arr[1]->Belt.Option.getWithDefault("00")
-  let amPm = hr >= 12 ? "pm" : "am"
-
-  let hourPart = {
-    let newHours = if hr === 0 {
-      12
-    } else if hr > 12 {
-      hr - 12
-    } else {
-      hr
-    }
-    newHours->Js.Int.toString->padZeroes2
-  }
-  `${hourPart}:${minutePart}${amPm}`
-}
-
-@react.component
-let make = (~fieldsArray: array<ReactFinalForm.fieldRenderProps>) => {
-  let customTimezoneToISOString = TimeZoneHook.useCustomTimeZoneToIsoString()
-  let isoStringToCustomTimeZone = TimeZoneHook.useIsoStringToCustomTimeZone()
-
-  let durationAmount = ReactFinalForm.useField("rule_dsl.schedule.duration_amount").input
-
-  let startDate =
-    (
-      fieldsArray[0]->Belt.Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input->ffInputToStringInput
-  let endDate =
-    (
-      fieldsArray[1]->Belt.Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input->ffInputToStringInput
-
-  let startDateValue = startDate.value
-  let endDateValue = endDate.value
-
-  let getTimefromStartandEndDate = date => {
-    let customTimeZone = isoStringToCustomTimeZone(date)
-    if Js.String2.length(date) > 0 {
-      let convertedStr = getTimein12Format(
-        `${customTimeZone.hour}:${customTimeZone.minute}:${customTimeZone.second}`,
-      )
-      convertedStr
-    } else {
-      "12:00:am"
-    }
-  }
-  let intStartTime = getTimefromStartandEndDate(startDate.value->Js.String2.make)
-  let intEndTime = getTimefromStartandEndDate(endDate.value->Js.String2.make)
-  let (val, setVal) = React.useState(_ => {
-    start: {
-      startDate.value->Js.String2.make != "" ? intStartTime : "12:00am"
-    },
-    end: {
-      endDate.value->Js.String2.make != "" ? intEndTime : "11:59pm"
-    },
-  })
-
-  let updateDuration = (stSec, endSec) => {
-    let diffOfstartAndEnd = if endSec >= stSec {
-      endSec - stSec
-    } else {
-      endSec - stSec + 86400
-    }
-    durationAmount.onChange(diffOfstartAndEnd->intToFormEvent)
-  }
-
-  let changeStart = a => {
-    let startDateTime = isoStringToCustomTimeZone(startDate.value->Js.String2.make)
-    let formattedTime = getTimein24Format(a)
-    let startDateTimeCheck = customTimezoneToISOString(
-      startDateTime.year,
-      startDateTime.month,
-      startDateTime.date,
-      formattedTime[0]->Belt.Option.getWithDefault("00"),
-      formattedTime[1]->Belt.Option.getWithDefault("00"),
-      "00",
-    )
-
-    let startTimeInSec = getDateTimeInSec(startDateTimeCheck)
-    let endTimeInSec = getDateTimeInSec(endDateValue->LogicUtils.getStringFromJson(""))
-    updateDuration(startTimeInSec, endTimeInSec)
-    startDate.onChange(startDateTimeCheck)
-    setVal(prev => {start: a, end: prev.end})
-  }
-  let changeEnd = a => {
-    let endDateTime = isoStringToCustomTimeZone(endDate.value->Js.String2.make)
-    let formattedTime = getTimein24Format(a)
-    let endDateTimeCheck = customTimezoneToISOString(
-      endDateTime.year,
-      endDateTime.month,
-      endDateTime.date,
-      formattedTime[0]->Belt.Option.getWithDefault("00"),
-      formattedTime[1]->Belt.Option.getWithDefault("00"),
-      "00",
-    )
-    let startTimeInSec = getDateTimeInSec(startDateValue->LogicUtils.getStringFromJson(""))
-    let endTimeInSec = getDateTimeInSec(endDateTimeCheck)
-    updateDuration(startTimeInSec, endTimeInSec)
-
-    endDate.onChange(endDateTimeCheck)
-    setVal(prev => {start: prev.start, end: a})
-  }
-  let time = `${val.start}  "-" ${val.end}`
-  <AddDataAttributes attributes=[("data-time-range", time)]>
-    <div className="flex p-3 w-min border border-jp-gray-500 rounded-lg">
-      <div className="flex items-center mr-2">
-        <Icon size=16 name="clock" className="" />
-      </div>
-      <div className="w-2" />
-      <BaseTimeComponent value=val.start setVal=changeStart />
-      <div className="flex items-center mr-3 ml-3">
-        <Icon size=16 name="arrow-right" className="stroke-current stroke-0" />
-      </div>
-      <BaseTimeComponent value=val.end setVal=changeEnd />
-    </div>
-  </AddDataAttributes>
-}
diff --git a/src/components/TimeRangeInputUtils.res b/src/components/TimeRangeInputUtils.res
deleted file mode 100644
index 698b93eb7..000000000
--- a/src/components/TimeRangeInputUtils.res
+++ /dev/null
@@ -1,33 +0,0 @@
-let convertIntoSec = timeArray => {
-  if timeArray->Js.Array2.length > 0 {
-    let hr =
-      timeArray[0]
-      ->Belt.Option.getWithDefault("00")
-      ->Belt.Int.fromString
-      ->Belt.Option.getWithDefault(0)
-    let min =
-      timeArray[1]
-      ->Belt.Option.getWithDefault("00")
-      ->Belt.Int.fromString
-      ->Belt.Option.getWithDefault(0)
-    hr * 60 * 60 + min * 60
-  } else {
-    0
-  }
-}
-
-let getDateTimeInSec = dateValue => {
-  let timeDateArray = dateValue->Js.String2.split("T")
-  let timeArray = timeDateArray[1]->Belt.Option.getWithDefault("00:00")->Js.String2.split(":")
-  convertIntoSec(timeArray)
-}
-
-let padZeroes2 = str => {
-  if str->Js.String2.length == 0 {
-    "00"
-  } else if str->Js.String2.length == 1 {
-    `0${str}`
-  } else {
-    str
-  }
-}
diff --git a/src/components/Timer.res b/src/components/Timer.res
deleted file mode 100644
index dd465c40e..000000000
--- a/src/components/Timer.res
+++ /dev/null
@@ -1,27 +0,0 @@
-type timerId
-@val external setInterval: (unit => unit, int) => int = "setInterval"
-@val external clearInterval: int => unit = "clearInterval"
-
-@react.component
-let make = (~initialTime) => {
-  let (_, setIsTimeOver) = React.useState(_ => false)
-  let (timer, setTimer) = React.useState(_ => initialTime)
-  let (intervalId, setIntervalId) = React.useState(_ => 0)
-  let countdown = _ => {
-    setTimer(timer => timer - 1)
-  }
-  React.useEffect1(() => {
-    if timer == 0 {
-      clearInterval(intervalId)
-      setIsTimeOver(_ => true)
-      setTimer(_ => 0)
-    } else {
-      setTimer(_ => initialTime)
-      let intervalid = setInterval(() => countdown(timer), 1000)
-      setIntervalId(_ => intervalid)
-    }
-    None
-  }, [])
-
-  <div className="mx-2"> {timer->Belt.Int.toString->React.string} </div>
-}
diff --git a/src/components/TopActions.res b/src/components/TopActions.res
deleted file mode 100644
index a5b52bf9f..000000000
--- a/src/components/TopActions.res
+++ /dev/null
@@ -1,146 +0,0 @@
-@react.component
-let make = (
-  ~selectedStage: 'a,
-  ~setSelectedStage,
-  ~enableStage,
-  ~setEnableStage,
-  ~list: array<'a>,
-  ~mapper: 'a => string,
-  ~isSubmit=true,
-  ~customNextClick=_ => (),
-  ~buttonText="Submit",
-  ~submitButton=?,
-  ~showBackButton=true,
-) => {
-  let selectedIdx = list->Js.Array2.indexOf(selectedStage)
-  let setSelectedIdx = offset => {
-    let newStageIndex = selectedIdx + offset
-    switch list[0] {
-    | Some(ele) => {
-        let newStage = list->Belt.Array.get(newStageIndex)->Belt.Option.getWithDefault(ele)
-        setSelectedStage(_ => newStage)
-      }
-    | None => ()
-    }
-  }
-
-  let backButton = if selectedIdx > 0 && showBackButton {
-    <div className="mr-2">
-      <Button
-        text="Back"
-        buttonType={isSubmit ? Secondary : Primary}
-        leftIcon={CustomIcon(
-          <Icon
-            name="back"
-            size=15
-            className="mr-1 jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
-          />,
-        )}
-        buttonSize=Small
-        onClick={_ =>
-          if selectedIdx > -1 {
-            setSelectedIdx(-1)
-            setEnableStage(_ => false)
-          }}
-      />
-    </div>
-  } else {
-    React.null
-  }
-
-  let nextButton = if selectedIdx !== Js.Array2.length(list) - 1 {
-    <Button
-      text={"Next Step"}
-      rightIcon={CustomIcon(
-        <Icon
-          name="arrow_right"
-          size=15
-          className="ml-1 jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
-        />,
-      )}
-      buttonType=Primary
-      buttonSize=Small
-      onClick={_ => {
-        customNextClick()
-        if selectedIdx != Js.Array2.length(list) - 1 {
-          setSelectedIdx(1)
-          setEnableStage(_ => false)
-        }
-      }}
-      buttonState={if enableStage {
-        Normal
-      } else {
-        Disabled
-      }}
-    />
-  } else if isSubmit {
-    switch submitButton {
-    | Some(btn) => btn
-    | None =>
-      <FormRenderer.SubmitButton
-        text=buttonText
-        customSumbitButtonStyle="w-30 !h-10"
-        toolTipPosition={TopLeft}
-        icon={Button.FontAwesome("save")}
-      />
-    }
-  } else {
-    React.null
-  }
-  let marginClass = "p-2 mb-3"
-  <div
-    className={`flex flex-row bg-white border dark:bg-jp-gray-lightgray_background border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 rounded dark:shadow-generic_shadow_dark justify-between ${marginClass}`}>
-    <div className="flex flex-row items-center gap-10">
-      {list
-      ->Js.Array2.map(mapper)
-      ->Js.Array2.mapi((item, index) => {
-        let font_highlight = if selectedIdx > index {
-          "font-semibold text-black"
-        } else {
-          "font-regular text-jp-gray-900 text-opacity-50"
-        }
-        let textColor = if selectedIdx === index {
-          "text-blue-800"
-        } else {
-          ""
-        }
-        <div
-          key={index->string_of_int}
-          className={`flex ${font_highlight} flex-row   dark:text-jp-gray-text_darktheme md:mr-5 mr-0 items-center `}>
-          <div
-            className={`mr-2
-               ${index <= selectedIdx && index != selectedIdx
-                ? "bg-green-800 text-white "
-                : selectedIdx === index
-                ? "bg-blue-800 text-white "
-                : "bg-jp-gray-600 dark:bg-jp-gray-800 text-jp-gray-200 dark:text-gray-300"}  rounded-full h-7 w-7 flex items-center justify-center`}>
-            {index <= selectedIdx && index != selectedIdx
-              ? <Icon className="align-middle" name="check" size=12 />
-              : React.string((index + 1)->string_of_int)}
-          </div>
-          <div className={`text-small px-2 ${textColor} dark:text-gray-400`}>
-            {React.string(item)}
-          </div>
-          <div className="md:pl-12 pl-2">
-            {if index == list->Js.Array2.length - 1 {
-              React.null
-            } else {
-              <Icon
-                className="align-middle text-gray-300 dark:text-gray-600"
-                size=14
-                name="chevron-right"
-              />
-            }}
-          </div>
-        </div>
-      })
-      ->React.array}
-    </div>
-    <div className="flex flex-row  text-semibold">
-      <div className="flex flex-row gap-2">
-        backButton
-        nextButton
-      </div>
-    </div>
-  </div>
-}
diff --git a/src/components/UploadImage.res b/src/components/UploadImage.res
deleted file mode 100644
index ca4a98e69..000000000
--- a/src/components/UploadImage.res
+++ /dev/null
@@ -1,50 +0,0 @@
-type t
-type append
-external toString: 't => string = "%identity"
-external toRef: 'a => 't = "%identity"
-@new external formData: unit => t = "FormData"
-@send external append: (t, string, 'a) => unit = "append"
-@send external delete: (t, string) => unit = "delete"
-@send external click: Dom.element => unit = "click"
-
-type advanceFile = {
-  file: Js.Json.t,
-  fileName: string,
-}
-
-module FancyInput = {
-  @react.component
-  let make = (~children, ~onChange, ~inputRef) =>
-    <div>
-      <input
-        type_="file" accept="image/*,.pdf" hidden=true onChange ref={inputRef->ReactDOM.Ref.domRef}
-      />
-      children
-    </div>
-}
-
-@react.component
-let make = (~buttonText, ~onFileUpload) => {
-  let inputRef = React.useRef(Js.Nullable.null)
-
-  let focusInput = () =>
-    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(input => input->click)
-  let onClick = _ => focusInput()
-
-  let onChange = evt => {
-    let target = ReactEvent.Form.target(evt)
-
-    if target["files"]->Js.Array2.length > 0 {
-      let file = target["files"]["0"]
-      onFileUpload(file, file["name"])
-    }
-  }
-
-  <div>
-    <FancyInput inputRef onChange>
-      <div className="">
-        <Button text=buttonText onClick />
-      </div>
-    </FancyInput>
-  </div>
-}
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index f0be4b3a4..0ee20d991 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -1,4 +1,3 @@
-type modeType = LiveModeDropDown | TestModeDropDown
 open UIUtils
 open HSwitchUtils
 open HSLocalStorage
@@ -111,13 +110,13 @@ let make = () => {
 
   let setUpDashboard = async () => {
     try {
-      let _wasmResult = await Window.connectorWasmInit()
-      let _profileDetails = await fetchBusinessProfiles()
-      let _connectorList = await fetchConnectorListResponse()
-      let _merchantDetails = await fetchMerchantAccountDetails()
+      let _ = await Window.connectorWasmInit()
+      let _ = await fetchBusinessProfiles()
+      let _ = await fetchConnectorListResponse()
+      let _ = await fetchMerchantAccountDetails()
 
       if featureFlagDetails.quickStart {
-        let _featureFlag = await fetchInitialEnums()
+        let _ = await fetchInitialEnums()
       }
 
       if featureFlagDetails.isLiveMode {
diff --git a/src/genericUtils/AtomsStorage.res b/src/genericUtils/AtomsStorage.res
deleted file mode 100644
index 5d297a50c..000000000
--- a/src/genericUtils/AtomsStorage.res
+++ /dev/null
@@ -1,8 +0,0 @@
-module Euler = {
-  let parentContextRecoil: Recoil.recoilAtom<string> = Recoil.atom(. "parentContext", "")
-
-  let merchantAccessRecoil: Recoil.recoilAtom<array<Js.Json.t>> = Recoil.atom(.
-    "merchantAccess",
-    [],
-  )
-}
diff --git a/src/genericUtils/BreadCrumbNavigation.res b/src/genericUtils/BreadCrumbNavigation.res
index bea7456fa..f1d05a33e 100644
--- a/src/genericUtils/BreadCrumbNavigation.res
+++ b/src/genericUtils/BreadCrumbNavigation.res
@@ -10,8 +10,6 @@ let arrowDivider =
     <Icon className="align-middle  text-jp-gray-930" size=8 name="chevron-right" />
   </span>
 
-let slashDivider = <Icon size=16 name="slash" className="text-jp-2-gray-40" />
-
 @react.component
 let make = (
   ~path: array<breadcrumb>=[],
diff --git a/src/genericUtils/UseEvent.res b/src/genericUtils/UseEvent.res
index 64eb1a7cb..355a30fc4 100644
--- a/src/genericUtils/UseEvent.res
+++ b/src/genericUtils/UseEvent.res
@@ -10,15 +10,3 @@ let useEvent0 = callback => {
     callbackRef.current()
   })
 }
-let useEvent1 = callback => {
-  let callbackRef = React.useRef(callback)
-  React.useEffect1(() => {
-    callbackRef.current = callback
-
-    None
-  }, [callback])
-
-  React.useCallback0(a => {
-    callbackRef.current(a)
-  })
-}
diff --git a/src/hooks/AnalyticsHooks.res b/src/hooks/AnalyticsHooks.res
index 69d35698b..6fa654e43 100644
--- a/src/hooks/AnalyticsHooks.res
+++ b/src/hooks/AnalyticsHooks.res
@@ -3,18 +3,6 @@ type response = Error(option<string>) | Success
 type timeType = {startTime: string, endTime: string}
 let defaultFilter = Recoil.atom(. "defaultFilter", "")
 
-let filterToKeyMapper = json => {
-  let arrjson =
-    json
-    ->getDictFromJsonObject
-    ->getArrayFromDict("queryData", [])
-    ->Belt.Array.keepMap(item => {
-      let strr = item->getDictFromJsonObject->getString("dimension", "")
-      strr == "" ? None : Some(strr)
-    })
-  arrjson
-}
-
 let handleError = (json: Js.Json.t) => {
   switch Js.Json.decodeObject(json) {
   | Some(jsonDict) => {
@@ -31,39 +19,6 @@ let handleError = (json: Js.Json.t) => {
   }
 }
 
-let useGetCalendarTime = () => {
-  let url = RescriptReactRouter.useUrl()
-  let urlSplit =
-    url.search
-    ->Js.Global.decodeURI
-    ->Js.String2.split("&")
-    ->Js.Array2.map(item => {
-      let arr = Js.String.split("=", item)
-      (
-        arr->Belt.Array.get(0)->Belt.Option.getWithDefault(""),
-        arr->Belt.Array.get(1)->Belt.Option.getWithDefault(""),
-      )
-    })
-    ->Js.Dict.fromArray
-
-  let startTime = switch Js.Dict.get(urlSplit, "startTime") {
-  | Some(a) => a
-  | None => ""
-  }
-
-  let endTime = switch Js.Dict.get(urlSplit, "endTime") {
-  | Some(b) => b
-  | None => ""
-  }
-  let calendarTime = React.useMemo2(() => {
-    {
-      startTime,
-      endTime,
-    }
-  }, (startTime, endTime))
-  calendarTime
-}
-
 let useGetFiltersData = () => {
   let (filterData, setFilterData) = React.useState(_ => None)
   let timeFilters = UrlUtils.useGetFilterDictFromUrl("")
@@ -99,88 +54,6 @@ let useGetFiltersData = () => {
   }
 }
 
-let useGetLiveFiltersData = () => {
-  let (filterData, setFilterData) = React.useState(_ => None)
-
-  let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetch()
-
-  let fetchApi = AuthHooks.useApiFetcher()
-
-  (uri, method, filterBody) => {
-    open Promise
-
-    React.useEffect1(() => {
-      let endTimeVal = Js.Date.make()->Js.Date.toISOString
-      let endTimeInMs = Js.Date.make()->Js.Date.getTime
-      let ttlTime = 1.0 *. 3600.0 *. 1000.0
-      let startTimeInMs = endTimeInMs -. ttlTime
-      let startTimeVal = Js.Date.fromFloat(startTimeInMs)->Js.Date.toISOString
-      setFilterData(_ => None)
-
-      if startTimeVal !== "" && endTimeVal !== "" {
-        fetchApi(
-          uri,
-          ~method_=method,
-          ~bodyStr=filterBody,
-          ~headers=[("QueryType", "Filter")]->Js.Dict.fromArray,
-          (),
-        )
-        ->addLogsAroundFetch(~logTitle="Filter Data Api")
-        ->thenResolve(json => setFilterData(_ => json->Some))
-        ->catch(_err => resolve())
-        ->ignore
-      }
-      None
-    }, [filterBody])
-    filterData
-  }
-}
-
-let useAnalyticsFetch = () => {
-  let fetchApi = AuthHooks.useApiFetcher()
-  let fetchChartData = (~url, ~body, ~setState, ~setDataLoading) => {
-    setDataLoading(_ => true)
-    open Promise
-    fetchApi(url, ~method_=Fetch.Post, ~bodyStr=body, ())
-    ->then(Fetch.Response.json)
-    ->then(json => {
-      // get total volume and time series and pass that on
-      let dataRaw =
-        json->getDictFromJsonObject->getJsonObjectFromDict("queryData")->getArrayFromJson([])
-
-      setState(dataRaw)
-      setDataLoading(_ => false)
-      resolve()
-    })
-    ->catch(_err => {
-      setDataLoading(_ => false)
-      resolve()
-    })
-    ->ignore
-  }
-  fetchChartData
-}
-
-let useSaveView = () => {
-  let fetchApi = AuthHooks.useApiFetcher()
-  (~bodyStr: string) => {
-    let url = "/api/ec/v1/savedView"
-
-    open Promise
-    fetchApi(url, ~bodyStr, ~method_=Post, ())
-    ->then(res => {
-      if res->Fetch.Response.status == 200 {
-        resolve(Success)
-      } else {
-        Fetch.Response.json(res)->thenResolve(json => {
-          json->handleError->Error
-        })
-      }
-    })
-    ->catch(_ => resolve(Error(Some("Something went wrong"))))
-  }
-}
-
 let useUpdateSaveView = () => {
   let fetchApi = AuthHooks.useApiFetcher()
   (~bodyStr: string, ~id: string) => {
@@ -258,50 +131,3 @@ type tabsetHookType = {
   activeTab: option<array<string>>,
   updateUrlWithPrefix: Js.Dict.t<string> => unit,
 }
-
-let useTabHooks = (~moduleName, ~segmentsOptions) => {
-  let {updateExistingKeys} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-  let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-  let (activeTav, setActiveTab) = React.useState(_ =>
-    getModuleFilters->getStrArrayFromDict(
-      `${moduleName}.tabName`,
-      [segmentsOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("")],
-    )
-  )
-  let setActiveTab = React.useMemo1(() => {
-    (str: string) => {
-      setActiveTab(_ => str->Js.String2.split(","))
-    }
-  }, [setActiveTab])
-
-  let updateUrlWithPrefix = React.useMemo1(() => {
-    (dict: Js.Dict.t<string>) => {
-      let currentDict =
-        dict
-        ->Js.Dict.entries
-        ->Belt.Array.keepMap(item => {
-          let (key, value) = item
-          if value !== "" {
-            Some((`${moduleName}.${key}`, value))
-          } else {
-            None
-          }
-        })
-      updateExistingKeys(currentDict->Js.Dict.fromArray)
-    }
-  }, [updateExistingKeys])
-  let activeTab = React.useMemo1(() => {
-    Some(
-      getModuleFilters
-      ->getOptionStrArrayFromDict(`${moduleName}.tabName`)
-      ->Belt.Option.getWithDefault(activeTav)
-      ->Js.Array2.filter(item => item !== ""),
-    )
-  }, [getModuleFilters])
-
-  {
-    setActiveTab,
-    activeTab,
-    updateUrlWithPrefix,
-  }
-}
diff --git a/src/hooks/AuthHooks.res b/src/hooks/AuthHooks.res
index 5d60501df..7768a85be 100644
--- a/src/hooks/AuthHooks.res
+++ b/src/hooks/AuthHooks.res
@@ -1,9 +1,4 @@
 open Promise
-open LogicUtils
-@val @scope(("window", "localStorage"))
-external clearLocalStorage: unit => unit = "clear"
-@val @scope(("window", "location")) external pathName: string = "pathname"
-@val @scope(("window", "location")) external hostname: string = "hostname"
 type sessionStorage = {
   getItem: (. string) => Js.Nullable.t<string>,
   setItem: (. string, string) => unit,
@@ -14,140 +9,28 @@ type sessionStorage = {
 
 external dictToObj: Js.Dict.t<'a> => {..} = "%identity"
 @val external atob: string => string = "atob"
-let getAgentId = _ => {
-  switch LocalStorage.getItem("agentId")->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => ""
-  }
-}
-
-let getKey = keyType => {
-  switch LocalStorage.getItem(keyType)->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => "__failed"
-  }
-}
-let getHeadersJson = (
-  ~uri,
-  ~headers=Js.Dict.empty(),
-  ~isLogin,
-  key,
-  ~requestId,
-  ~storageKey: option<string>,
-  (),
-) => {
-  let isLsp = uri->Js.String2.includes("dashboard") ? false : true
-  let isFirstVerify = uri->Js.String2.includes("lspotp/verify") ? true : false
-  let isTriggerAPI = uri->Js.String2.includes("lspotp/trigger") ? true : false
-
-  let localStorageData = switch storageKey {
-  | Some(key) =>
-    switch LocalStorage.getItem(key)->Js.Nullable.toOption {
-    | Some(str) => str->safeParse->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty())
-    | None => Js.Dict.empty()
-    }
-  | None => Js.Dict.empty()
-  }
-
-  let sessionToken = switch LocalStorage.getItem("sessionToken")->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => ""
-  }
-  let merchantId = switch LocalStorage.getItem("merchant-id")->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => ""
-  }
 
-  let headerObj = headers
-
-  switch isLsp {
-  | true =>
-    if isFirstVerify {
-      Js.Dict.set(headerObj, "X-RequestId", requestId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-App-Id", merchantId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-Merchant-Id", merchantId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-Agent-Session-Token", sessionToken->Js.Json.string)
-      Js.Dict.set(
-        headerObj,
-        "X-Device-Token",
-        key
-        ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
-        ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-        ->Identity.genericTypeToJson,
-      )
-    } else {
-      Js.Dict.set(headerObj, "X-RequestId", requestId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-App-Id", merchantId->Js.Json.string)
-      Js.Dict.set(
-        headerObj,
-        "X-Session-Token",
-        localStorageData->getString("sessionToken", "")->Js.Json.string,
-      )
-      Js.Dict.set(headerObj, "X-Merchant-Id", merchantId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-Agent-Session-Token", sessionToken->Js.Json.string)
-      Js.Dict.set(headerObj, "X-User-Id", localStorageData->getString("userId", "")->Js.Json.string)
-      if isTriggerAPI {
-        Js.Dict.set(
-          headerObj,
-          "X-Device-Token",
-          key
-          ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
-          ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-          ->Identity.genericTypeToJson,
-        )
-      }
-    }
-  | false => {
-      Js.Dict.set(headerObj, "Content-Type", "application/json"->Js.Json.string)
-      if sessionToken !== "" {
-        Js.Dict.set(headerObj, "Session-Token", sessionToken->Js.Json.string)
-      }
-      if isLogin {
-        Js.Dict.set(
-          headerObj,
-          "X-Device-Token",
-          key
-          ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
-          ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-          ->Identity.genericTypeToJson,
-        )
-      }
-    }
-  }
-
-  headerObj->Js.Json.object_
-}
-
-let getHeaders = (~uri=?, ~headers=Js.Dict.empty(), ()) => {
+let getHeaders = (~uri, ~headers, ()) => {
   let hyperSwitchToken = LocalStorage.getItem("login")->Js.Nullable.toOption
-  let isMixpanel = switch uri {
-  | Some(uri) => uri->Js.String2.includes("mixpanel") ? true : false
-  | None => false
-  }
-  switch isMixpanel {
-  | true =>
+  let isMixpanel = uri->Js.String2.includes("mixpanel")
+
+  if isMixpanel {
     let headerObj = {
       "Content-Type": "application/x-www-form-urlencoded",
       "accept": "application/json",
     }
     Fetch.HeadersInit.make(headerObj)
-
-  | false =>
+  } else {
     let headerObj =
       headers->Js.Dict.get("api-key")->Belt.Option.getWithDefault("")->Js.String2.length > 0
-        ? true
-        : false
 
-    switch headerObj {
-    | true => {
-        let headerObj = {
-          "Content-Type": "application/json",
-          "api-key": headers->Js.Dict.get("api-key")->Belt.Option.getWithDefault(""),
-        }
-        Fetch.HeadersInit.make(headerObj)
+    if headerObj {
+      let headerObj = {
+        "Content-Type": "application/json",
+        "api-key": headers->Js.Dict.get("api-key")->Belt.Option.getWithDefault(""),
       }
-
-    | false =>
+      Fetch.HeadersInit.make(headerObj)
+    } else {
       switch hyperSwitchToken {
       | Some(token) =>
         if token !== "" {
@@ -175,86 +58,6 @@ let getHeaders = (~uri=?, ~headers=Js.Dict.empty(), ()) => {
   }
 }
 
-let getPublicKey = ""
-
-let getKid = ""
-
-let handleForbidden = (resp, showToast: ToastState.showToastFn, isJuspay) => {
-  resp
-  ->Fetch.Response.clone
-  ->Fetch.Response.json
-  ->then(json => {
-    open Belt.Option
-
-    json
-    ->Js.Json.decodeObject
-    ->flatMap(dict => {
-      let messageJson = switch dict->Js.Dict.get("errorMessage") {
-      | Some(msg) =>
-        isJuspay && msg === "Unauthorized. IP address is not allowed"->Js.Json.string
-          ? `Please Connect to VPN`->Js.Json.string->Some
-          : `Access Denied`->Js.Json.string->Some
-      | None => dict->Js.Dict.get("errorMessage")
-      }
-      messageJson->flatMap(Js.Json.decodeString)
-    })
-    ->getWithDefault("Forbidden")
-    ->resolve
-  })
-  ->catch(_ => resp->Fetch.Response.clone->Fetch.Response.text)
-  ->then(message => {
-    showToast(~toastType=ToastError, ~message, ~autoClose=false, ())
-
-    resolve(resp)
-  })
-}
-
-let addResellerKey = (bodyStr, optionalMerchantId) => {
-  try {
-    let bodyJson = bodyStr->safeParse
-    switch Js.Json.classify(bodyJson) {
-    | Js.Json.JSONObject(bodyDict) =>
-      switch optionalMerchantId {
-      | Some(merchantId) =>
-        bodyDict->Js.Dict.set("merchantId", merchantId->Js.Json.string)
-
-        bodyDict->Js.Json.object_->Js.Json.stringify
-      | _ => bodyStr
-      }
-
-    | Js.Json.JSONArray(bodyArr) =>
-      let newBodyArr = Js.Array.map(ob => {
-        let optDict = Js.Json.decodeObject(ob->Js.Json.stringify->safeParse)
-
-        switch optDict {
-        | Some(dict) =>
-          switch optionalMerchantId {
-          | Some(merchantId) =>
-            let mDict = Js.Dict.empty()
-            Js.Dict.set(mDict, "merchantId", [merchantId->Js.Json.string]->Js.Json.array)
-            dict->Js.Dict.set("filters", mDict->Js.Json.object_)
-            dict->Js.Json.object_
-          | _ => ob
-          }
-        | None => ob
-        }
-      }, bodyArr)
-      newBodyArr->Js.Json.array->Js.Json.stringify
-    | Js.Json.JSONNull =>
-      switch optionalMerchantId {
-      | Some(merchantId) =>
-        let bodyDict = Js.Dict.empty()
-        bodyDict->Js.Dict.set("merchantId", merchantId->Js.Json.string)
-        bodyDict->Js.Json.object_->Js.Json.stringify
-      | _ => bodyStr
-      }
-    | _ => bodyStr
-    }
-  } catch {
-  | _ => bodyStr
-  }
-}
-
 @val @scope(("window", "location"))
 external hostName: string = "host"
 
@@ -264,10 +67,6 @@ type betaEndpoint = {
   replaceStr: string,
 }
 
-let getUriModifier = uri => {
-  uri
-}
-
 let useApiFetcher = () => {
   let (authStatus, setAuthStatus) = React.useContext(AuthInfoProvider.authStatusContext)
 
@@ -327,9 +126,9 @@ let useApiFetcher = () => {
             if resp->Fetch.Response.status === 401 {
               switch authStatus {
               | LoggedIn(_) =>
-                clearLocalStorage()
+                LocalStorage.clear()
                 setAuthStatus(LoggedOut)
-                RescriptReactRouter.push("/home")
+                RescriptReactRouter.push("/login")
                 resolve(resp)
 
               | _ => resolve(resp)
diff --git a/src/hooks/DateRefreshHooks.res b/src/hooks/DateRefreshHooks.res
index 3e74266af..dc949efd4 100644
--- a/src/hooks/DateRefreshHooks.res
+++ b/src/hooks/DateRefreshHooks.res
@@ -25,7 +25,7 @@ let useConstructQueryOnBasisOfOpt = () => {
         | "next_month" => NextMonth
         | st => {
             let arr = st->Js.String2.split("_")
-            let _future = arr[0]->Belt.Option.getWithDefault("") == "next"
+            let _ = arr[0]->Belt.Option.getWithDefault("") == "next"
             let anchor = arr[2]->Belt.Option.getWithDefault("")
             let val = arr[1]->Belt.Option.getWithDefault("")
             switch anchor {
diff --git a/src/hooks/ModalsState.res b/src/hooks/ModalsState.res
index 2d426e522..21bbc62ec 100644
--- a/src/hooks/ModalsState.res
+++ b/src/hooks/ModalsState.res
@@ -5,19 +5,6 @@ type modalProps = {
   closeOnClickOutside: bool,
 }
 
-let makeModalProps = (~title, ~getContent, ~closeOnClickOutside=false, ()) => {
-  title,
-  getContent,
-  closeOnClickOutside,
-}
-
 let defaultOpenModals: array<modalProps> = []
 
 let openModals = Recoil.atom(. "openModals", defaultOpenModals)
-
-let useShowModal = () => {
-  let setOpenModals = Recoil.useSetRecoilState(openModals)
-  React.useCallback1(modalProps => {
-    setOpenModals(.prevArr => prevArr->Js.Array2.concat([modalProps]))
-  }, [setOpenModals])
-}
diff --git a/src/hooks/NewThemeHooks.res b/src/hooks/NewThemeHooks.res
deleted file mode 100644
index 82ea0756a..000000000
--- a/src/hooks/NewThemeHooks.res
+++ /dev/null
@@ -1,42 +0,0 @@
-let useNewThemeCheckFromEvent = () => {
-  let (eventTheme, setEventTheme) = React.useState(_ => None)
-
-  React.useEffect0(() => {
-    let setEventThemeVal = (eventName, dict) => {
-      if eventName === "AuthenticationDetails" {
-        let payloadDict = dict->Js.Dict.get("payload")->Belt.Option.flatMap(Js.Json.decodeObject)
-        let theme =
-          payloadDict->Belt.Option.mapWithDefault("", finalDict =>
-            LogicUtils.getString(finalDict, "newTheme", "")
-          )
-        setEventTheme(_ => Some(theme))
-      } else if eventName == "newThemeToggle" {
-        let theme = LogicUtils.getString(dict, "payload", "")
-        setEventTheme(_ => Some(theme))
-      } else {
-        Js.log2(`Event name is ${eventName}`, dict)
-      }
-    }
-
-    let handleEventMessage = (ev: Dom.event) => {
-      let optionalDict = HandlingEvents.getEventDict(ev)
-      switch optionalDict {
-      | Some(dict) => {
-          let optionalEventName =
-            dict->Js.Dict.get("eventType")->Belt.Option.flatMap(Js.Json.decodeString)
-          switch optionalEventName {
-          | Some(eventName) => setEventThemeVal(eventName, dict)
-          | None => Js.log2("Event Data is not found", dict)
-          }
-        }
-
-      | None => ()
-      }
-    }
-
-    Window.addEventListener("message", handleEventMessage)
-    Some(() => Window.removeEventListener("message", handleEventMessage))
-  })
-
-  eventTheme
-}
diff --git a/src/screens/analyticsScreens/AnalyticsCommonComponents.res b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
deleted file mode 100644
index e0af3a513..000000000
--- a/src/screens/analyticsScreens/AnalyticsCommonComponents.res
+++ /dev/null
@@ -1,2809 +0,0 @@
-@get external keyCode: 'a => int = "keyCode"
-
-type window
-@val external window: window = "window"
-@scope("window") @val external parent: window = "parent"
-
-open LogicUtils
-open Promise
-type modalView = SavedList | SaveNew
-module SavedViewTable = {
-  @react.component
-  let make = (~actualData, ~modifiedTableEntity) => {
-    let (offset, setOffset) = React.useState(_ => 0)
-    let searchText = ReactFinalForm.useField("searchTable").input.value
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    let actualData = React.useMemo2(() => {
-      actualData->SaveViewEntity.filterBySearchText(searchText)
-    }, (searchText, actualData))
-    <>
-      <FormRenderer.FieldRenderer field=searchTable fieldWrapperClass="w-64 sm:ml-0 ml-2" />
-      <LoadedTable
-        actualData
-        title="Saved Filters"
-        entity=modifiedTableEntity
-        hideTitle=true
-        offset
-        setOffset
-        currrentFetchCount={actualData->Js.Array2.length}
-        totalResults={actualData->Js.Array2.length}
-        resultsPerPage=15
-        ignoreHeaderBg=true
-      />
-    </>
-  }
-}
-
-module AnalyticsSaveViewNew = {
-  @react.component
-  let make = (
-    ~moduleName: string,
-    ~tabNames: array<string>,
-    ~startTimeFilterKey,
-    ~endTimeFilterKey,
-  ) => {
-    let isMobileView = MatchMedia.useMobileChecker()
-    let {updateExistingKeys} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let deleteSaveView = AnalyticsHooks.useDeleteSaveView()
-
-    let {
-      savedViewList,
-      setRefetchCounter,
-      isDefaultSaveViewPresent,
-      defaultSaveView,
-      appliedSaveView,
-      applySaveView,
-      setAppliedSaveView,
-    } = React.useContext(SaveViewContext.defaultContext)
-    let urlDict = UrlUtils.useGetFilterDictFromUrl("")
-    let url = RescriptReactRouter.useUrl()
-    let showToast = ToastState.useShowToast()
-    let saveView = AnalyticsHooks.useSaveView()
-    let updateSaveView = AnalyticsHooks.useUpdateSaveView()
-    let (showModal, setShowModal) = React.useState(_ => false)
-    let (selectedView, setSelectedView) = React.useState(_ => "")
-    let (editView, setEditView) = React.useState(_ => appliedSaveView)
-    let filterDict = Js.Dict.empty()
-    tabNames->Js.Array2.forEach(key => {
-      filterDict->Js.Dict.set(key, "")
-    })
-    let dateCreatedObject =
-      AnalyticsUtils.getDateCreatedObject()
-      ->Js.Dict.entries
-      ->Js.Array2.map(entry => {
-        let (key, value) = entry
-        let value = value->getStringFromJson("")
-        (key, value)
-      })
-      ->Js.Dict.fromArray
-
-    let defaultSearchDict = DictionaryUtils.mergeDicts([dateCreatedObject, filterDict])
-
-    let disableSaveButton = React.useMemo2(() => {
-      let excludeKeys = appliedSaveView.includeDateRange
-        ? []
-        : [startTimeFilterKey, endTimeFilterKey]
-      let dict1 = SaveViewEntity.getFilterDict(
-        ~url=appliedSaveView.url,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-      let dict2 = SaveViewEntity.getFilterDict(
-        ~url=url.search->Js.Global.decodeURI,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-
-      DictionaryUtils.equalDicts(dict1, dict2)
-    }, (url.search, appliedSaveView))
-
-    let options = React.useMemo1(() => {
-      [
-        {
-          let opt: SelectBox.dropdownOption = {
-            label: "Base View",
-            value: "baseView",
-            icon: CustomRightIcon(
-              <Button
-                text=""
-                leftIcon={CustomIcon(<Icon name="new-edit" size=16 />)}
-                showBorder=false
-                customButtonStyle="invisible"
-                buttonType={NonFilled}
-                buttonSize={XSmall}
-                buttonVariant=Rounded
-              />,
-            ),
-          }
-          opt
-        },
-      ]->Js.Array2.concat(
-        savedViewList->Js.Array2.map(ele => {
-          let opt: SelectBox.dropdownOption = {
-            label: ele.name,
-            value: ele.name,
-            textColor: "group",
-            icon: CustomRightIcon(
-              <Button
-                text=""
-                leftIcon={CustomIcon(<Icon name="new-edit" size=16 />)}
-                showBorder=false
-                customButtonStyle="invisible group-hover:visible p-2"
-                onClick={ev => {
-                  ev->ReactEvent.Mouse.stopPropagation
-                  ev->ReactEvent.Mouse.preventDefault
-                  setEditView(_ => ele)
-                  setShowModal(_ => true)
-                }}
-                buttonType={NonFilled}
-                buttonSize={XSmall}
-                buttonVariant=Rounded
-              />,
-            ),
-          }
-          opt
-        }),
-      )
-    }, [savedViewList->Array.joinWith(",")])
-
-    let modalHeading = "Save Dashboard View"
-    let modalHeadingDescription = ""
-    let submitButtonText = editView.id === "" ? "Save Dashboard View" : "Update Dashboard View"
-    let submitButtonIcon = "new-save"
-    let loadingText = "Saving..."
-
-    let saveView = bodyDict => {
-      let name = bodyDict->getString("name", "Default View")
-      if name === appliedSaveView.name {
-        updateSaveView(
-          ~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify,
-          ~id=appliedSaveView.id,
-        )
-      } else {
-        saveView(~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify)
-      }
-      ->then(response => {
-        switch response {
-        | Success => {
-            showToast(~message="Saved Successfully", ~toastType=ToastSuccess, ())
-            setRefetchCounter(prev => prev + 1)
-            setShowModal(_ => false)
-          }
-
-        | Error(errorMessage) => {
-            let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-            showToast(~message=errorMessage, ~toastType=ToastError, ())
-          }
-        }
-        Js.Nullable.null->resolve
-      })
-      ->catch(_err => {
-        Js.Nullable.null->resolve
-      })
-    }
-
-    let saveViewFn = bodyDict => {
-      if isDefaultSaveViewPresent {
-        let bodyStr =
-          [("isDefault", false->Js.Json.boolean)]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-          ->Js.Json.stringify
-        updateSaveView(~bodyStr, ~id=defaultSaveView.id)
-        ->then(response => {
-          switch response {
-          | Success => saveView(bodyDict)
-          | Error(errorMessage) => {
-              let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-              showToast(~message=errorMessage, ~toastType=ToastError, ())
-              Js.Nullable.null->resolve
-            }
-          }
-        })
-        ->catch(_err => {
-          Js.Nullable.null->resolve
-        })
-      } else {
-        saveView(bodyDict)
-      }
-    }
-
-    let initialValues = React.useMemo1(() => {
-      if editView.id === "" {
-        Js.Json.null
-      } else {
-        let selectors = []
-        if editView.includeDateRange {
-          selectors->Js.Array2.push("Save with current timestamp"->Js.Json.string)->ignore
-        }
-        if editView.isDefault {
-          selectors->Js.Array2.push("Make this view Default"->Js.Json.string)->ignore
-        }
-        let initialValues =
-          [
-            ("name", editView.name->Js.Json.string),
-            ("description", editView.description->Js.Json.string),
-            ("selectors", selectors->Js.Json.array),
-          ]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-        initialValues
-      }
-    }, [editView])
-
-    let validate = (values: Js.Json.t) => {
-      let errors = Js.Dict.empty()
-      let valuesDict = values->getDictFromJsonObject
-
-      ["name"]->Js.Array2.forEach(key => {
-        let value = valuesDict->getString(key, "")
-        if value == "" {
-          errors->Js.Dict.set(key, `${key->capitalizeString} Required`->Js.Json.string)
-        }
-        if (
-          savedViewList->Js.Array2.map(ele => ele.name)->Js.Array2.includes(value) &&
-            editView.id === ""
-        ) {
-          errors->Js.Dict.set(key, `${key->capitalizeString} already exits`->Js.Json.string)
-        }
-      })
-
-      errors->Js.Json.object_
-    }
-
-    let onSubmit = (values, _) => {
-      let valuesDict = values->getDictFromJsonObject
-
-      let name = valuesDict->getString("name", "")
-      let description = valuesDict->getString("description", "")
-      let selectors = valuesDict->getStrArrayFromDict("selectors", [])
-      let isDefault = selectors->Js.Array2.includes("Make this view Default")
-      let includeDateRange = selectors->Js.Array2.includes("Save with current timestamp")
-      let url = {
-        urlDict
-        ->Js.Dict.entries
-        ->Belt.Array.keepMap(entry => {
-          let (key, value) = entry
-          let value = switch value->Js.Json.classify {
-          | JSONFalse => "false"
-          | JSONTrue => "true"
-          | JSONNull => ""
-          | JSONString(string) => string
-          | JSONNumber(float) => float->Belt.Float.toString
-          | JSONObject(_) => ""
-          | JSONArray(array) => `[${array->Js.Array2.toString}]`
-          }
-          if (key !== "startTime" && key !== "endTime") || includeDateRange {
-            Some(`${key}=${value}`)
-          } else {
-            None
-          }
-        })
-        ->Js.Array2.joinWith("&")
-      }
-
-      let bodyDict = Js.Dict.empty()
-      bodyDict->Js.Dict.set("tab", moduleName->Js.Json.string)
-      bodyDict->Js.Dict.set("url", url->Js.Json.string)
-      bodyDict->Js.Dict.set("name", name->Js.Json.string)
-      bodyDict->Js.Dict.set("description", description->Js.Json.string)
-      if includeDateRange {
-        bodyDict->Js.Dict.set("includeDateRange", includeDateRange->Js.Json.boolean)
-      }
-      if isDefault {
-        bodyDict->Js.Dict.set("isDefault", isDefault->Js.Json.boolean)
-      }
-      saveViewFn(bodyDict)
-    }
-
-    let handleDelete = () => {
-      deleteSaveView(~id=editView.id)
-      ->then(response => {
-        switch response {
-        | Success => {
-            showToast(~message=`${editView.name} deleted Successfully`, ~toastType=ToastSuccess, ())
-            setEditView(_ => defaultSaveView)
-            setRefetchCounter(prev => prev + 1)
-            setShowModal(_ => false)
-          }
-
-        | Error(errorMessage) => {
-            let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-            showToast(~message=errorMessage, ~toastType=ToastError, ())
-          }
-        }
-        Js.Nullable.null->resolve
-      })
-      ->catch(_err => {
-        Js.Nullable.null->resolve
-      })
-      ->ignore
-    }
-
-    let modalWidth = "sm:w-128"
-
-    let savedViewInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "savedView",
-      onBlur: _ev => (),
-      onChange: ev => {
-        let appliedVal = ev->Identity.formReactEventToString
-        if appliedVal === "baseView" {
-          updateExistingKeys(defaultSearchDict)
-          setAppliedSaveView(_ => SaveViewEntity.defaultSaveView)
-        } else {
-          switch savedViewList->Js.Array2.find(ele => ele.name === appliedVal) {
-          | Some(view) => applySaveView(view)
-          | None => ()
-          }
-        }
-        setSelectedView(_ => appliedVal)
-      },
-      onFocus: _ev => (),
-      value: selectedView->Js.Json.string,
-      checked: true,
-    }
-    let saveViewButton = {
-      <Button
-        text={isMobileView ? "" : "Save View"}
-        leftIcon=FontAwesome("new-save")
-        buttonState={disableSaveButton ? Disabled : Normal}
-        buttonType={Dropdown}
-        onClick={_ => {
-          setShowModal(_ => true)
-        }}
-        customIconMargin={isMobileView ? "mr-1" : "ml-1"}
-      />
-    }
-    <div>
-      <Portal to="savedView">
-        <div className="flex gap-2">
-          {if savedViewList->Js.Array2.length > 0 {
-            <SelectBox.BaseDropdown
-              allowMultiSelect=false
-              hideMultiSelectButtons=true
-              buttonText="Analytics View"
-              defaultLeftIcon=FontAwesome("new-save")
-              input={savedViewInput}
-              options
-              deselectDisable=true
-              fullLength=true
-              showCustomBtnAtEnd=true
-              customButtonStyle="w-46 justify-between"
-              customButton={<Button
-                text={"Create new view"}
-                leftIcon=CustomIcon(
-                  <Icon name="new-save" className="stroke-jp-2-light-primary-600" size=16 />,
-                )
-                buttonState={disableSaveButton ? Disabled : Normal}
-                buttonType={FilterAdd}
-                onClick={_ => {
-                  setEditView(_ => defaultSaveView)
-                  setShowModal(_ => true)
-                }}
-                customButtonStyle="w-full"
-                customIconMargin={isMobileView ? "mr-1" : "ml-1"}
-              />}
-            />
-          } else {
-            saveViewButton
-          }}
-        </div>
-        <Modal
-          modalHeading
-          modalHeadingDescription
-          showModal
-          closeOnOutsideClick=true
-          setShowModal
-          modalHeadingClass="text-jp-2-light-gray-2000"
-          modalClass={`w-full ${modalWidth} overflow-auto p mx-auto`}
-          childClass="p-6">
-          <Form
-            onSubmit
-            validate
-            initialValues
-            formClass="flex flex-col gap-4 w-full relative overflow-auto">
-            {<>
-              <FormRenderer.FieldRenderer
-                field={AnalyticsUtils.nameViewField(~isDisabled={editView.id !== ""})}
-              />
-              <FormRenderer.FieldRenderer field=AnalyticsUtils.descriptionField />
-              <FormRenderer.FieldRenderer
-                field={AnalyticsUtils.selectorsField(~isHorizontal=true)} labelClass="hidden"
-              />
-            </>}
-            <div className="border-t">
-              <div className={`flex flex-row justify-end pt-6 gap-2`}>
-                <UIUtils.RenderIf condition={editView.id !== ""}>
-                  <Button
-                    buttonType=SecondaryFilled
-                    buttonSize=Small
-                    text=""
-                    rightIcon={FontAwesome("new-trash")}
-                    onClick={_ => handleDelete()}
-                  />
-                </UIUtils.RenderIf>
-                <FormRenderer.SubmitButton
-                  text=submitButtonText
-                  loadingText
-                  buttonType=Primary
-                  icon=FontAwesome(submitButtonIcon)
-                  buttonSize={isMobileView ? XSmall : Small}
-                />
-              </div>
-            </div>
-          </Form>
-        </Modal>
-      </Portal>
-      <PortalCapture key="filter" name="filter" customStyle="flex items-center" />
-    </div>
-  }
-}
-
-module AnalyticsSaveView = {
-  @react.component
-  let make = (
-    ~moduleName: string,
-    ~tabNames: array<string>,
-    ~startTimeFilterKey,
-    ~endTimeFilterKey,
-  ) => {
-    let isMobileView = MatchMedia.useMobileChecker()
-    let {updateExistingKeys, filterValueJson} = React.useContext(
-      AnalyticsUrlUpdaterContext.urlUpdaterContext,
-    )
-
-    let (startTime, endTime) = React.useMemo1(() => {
-      (
-        filterValueJson->getString(startTimeFilterKey, ""),
-        filterValueJson->getString(endTimeFilterKey, ""),
-      )
-    }, [filterValueJson])
-
-    let dateFilterUrl = React.useMemo2(() => {
-      `&${startTimeFilterKey}=${startTime}&${endTimeFilterKey}=${endTime}`
-    }, (startTime, endTime))
-
-    let {
-      savedViewList,
-      refetchCounter,
-      setRefetchCounter,
-      isDefaultSaveViewPresent,
-      defaultSaveView,
-      appliedSaveView,
-      applySaveView,
-      setAppliedSaveView,
-    } = React.useContext(SaveViewContext.defaultContext)
-    let urlDict = UrlUtils.useGetFilterDictFromUrl("")
-    let url = RescriptReactRouter.useUrl()
-    let showToast = ToastState.useShowToast()
-    let saveView = AnalyticsHooks.useSaveView()
-    let updateSaveView = AnalyticsHooks.useUpdateSaveView()
-    let (showModal, setShowModal) = React.useState(_ => false)
-    let (newSave, setNewSave) = React.useState(_ => true)
-    let (modalView, setModalView) = React.useState(_ => SavedList)
-    let filterDict = Js.Dict.empty()
-    tabNames->Js.Array2.forEach(key => {
-      filterDict->Js.Dict.set(key, "")
-    })
-    let dateCreatedObject =
-      AnalyticsUtils.getDateCreatedObject()
-      ->Js.Dict.entries
-      ->Js.Array2.map(entry => {
-        let (key, value) = entry
-        let value = value->getStringFromJson("")
-        (key, value)
-      })
-      ->Js.Dict.fromArray
-
-    let defaultSearchDict = DictionaryUtils.mergeDicts([dateCreatedObject, filterDict])
-
-    let disableSaveButton = React.useMemo2(() => {
-      let excludeKeys = appliedSaveView.includeDateRange
-        ? []
-        : [startTimeFilterKey, endTimeFilterKey]
-      let dict1 = SaveViewEntity.getFilterDict(
-        ~url=appliedSaveView.url,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-      let dict2 = SaveViewEntity.getFilterDict(
-        ~url=url.search->Js.Global.decodeURI,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-
-      DictionaryUtils.equalDicts(dict1, dict2)
-    }, (url.search, appliedSaveView))
-
-    let saveViewName = React.useMemo1(() => {
-      appliedSaveView.name
-    }, [appliedSaveView])
-
-    let actualData = React.useMemo1(() => {
-      savedViewList->Js.Array2.map(Js.Nullable.return)
-    }, [savedViewList])
-
-    let modifiedTableEntity = React.useMemo4(() => {
-      ...SaveViewEntity.saveFilterListEntity,
-      getCell: SaveViewEntity.getCell(
-        dateFilterUrl,
-        setRefetchCounter,
-        isDefaultSaveViewPresent,
-        defaultSaveView,
-        setShowModal,
-        applySaveView,
-      ),
-    }, (refetchCounter, isDefaultSaveViewPresent, defaultSaveView, dateFilterUrl))
-
-    let (
-      modalHeading,
-      modalHeadingDescription,
-      submitButtonText,
-      submitButtonIcon,
-      loadingText,
-    ) = switch modalView {
-    | SavedList => (
-        "Load Dashboard View",
-        "Load a set of applied filters, selected dimensions and data mode from your saved views",
-        "Load Base View",
-        "undo-alt",
-        "Loading...",
-      )
-    | SaveNew => (
-        "Save Dashboard View",
-        "You can save the configuration of the current dashboard as a default view or with a timestamp and load it whenever needed.",
-        newSave ? "Save New View" : "Update View",
-        "plus",
-        "Saving...",
-      )
-    }
-
-    let saveView = bodyDict => {
-      let name = bodyDict->getString("name", "Default View")
-      if name === appliedSaveView.name {
-        updateSaveView(
-          ~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify,
-          ~id=appliedSaveView.id,
-        )
-      } else {
-        saveView(~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify)
-      }
-      ->then(response => {
-        switch response {
-        | Success => {
-            showToast(~message="Saved Successfully", ~toastType=ToastSuccess, ())
-            setRefetchCounter(prev => prev + 1)
-            setShowModal(_ => false)
-          }
-
-        | Error(errorMessage) => {
-            let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-            showToast(~message=errorMessage, ~toastType=ToastError, ())
-          }
-        }
-        Js.Nullable.null->resolve
-      })
-      ->catch(_err => {
-        Js.Nullable.null->resolve
-      })
-    }
-
-    let saveViewFn = bodyDict => {
-      if isDefaultSaveViewPresent {
-        let bodyStr =
-          [("isDefault", false->Js.Json.boolean)]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-          ->Js.Json.stringify
-        updateSaveView(~bodyStr, ~id=defaultSaveView.id)
-        ->then(response => {
-          switch response {
-          | Success => saveView(bodyDict)
-          | Error(errorMessage) => {
-              let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-              showToast(~message=errorMessage, ~toastType=ToastError, ())
-              Js.Nullable.null->resolve
-            }
-          }
-        })
-        ->catch(_err => {
-          Js.Nullable.null->resolve
-        })
-      } else {
-        saveView(bodyDict)
-      }
-    }
-
-    let initialValues = React.useMemo1(() => {
-      if appliedSaveView.name === "Default View" {
-        Js.Json.null
-      } else {
-        let selectors = []
-        if appliedSaveView.includeDateRange {
-          selectors->Js.Array2.push("Save with current time interval"->Js.Json.string)->ignore
-        }
-        if appliedSaveView.isDefault {
-          selectors->Js.Array2.push("Make this view Default"->Js.Json.string)->ignore
-        }
-        let initialValues =
-          [
-            ("name", appliedSaveView.name->Js.Json.string),
-            ("description", appliedSaveView.description->Js.Json.string),
-            ("selectors", selectors->Js.Json.array),
-          ]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-        initialValues
-      }
-    }, [appliedSaveView])
-
-    let validate = (values: Js.Json.t) => {
-      let errors = Js.Dict.empty()
-      let valuesDict = values->getDictFromJsonObject
-
-      switch modalView {
-      | SaveNew =>
-        let name = valuesDict->getString("name", "Default View")
-        setNewSave(_ => name !== appliedSaveView.name)
-        ["name"]->Js.Array2.forEach(key => {
-          let value = valuesDict->getString(key, "")
-          if value == "" {
-            errors->Js.Dict.set(key, `${key->capitalizeString} Required`->Js.Json.string)
-          }
-        })
-      | SavedList => ()
-      }
-
-      errors->Js.Json.object_
-    }
-
-    let onSubmit = (values, _) => {
-      let valuesDict = values->getDictFromJsonObject
-
-      switch modalView {
-      | SaveNew => {
-          let name = valuesDict->getString("name", "")
-          let description = valuesDict->getString("description", "")
-          let selectors = valuesDict->getStrArrayFromDict("selectors", [])
-          let isDefault = selectors->Js.Array2.includes("Make this view Default")
-          let includeDateRange = selectors->Js.Array2.includes("Save with current time interval")
-          let url = {
-            urlDict
-            ->Js.Dict.entries
-            ->Belt.Array.keepMap(entry => {
-              let (key, value) = entry
-              let value = switch value->Js.Json.classify {
-              | JSONFalse => "false"
-              | JSONTrue => "true"
-              | JSONNull => ""
-              | JSONString(string) => string
-              | JSONNumber(float) => float->Belt.Float.toString
-              | JSONObject(_) => ""
-              | JSONArray(array) => `[${array->Js.Array2.toString}]`
-              }
-              if (key !== "startTime" && key !== "endTime") || includeDateRange {
-                Some(`${key}=${value}`)
-              } else {
-                None
-              }
-            })
-            ->Js.Array2.joinWith("&")
-          }
-
-          let bodyDict = Js.Dict.empty()
-          bodyDict->Js.Dict.set("tab", moduleName->Js.Json.string)
-          bodyDict->Js.Dict.set("url", url->Js.Json.string)
-          bodyDict->Js.Dict.set("name", name->Js.Json.string)
-          bodyDict->Js.Dict.set("description", description->Js.Json.string)
-          if includeDateRange {
-            bodyDict->Js.Dict.set("includeDateRange", includeDateRange->Js.Json.boolean)
-          }
-          if isDefault {
-            bodyDict->Js.Dict.set("isDefault", isDefault->Js.Json.boolean)
-          }
-          saveViewFn(bodyDict)
-        }
-
-      | SavedList => {
-          updateExistingKeys(defaultSearchDict)
-          setAppliedSaveView(_ => SaveViewEntity.defaultSaveView)
-          setShowModal(_ => false)
-          Js.Nullable.null->resolve
-        }
-      }
-    }
-
-    let savedViewComp =
-      <div className={`flex gap-2 mt-4`}>
-        {if actualData->Js.Array2.length > 0 {
-          <ToolTip
-            description="open previously saved views"
-            toolTipFor={<div className="flex flex-col relative">
-              <UIUtils.RenderIf
-                condition={!disableSaveButton || appliedSaveView.name === "Default View"}>
-                <div className="w-2 h-2 bg-red-800 absolute rounded-full z-10 right-0 mr-7 mt-2" />
-              </UIUtils.RenderIf>
-              <Button
-                text={isMobileView ? "" : saveViewName}
-                leftIcon=Euler("saveView")
-                rightIcon=FontAwesome("angle-down")
-                onClick={_ => {
-                  setModalView(_ => SavedList)
-                  setShowModal(_ => true)
-                }}
-              />
-            </div>}
-            tooltipWidthClass="w-fit"
-          />
-        } else {
-          React.null
-        }}
-        <Button
-          text={isMobileView ? "" : "Save"}
-          leftIcon=FontAwesome("save")
-          buttonState={disableSaveButton ? Disabled : Normal}
-          onClick={_ => {
-            setModalView(_ => SaveNew)
-            setShowModal(_ => true)
-          }}
-          customIconMargin={isMobileView ? "mr-1" : "ml-1"}
-        />
-      </div>
-    <div>
-      savedViewComp
-      <Modal
-        modalHeading
-        modalHeadingDescription
-        showModal
-        closeOnOutsideClick=true
-        setShowModal
-        modalClass="lg:w-3/5 sm:w-2/3 overflow-auto w-full mx-auto p-4">
-        <Form
-          onSubmit
-          validate
-          initialValues
-          formClass="flex flex-col gap-4 w-full relative overflow-auto">
-          {switch modalView {
-          | SaveNew =>
-            <>
-              <FormRenderer.FieldRenderer field={AnalyticsUtils.nameViewField(~isDisabled=false)} />
-              <FormRenderer.FieldRenderer field=AnalyticsUtils.descriptionField />
-              <FormRenderer.FieldRenderer
-                field={AnalyticsUtils.selectorsField(~isHorizontal=false)} labelClass="hidden"
-              />
-            </>
-
-          | SavedList =>
-            <div className="mb-8">
-              <SavedViewTable actualData modifiedTableEntity />
-            </div>
-          }}
-          <div className="self-end">
-            <FormRenderer.SubmitButton
-              text=submitButtonText
-              loadingText
-              buttonType=Pagination
-              icon=FontAwesome(submitButtonIcon)
-              buttonSize={isMobileView ? XSmall : Small}
-            />
-          </div>
-        </Form>
-      </Modal>
-    </div>
-  }
-}
-
-module FiltersComponent = {
-  @react.component
-  let make = (
-    ~filterEntity: AnalyticsUtils.filterEntity<'t>,
-    ~downloadDataButtonUi: React.element=React.null,
-  ) => {
-    open AnalyticsUtils
-    let iframe_padding = parent !== window ? "px-5" : ""
-    let getFilterData = AnalyticsHooks.useGetFiltersData()
-    let {updateExistingKeys, filterValue} = React.useContext(
-      AnalyticsUrlUpdaterContext.urlUpdaterContext,
-    )
-
-    let {
-      initialFilters,
-      filterDropDownOptions,
-      initialFixedFilters,
-      defaultFilterKeys,
-      filterKeys,
-    } = filterEntity
-
-    let filterBody = switch filterEntity {
-    | {filterBody} => filterBody
-    | _ => AnalyticsUtils.filterBody
-    }
-
-    let source = switch filterEntity {
-    | {source} => source
-    | _ => "BATCH"
-    }
-    let customFilterKey = switch filterEntity {
-    | {customFilterKey} => customFilterKey
-    | _ => ""
-    }
-
-    let filterKeys = filterKeys
-    let filteredTabKeys = filterKeys
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-    let startTimeVal = getModuleFilters->getString(startTimeFilterKey, "")
-
-    let endTimeVal = getModuleFilters->getString(endTimeFilterKey, "")
-
-    let filterBody = React.useMemo3(() => {
-      let filterBodyEntity: AnalyticsUtils.filterBodyEntity = {
-        startTime: startTimeVal,
-        endTime: endTimeVal,
-        groupByNames: filteredTabKeys,
-        source,
-        mode: ?filterValue->Js.Dict.get("mode"),
-      }
-      filterBody(filterBodyEntity)
-    }, (startTimeVal, endTimeVal, filteredTabKeys->Js.Array2.joinWith(",")))
-
-    let filterDataOrig = getFilterData(filterEntity.uri, Fetch.Post, filterBody)
-    let filterData = filterDataOrig->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))
-
-    let filterDataOrigTabNames = React.useMemo2(() => {
-      switch filterDataOrig {
-      | Some(filterData) =>
-        Some(
-          {
-            "queryData": filterData
-            ->getDictFromJsonObject
-            ->getJsonObjectFromDict("queryData")
-            ->getArrayFromJson([])
-            ->Js.Array2.filter(item => {
-              let itemDict = item->getDictFromJsonObject
-              let dimension = itemDict->getString("dimension", "")
-              filteredTabKeys->Js.Array2.includes(dimension)
-            })
-            ->Js.Json.array,
-          }->Identity.genericObjectOrRecordToJson,
-        )
-      | None => None
-      }
-    }, (filterDataOrig, filteredTabKeys))
-
-    switch filterDataOrigTabNames {
-    | Some(filterData) =>
-      <div className={`flex flex-row ${iframe_padding}`}>
-        <DynamicFilter
-          initialFilters={initialFilters(filterData)}
-          options={filterDropDownOptions(filterData)}
-          popupFilterFields={filterDropDownOptions(filterData)}
-          initialFixedFilters={initialFixedFilters(filterData)}
-          defaultFilterKeys
-          tabNames=filteredTabKeys
-          updateUrlWith=updateExistingKeys //
-          key="0"
-          showCustomFilter=true
-          customViewTop=downloadDataButtonUi
-          moduleName=filterEntity.moduleName
-          customFilterKey
-          filterFieldsPortalName=""
-          showSelectFiltersSearch=true
-        />
-      </div>
-    | None =>
-      <div className={`flex flex-row ${iframe_padding}`}>
-        <DynamicFilter
-          initialFilters=[]
-          options=[]
-          popupFilterFields=[]
-          initialFixedFilters={initialFixedFilters(filterData)}
-          defaultFilterKeys
-          tabNames=filteredTabKeys
-          updateUrlWith=updateExistingKeys //
-          key="1"
-          showCustomFilter=false
-          customViewTop=downloadDataButtonUi
-          moduleName=filterEntity.moduleName
-          customFilterKey
-          filterFieldsPortalName=""
-          showSelectFiltersSearch=true
-        />
-      </div>
-    }
-  }
-}
-
-module FiltersComponentNew = {
-  @react.component
-  let make = (
-    ~filterEntity: AnalyticsUtils.filterEntityNew<'t>,
-    ~downloadDataButtonUi: React.element=React.null,
-    ~domain="txns",
-  ) => {
-    open AnalyticsUtils
-    let betaEndPointConfig = React.useContext(BetaEndPointConfigProvider.betaEndPointConfig)
-    let iframe_padding = parent !== window ? "px-5" : ""
-    let parentToken = AuthWrapperUtils.useTokenParent(Original)
-
-    let sortingParams = React.useMemo1((): option<AnalyticsNewUtils.sortedBasedOn> => {
-      switch filterEntity {
-      | {sortingColumnLegend} =>
-        Some({
-          sortDimension: sortingColumnLegend,
-          ordering: #Desc,
-        })
-      | _ => None
-      }
-    }, [filterEntity.sortingColumnLegend])
-
-    let obj = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let updateExistingKeys = obj.updateExistingKeys
-
-    let {initialFilters, initialFixedFilters, defaultFilterKeys, filterKeys} = filterEntity
-    let (initialFilterVals, setInitialFilterVals) = React.useState(_ =>
-      filterKeys
-      ->Js.Array2.map(ele => (ele, ["Loading..."->Js.Json.string]->Js.Json.array))
-      ->Js.Dict.fromArray
-    )
-
-    let customFilterKey = switch filterEntity {
-    | {customFilterKey} => customFilterKey
-    | _ => ""
-    }
-
-    let filteredTabKeys = filterKeys
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-    let startTimeVal = getModuleFilters->getString(startTimeFilterKey, "")
-    let fetchApi = AuthHooks.useApiFetcher(~betaEndpointConfig=?betaEndPointConfig, ())
-    let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetchNew()
-    let endTimeVal = getModuleFilters->getString(endTimeFilterKey, "")
-    let buttonOnClick = React.useCallback4(metric => {
-      let timeObj = Js.Dict.fromArray([
-        ("start", startTimeVal->Js.Json.string),
-        ("end", endTimeVal->Js.Json.string),
-      ])
-      let tableBody = AnalyticsNewUtils.apiBodyMaker(
-        ~timeObj,
-        ~metric,
-        ~groupBy=[metric],
-        ~sortingParams?,
-        ~domain,
-        ~dataLimit=300.,
-        (),
-      )
-      if (
-        initialFilterVals
-        ->getArrayFromDict(metric, [])
-        ->Js.Array2.includes("Loading..."->Js.Json.string)
-      ) {
-        fetchApi(
-          `/api/q/analyticsEndPoint`,
-          ~method_=Post,
-          ~bodyStr=tableBody->Js.Json.stringify,
-          ~authToken=parentToken,
-          ~headers=[("QueryType", "Filter")]->Js.Dict.fromArray,
-          (),
-        )
-        ->addLogsAroundFetch(~logTitle="Filter Api")
-        ->then(text => {
-          let jsonObj = convertNewLineSaperatedDataToArrayOfJson(text)
-          let resArr =
-            jsonObj
-            ->Js.Array2.reduce(
-              (arr, ele) => {
-                let dictValue =
-                  ele
-                  ->getDictFromJsonObject
-                  ->Js.Dict.values
-                  ->Js.Array2.map(
-                    item => {
-                      switch item->Js.Json.classify {
-                      | JSONString(str) => str
-                      | JSONNumber(num) => num->Belt.Float.toString
-                      | JSONTrue => "TRUE"
-                      | JSONFalse => "FALSE"
-                      | _ => ""
-                      }->Js.Json.string
-                    },
-                  )
-                arr->Js.Array2.concat(dictValue)
-              },
-              [],
-            )
-            ->Js.Array2.filter(
-              ele => {
-                ele->getStringFromJson("") !== ""
-              },
-            )
-          setInitialFilterVals(
-            prev => {
-              let newDict = prev->Js.Dict.entries->Js.Dict.fromArray
-              newDict->Js.Dict.set(metric, resArr->Js.Json.array)
-              newDict
-            },
-          )
-          resolve()
-        })
-        ->catch(_err => {
-          resolve()
-        })
-        ->ignore
-      }
-    }, (startTimeVal, endTimeVal, initialFilterVals, sortingParams))
-
-    <div className={`flex flex-row ${iframe_padding}`}>
-      <DynamicFilter
-        initialFilters={initialFilters(initialFilterVals->Js.Json.object_, buttonOnClick)}
-        options=[]
-        popupFilterFields=[]
-        initialFixedFilters={initialFixedFilters(Js.Json.null)}
-        defaultFilterKeys
-        tabNames=filteredTabKeys
-        updateUrlWith=updateExistingKeys //
-        key="0"
-        showCustomFilter=true
-        customViewTop=downloadDataButtonUi
-        moduleName=filterEntity.moduleName
-        customFilterKey
-        filterFieldsPortalName=""
-        showSelectFiltersSearch=true
-        revampedFilter=true
-      />
-    </div>
-  }
-}
-
-module DownloadCsv = {
-  @react.component
-  let make = (
-    ~title: string,
-    ~tableData: Js.Array2.t<Js.Nullable.t<'t>>,
-    ~visibleColumns: Js.Array2.t<'colType>,
-    ~colMapper,
-    ~getHeading: 'colType => Table.header,
-  ) => {
-    let isMobileView = MatchMedia.useMobileChecker()
-    let actualDataOrig =
-      tableData
-      ->Belt.Array.keepMap(item => item->Js.Nullable.toOption)
-      ->Js.Array2.map(Identity.genericTypeToJson)
-
-    let headerNames = visibleColumns->Belt.Array.keepMap(head => {
-      let item = head->getHeading
-      let title = head->colMapper
-      title !== "" ? Some(item.title) : None
-    })
-    let initialValues = visibleColumns->Belt.Array.keepMap(head => {
-      let title = head->colMapper
-      title !== "" ? Some(title) : None
-    })
-
-    let handleDownloadClick = _ev => {
-      let header = headerNames->Js.Array2.joinWith(",")
-
-      let csv =
-        actualDataOrig
-        ->Js.Array2.map(allRows => {
-          let allRowsDict =
-            Js.Json.decodeObject(allRows)->Belt.Option.getWithDefault(Js.Dict.empty())
-          initialValues
-          ->Js.Array2.map(col => {
-            let str =
-              Js.Dict.get(allRowsDict, col)
-              ->Belt.Option.getWithDefault(Js.Json.null)
-              ->Js.Json.stringify
-
-            let strArr = str->Js.String2.split(".")
-
-            let newStr = if (
-              strArr->Js.Array2.length === 2 && str->Belt.Float.fromString->Belt.Option.isSome
-            ) {
-              let newDecimal =
-                strArr
-                ->Belt.Array.get(1)
-                ->Belt.Option.getWithDefault("00")
-                ->Js.String2.slice(~from=0, ~to_=2)
-              strArr->Belt.Array.get(0)->Belt.Option.getWithDefault("0") ++ "." ++ newDecimal
-            } else {
-              str
-            }
-            newStr
-          })
-          ->Js.Array2.joinWith(",")
-        })
-        ->Js.Array2.joinWith("\n")
-      let finalCsv = header ++ "\n" ++ csv
-      let currentTime = Js.Date.now()->Js.Float.toString
-      DownloadUtils.downloadOld(~fileName=`${title}_${currentTime}.csv`, ~content=finalCsv)
-    }
-
-    <Button
-      text={isMobileView ? "" : "Export Table"}
-      leftIcon={FontAwesome("download")}
-      onClick=handleDownloadClick
-      buttonType={Dropdown}
-    />
-  }
-}
-
-module DownloadRawData = {
-  @react.component
-  let make = (
-    ~totalVolume,
-    ~downloadDataEntity: AnalyticsUtils.downloadDataEntity,
-    ~moduleName,
-  ) => {
-    let {addConfig, getConfig} = React.useContext(UserPrefContext.userPrefContext)
-    let previouslySelectedColumnsUserPrefKey = `download_data_column_${moduleName}`
-    let previouslySelectedDownloadData = switch getConfig(previouslySelectedColumnsUserPrefKey) {
-    | Some(jsonVal) =>
-      jsonVal
-      ->LogicUtils.getStrArryFromJson
-      ->Js.Array2.filter(item => {downloadDataEntity.downloadRawDataCols->Js.Array2.includes(item)})
-    | None => []
-    }
-    let fetchApi = AuthHooks.useApiFetcher()
-    let (showModal, setShowModal) = React.useState(_ => false)
-    let (downloadData, setDownloadData) = React.useState(() => previouslySelectedDownloadData)
-    let showToast = ToastState.useShowToast()
-    let (buttonState, setButtonState) = React.useState(_ => Button.Normal)
-    let isMobileView = MatchMedia.useMobileChecker()
-
-    let (isCheckboxSelected, setIsCheckboxSelected) = React.useState(_ => false)
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-
-    let parentToken = AuthWrapperUtils.useTokenParent(Original)
-    let downloadDataUrl = downloadDataEntity.uri
-
-    let modalHeadingDescription = switch downloadDataEntity {
-    | {description} => description
-    | _ => ""
-    }
-
-    let {timeKeys, downloadRawDataCols, downloadDataBody} = downloadDataEntity
-
-    let {startTimeKey, endTimeKey} = timeKeys
-    let startDateTime = getModuleFilters->getString(startTimeKey, "")
-
-    let endDateTime = getModuleFilters->getString(endTimeKey, "")
-    let formattedOptions = React.useMemo1(() => {
-      downloadRawDataCols->Js.Array2.map((x): SelectBox.dropdownOption => {
-        {label: x->snakeToTitle, value: x}
-      })
-    }, [downloadRawDataCols])
-
-    let handleDownloadClick = _ev => {
-      setShowModal(_ => true)
-    }
-    let setIsCheckboxSelected = value => {
-      setIsCheckboxSelected(_ => value)
-    }
-
-    let onSubmit = values => {
-      setDownloadData(_ => values)
-      addConfig(previouslySelectedColumnsUserPrefKey, values->Js.Json.stringArray)
-      setButtonState(_ => Button.Loading)
-      setShowModal(_ => false)
-
-      let downloadDataEntity: AnalyticsUtils.downloadDataApiBodyEntity = {
-        startTime: startDateTime,
-        endTime: endDateTime,
-        columns: values,
-        compressed: isCheckboxSelected,
-      }
-
-      if downloadDataUrl !== "" {
-        fetchApi(
-          downloadDataUrl,
-          ~bodyStr=downloadDataBody(downloadDataEntity),
-          ~method_=Fetch.Post,
-          ~authToken=parentToken,
-          ~headers=[("QueryType", "DownloadData")]->Js.Dict.fromArray,
-          (),
-        )
-        ->then(resp => {
-          let statusCode = resp->Fetch.Response.status
-          setShowModal(_ => false)
-          setButtonState(_ => Button.Normal)
-          if statusCode !== 200 {
-            showToast(~toastType=ToastError, ~message=`Something went wrong`, ~autoClose=true, ())
-          }
-          resp->Fetch.Response.json
-        })
-        ->then(res => {
-          let downloadDataUrl = res->getDictFromJsonObject->getString("signedURL", "")
-          Webapi.Dom.window
-          ->Webapi.Dom.Window.open_(~url=downloadDataUrl, ~name="_blank", ())
-          ->ignore
-
-          resolve()
-        })
-        ->catch(_err => {
-          resolve()
-        })
-        ->ignore
-      }
-    }
-    if downloadRawDataCols->Js.Array2.length > 0 {
-      <>
-        {if isMobileView {
-          React.null
-        } else {
-          <div className="p-1">
-            <Button
-              text="Download Raw Data"
-              loadingText="Download Raw Data"
-              buttonSize=Small
-              buttonState
-              onClick=handleDownloadClick
-            />
-          </div>
-        }}
-        <DownloadSelectModal
-          modalHeading="Select Columns"
-          modalHeadingDescription
-          showModal
-          setShowModal
-          onSubmit
-          initialValues=downloadData
-          enableSelect=true
-          options=formattedOptions
-          submitButtonText="Download Report"
-          addCheckboxButton=true
-          checkboxButtonText="Compressed Data"
-          setIsCheckboxSelected
-          isCheckboxSelected
-          totalVolume
-        />
-      </>
-    } else {
-      React.null
-    }
-  }
-}
-
-module SankeyWithDropDown = {
-  @react.component
-  let make = (
-    ~data,
-    ~activeTab,
-    ~dataLoading,
-    ~sankeyConfig,
-    ~startNodeLable="Total Volume",
-    ~endNodeLable="Status",
-    ~loaderType: AnalyticsUtils.loaderType,
-  ) => {
-    let (sankeyCardinality, setSankeyCardinality) = React.useState(_ => 5)
-    let selectInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "snakey_cardinality",
-      onBlur: _ev => (),
-      onChange: ev => {
-        setSankeyCardinality(_ => {
-          ev->Identity.formReactEventToString->Belt.Int.fromString->Belt.Option.getWithDefault(5)
-        })
-      },
-      onFocus: _ev => (),
-      value: sankeyCardinality->Belt.Int.toString->Js.Json.string,
-      checked: true,
-    }
-    let selectInputOption = React.useMemo0(() => {
-      ["5", "10"]
-      ->SelectBox.makeOptions
-      ->Js.Array2.map(item => {
-        ...item,
-        label: `Top ${item.label}`,
-      })
-    })
-
-    let buttonText = React.useMemo1(() => {
-      `Top ${sankeyCardinality->Js.String.make} `
-    }, [sankeyCardinality])
-
-    let field =
-      <SelectBox.BaseDropdown
-        options=selectInputOption
-        buttonText
-        searchable=false
-        allowMultiSelect=false
-        input=selectInput
-        baseComponent={<Button
-          text=buttonText
-          buttonSize=Button.Small
-          rightIcon=Button.CustomIcon(<Icon className="pl-2 " size=20 name="chevron-down" />)
-          ellipsisOnly=true
-          customButtonStyle="min-w-full justify-between"
-        />}
-        hideMultiSelectButtons=true
-        deselectDisable=true
-        buttonType=Button.Primary
-        marginTop="mt-10 min-w-full" // mt-10 because the height of the small button is 10
-      />
-
-    <SankeyCharts
-      data
-      activeTab
-      sankeyDataLoading=dataLoading
-      sankeyConfig
-      field
-      topN=sankeyCardinality
-      startNodeLable
-      endNodeLable
-      loaderType
-    />
-  }
-}
-
-module ErrorModalContent = {
-  @react.component
-  let make = (
-    ~str: string,
-    ~entity: EntityType.entityType<'modalColType, 'modalTable>,
-    ~filterByData,
-    ~showModalBarChart: string,
-    ~colName: string,
-  ) => {
-    React.useEffect0(() => {
-      let onKeyDown = (event: 'a) => {
-        let key = event->keyCode
-        if key === 13 {
-          event->ReactEvent.Keyboard.preventDefault
-        }
-      }
-
-      Window.addEventListener("keydown", onKeyDown)
-
-      Some(() => Window.removeEventListener("keydown", onKeyDown))
-    })
-    let (offset, setOffset) = React.useState(() => 0)
-    let searchText = ReactFinalForm.useField("searchTable").input.value
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let (theme, _setTheme) = React.useContext(ThemeProvider.themeContext)
-    let splitString =
-      Js.String2.split(str, "$$")->Js.Array2.map(errStr =>
-        Js.String2.splitByRe(Js.String2.trim(errStr), %re("/\s*[(%)]\s*/"))
-      )
-
-    let actualData12 = if Js.Array2.length(splitString[0]->Belt.Option.getWithDefault([])) > 1 {
-      splitString->Js.Array2.map(arr => {
-        let arr = Belt.Array.keepMap(arr, item => item)
-
-        Js.Dict.fromArray(
-          [
-            (colName, arr->Belt.Array.get(0)),
-            ("percent", arr->Belt.Array.get(1)),
-            ("volume", arr->Belt.Array.get(4)),
-          ]->Js.Array2.map(item => {
-            let (key, value) = item
-            (key, value->Belt.Option.getWithDefault("")->Js.Json.string)
-          }),
-        )
-      })
-    } else {
-      []
-    }
-    let data = if Js.Array2.length(actualData12) !== 0 {
-      actualData12
-      ->Js.Array2.map(arr => arr->Js.Json.object_)
-      ->Js.Json.array
-      ->entity.getObjects
-      ->Js.Array2.map(Js.Nullable.return)
-    } else {
-      []
-    }
-    let actualData = React.useMemo2(() => {
-      data->filterByData(searchText)
-    }, (searchText, data))
-
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    // chart data
-
-    let categoryData = actualData12->Js.Array2.map(json => {
-      json->getString(colName, "")
-    })
-
-    let chartData = if Js.Array2.length(actualData12) !== 0 {
-      actualData12->Js.Array2.map(json => {
-        {
-          "unit": json->getString(colName, ""),
-          "y": json->getFloat("percent", 0.0),
-        }
-      })
-    } else {
-      []
-    }
-
-    let options: Js.Json.t = React.useMemo4(() => {
-      let data = [
-        {
-          "data": chartData,
-        },
-      ]
-      let categories = categoryData
-      let title = {snakeToTitle(colName)}
-      let gridLineColor = switch theme {
-      | Dark => "#2e2f39"
-      | Light => "#e6e6e6"
-      }
-      {
-        "chart": {
-          "type": "column",
-          "zoomType": "x",
-          "backgroundColor": Js.Nullable.null,
-        },
-        "title": {
-          "enabled": false,
-          "style": LineChartUtils.chartTitleStyle(theme),
-          "text": title,
-          "margin": 40,
-        },
-        "tooltip": {
-          "enabled": true,
-          "useHTML": true,
-          "pointFormat": `<div> <span style="padding-left:6px;font-size:14px;color: "black";opacity: 0.75;padding-top:10px">{point.y}%</span></div>`,
-          "headerFormat": "{point.key}"->Some,
-          "hideDelay": 0,
-          "backgroundColor": "white",
-          "valueDecimals": 2,
-          "outside": true,
-        },
-        "yAxis": {
-          "gridLineColor": gridLineColor,
-          "min": 0,
-          "title": {
-            "enabled": true,
-            "style": LineChartUtils.chartTitleStyle(theme),
-            "text": title,
-            "margin": 20,
-          },
-          "labels": {
-            "format": "{text}%"->Some,
-            "enabled": true,
-            "useHTML": true,
-          }->Some,
-        },
-        "xAxis": {
-          "categories": categories,
-        },
-        "plotOptions": {
-          "column": {
-            "stacking": "Normal",
-          },
-        },
-        "legend": {
-          "enabled": false,
-        },
-        "series": data,
-        "credits": {
-          "enabled": false,
-        },
-      }->Identity.genericObjectOrRecordToJson
-    }, (chartData, categoryData, colName, theme))
-    if showModalBarChart == "Table" {
-      <div className="-mt-6">
-        <FormRenderer.FieldRenderer field=searchTable />
-        <LoadedTable
-          actualData
-          totalResults={actualData->Js.Array2.length}
-          offset
-          setOffset
-          entity
-          defaultSort={
-            key: "volume",
-            order: Table.INC,
-          }
-          currrentFetchCount={actualData->Js.Array2.length}
-          title="Analytics Error Summary Table OnClickDetails"
-          hideTitle=true
-          resultsPerPage=10
-          highlightText={searchText->getStringFromJson("")}
-        />
-      </div>
-    } else {
-      <div
-        className="flex flex-row justify-between border-b  border-jp-gray-500 dark:border-jp-gray-960 dark:bg-jp-gray-950 text-gray-500 px-4 py-2 ">
-        <div className="flex-1 min-h-[400px] finChart">
-          <HighchartBarChart.RawBarChart options />
-        </div>
-      </div>
-    }
-  }
-}
-
-module ErrorOnCellClick = {
-  @react.component
-  let make = (
-    ~val,
-    ~str,
-    ~entity: EntityType.entityType<'modalColType, 'modalTable>,
-    ~filterByData,
-    ~colName: string,
-  ) => {
-    let topNValues = None
-    let (showErrorTableModal, setShowErrorTableModal) = React.useState(_ => false)
-    let (showModalBarChart, setShowModalBarChart) = React.useState(_ => "Table")
-    let (modalErrorHeading, setModalErrorHeading) = React.useState(_ => "")
-    let (defaultFilter, _) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-    let defaultFilterDict = defaultFilter->safeParse->getDictFromJsonObject
-    let activeTab =
-      defaultFilterDict
-      ->getArrayFromDict("activeTab", [])
-      ->Js.Array2.map(key => {
-        key->getStringFromJson("")
-      })
-    let defaultFilters = defaultFilterDict->getJsonObjectFromDict("filter")->getDictFromJsonObject
-    let dictKeys = val->Js.Dict.keys
-    let filters = defaultFilters->getJsonObjectFromDict("filters")->getDictFromJsonObject
-    let filterKeys = filters->Js.Dict.keys
-
-    let cellText = switch topNValues {
-    | Some(topNValues) =>
-      Js.String2.split(str, "$$")
-      ->Js.Array2.map(item => {
-        let itemU = item->Js.String2.split("(")
-        let lastElement =
-          itemU->Belt.Array.get(itemU->Js.Array2.length - 1)->Belt.Option.getWithDefault("")
-        let item = item->Js.String2.replace(`(${lastElement}`, "")
-        (
-          lastElement
-          ->Js.String2.replace(")", "")
-          ->Js.String.trim
-          ->Belt.Int.fromString
-          ->Belt.Option.getWithDefault(0),
-          item,
-        )
-      })
-      ->Js.Array2.sortInPlaceWith((item1, item2) => {
-        let (x1, _y1) = item1
-        let (x2, _y2) = item2
-        if x1 > x2 {
-          -1
-        } else if x1 == x2 {
-          0
-        } else {
-          1
-        }
-      })
-      ->Js.Array2.mapi((item, index) => {
-        let (_, value) = item
-        index < topNValues ? Some(value) : None
-      })
-      ->Belt.Array.keepMap(item => item)
-      ->Js.Array2.joinWith(`\n`)
-
-    | None => Js.String2.split(str, "$$")->Js.Array2.joinWith(`\n`)
-    }
-    let cellText = Js.String2.split(cellText, "(")->Js.Array2.joinWith(` (`)
-
-    activeTab->Js.Array2.forEach(key => {
-      if !(filterKeys->Js.Array2.includes(key)) {
-        filterKeys->Js.Array2.push(key)->ignore
-      }
-    })
-    filterKeys->Js.Array2.forEach(key => {
-      let value = val->getString(key, "")
-      if dictKeys->Js.Array2.includes(key) && value !== "" {
-        filters->Js.Dict.set(key, [value->Js.Json.string]->Js.Json.array)
-      }
-    })
-
-    let valStr =
-      activeTab
-      ->Js.Array2.map(key => {
-        val->getJsonObjectFromDict(key)
-      })
-      ->Js.Array2.joinWith(", ")
-
-    let keyStr = activeTab->Js.Array2.map(snakeToTitle)->Js.Array2.joinWith(", ")
-
-    let heading = `${keyStr} : ${valStr}`
-
-    let onClick = _ => {
-      setShowErrorTableModal(_ => true)
-      setModalErrorHeading(_ => heading)
-    }
-
-    let renderModalChart = ev => {
-      if ev == "Table" {
-        setShowModalBarChart(_ => "Table")
-      } else {
-        setShowModalBarChart(_ => "Bar Chart")
-      }
-    }
-
-    let modalInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "modalInput",
-      onBlur: _ev => (),
-      onChange: ev => renderModalChart(ev->Identity.formReactEventToString),
-      onFocus: _ev => (),
-      value: ""->Js.Json.string,
-      checked: true,
-    }
-
-    <>
-      <div onClick>
-        <ToolTip
-          tooltipForWidthClass="min-w-full"
-          contentAlign=Left
-          description=cellText
-          toolTipPosition=Left
-          textStyle="text-fs-13 ibm-plex font-medium"
-          textStyleGap="space-y-6"
-          toolTipFor={<div
-            className={`px-2 py-0.5 ibm-plex text-fs-13 font-normal text-sky-500 cursor-pointer truncate w-12 min-w-full`}>
-            {React.string(cellText)}
-          </div>}
-        />
-      </div>
-      {if showErrorTableModal {
-        <Modal
-          modalHeading=modalErrorHeading
-          headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background"
-          showModal=showErrorTableModal
-          closeOnOutsideClick=true
-          setShowModal=setShowErrorTableModal
-          borderBottom=true
-          modalClass="md:w-10/12 mx-auto my-8 dark:!bg-jp-gray-lightgray_background p-4 pb-8">
-          <Form>
-            <div className="flex relative flex-row flex-wrap mb-3">
-              <SelectBox.BaseDropdown
-                allowMultiSelect=false
-                hideMultiSelectButtons=true
-                buttonText=showModalBarChart
-                input={modalInput}
-                options={["Bar chart", "Table"]->SelectBox.makeOptions}
-                deselectDisable=false
-                autoApply=false
-              />
-            </div>
-            <ErrorModalContent str entity filterByData showModalBarChart colName />
-          </Form>
-        </Modal>
-      } else {
-        React.null
-      }}
-    </>
-  }
-}
-
-module OnCellClick = {
-  @react.component
-  let make = (
-    ~val,
-    ~num,
-    ~mapper,
-    ~tabValues: array<DynamicTabs.tab>,
-    ~domain: string,
-    ~customFilterKey: option<string>=?,
-    ~summaryTableOnClickEntity,
-    ~filterByData,
-  ) => {
-    let clearFormattingValue =
-      ReactFinalForm.useField("enableFormattedData").input.value
-      ->Js.Json.decodeBoolean
-      ->Belt.Option.getWithDefault(false)
-    let (showTableModal, setShowTableModal) = React.useState(_ => false)
-    let (modalHeading, setModalHeading) = React.useState(_ => "")
-    let (defaultFilter, _) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let defaultFilterDict = defaultFilter->safeParse->getDictFromJsonObject
-    let activeTab =
-      defaultFilterDict
-      ->getArrayFromDict("activeTab", [])
-      ->Js.Array2.map(key => {
-        key->getStringFromJson("")
-      })
-    let defaultFilters = defaultFilterDict->getJsonObjectFromDict("filter")->getDictFromJsonObject
-    let dictKeys = val->Js.Dict.keys
-    let filters = defaultFilters->getJsonObjectFromDict("filters")->getDictFromJsonObject
-    let filterKeys = filters->Js.Dict.keys
-    let getTitle = key => {
-      (
-        tabValues
-        ->Js.Array2.filter(item => {
-          item.value == key
-        })
-        ->Belt.Array.get(0)
-        ->Belt.Option.getWithDefault({title: "", value: "", isRemovable: false})
-      ).title
-    }
-
-    activeTab->Js.Array2.forEach(key => {
-      if !(filterKeys->Js.Array2.includes(key)) {
-        filterKeys->Js.Array2.push(key)->ignore
-      }
-    })
-    filterKeys->Js.Array2.forEach(key => {
-      let value = val->getString(key, "")
-      if dictKeys->Js.Array2.includes(key) && value !== "" {
-        filters->Js.Dict.set(key, [value->Js.Json.string]->Js.Json.array)
-      }
-    })
-    let currentCustomFilterValue = switch customFilterKey {
-    | Some(customFilterKey) =>
-      filterValue->Js.Dict.get(customFilterKey)->Belt.Option.getWithDefault("")
-    | None => ""
-    }
-
-    defaultFilters->Js.Dict.set("filters", filters->Js.Json.object_)
-    if currentCustomFilterValue !== "" {
-      defaultFilters->Js.Dict.set("customFilter", currentCustomFilterValue->Js.Json.string)
-    }
-
-    let valStr =
-      activeTab
-      ->Js.Array2.map(key => {
-        val->getJsonObjectFromDict(key)
-      })
-      ->Js.Array2.joinWith(", ")
-
-    let keyStr = activeTab->Js.Array2.map(getTitle)->Js.Array2.joinWith(", ")
-
-    let heading = `${keyStr} : ${valStr}`
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    let onClick = _ => {
-      setShowTableModal(_ => true)
-      setModalHeading(_ => heading)
-    }
-    <>
-      <div
-        className="px-2 py-0.5 fira-code text-fs-13 font-normal text-sky-500 cursor-pointer"
-        onClick>
-        {React.string({clearFormattingValue ? num->Belt.Float.toString : num->mapper})}
-      </div>
-      {if showTableModal {
-        <Modal
-          modalHeading
-          headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background"
-          showModal=showTableModal
-          closeOnOutsideClick=true
-          setShowModal=setShowTableModal
-          borderBottom=true
-          modalClass="md:w-10/12 w-full md:mx-auto md:my-8 dark:!bg-jp-gray-lightgray_background p-4 pb-8 overflow-auto">
-          <Form>
-            <FormRenderer.FieldRenderer field=searchTable />
-            <AnalyticsUtils.TableModalContent
-              defaultFilters domain filterByData summayTableEntity=summaryTableOnClickEntity
-            />
-          </Form>
-        </Modal>
-      } else {
-        React.null
-      }}
-    </>
-  }
-}
-
-module BaseTableComponent = {
-  @react.component
-  let make = (
-    ~filters: (string, string),
-    ~tableData: Js.Json.t,
-    ~defaultSort: string,
-    ~tableDataLoading: bool,
-    ~transactionTableDefaultCols,
-    ~newDefaultCols: array<'colType>,
-    ~newAllCols: array<'colType>,
-    ~getTransactionTable: Js.Json.t => array<'t>,
-    ~colMapper: 'colType => string,
-    ~tableEntity: EntityType.entityType<'colType, 't>,
-    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>,
-    ~activeTab,
-    ~text,
-    ~showDeltaToggleUi: option<React.element>=?,
-    ~loaderType: AnalyticsUtils.loaderType,
-  ) => {
-    open DynamicTableUtils
-    let actualData = React.useMemo2(() => {
-      let data = tableData->getDictFromJsonObject
-      let value =
-        data
-        ->getJsonObjectFromDict("queryData")
-        ->getTransactionTable
-        ->Js.Array2.map(Js.Nullable.return)
-      value
-    }, (tableData, getTransactionTable))
-    let {parentAuthInfo} = React.useContext(TokenContextProvider.tokenContext)
-    let userInfoText = React.useMemo1(() => {
-      switch parentAuthInfo {
-      | Some(info) => `${info.merchantId}_tab_performance_table_table_${info.username}_currentTime` // tab name also need to be added based on tab currentTime need to be added
-      | None => ""
-      }
-    }, [parentAuthInfo])
-    let isMobileView = MatchMedia.useMobileChecker()
-    let (showColumnSelector, setShowColumnSelector) = React.useState(() => false)
-    let (offset, setOffset) = React.useState(_ => 0)
-    let (_, setCounter) = React.useState(_ => 1)
-    let refetch = React.useCallback1(_ => {
-      setCounter(p => p + 1)
-    }, [setCounter])
-    let {defaultColumns} = tableEntity
-    let visibleColumns = Recoil.useRecoilValueFromAtom(transactionTableDefaultCols)
-    let (startTimeFilter, endTimeFilter) = filters
-    let downloadDataText = `${userInfoText}_${startTimeFilter}_${endTimeFilter}`
-    let defaultSort: Table.sortedObject = {
-      key: defaultSort,
-      order: Table.INC,
-    }
-
-    let rightTitleElement = React.useMemo2(() => {
-      <Button
-        text={isMobileView ? "" : "Add/Remove Column"}
-        customButtonStyle="tableColumnButton"
-        leftIcon={CustomIcon(<Icon name="custom_column_table" size=15 className="mr-1" />)}
-        buttonType=SecondaryFilled
-        buttonSize=Small
-        onClick={_ => setShowColumnSelector(_ => true)}
-      />
-    }, (setShowColumnSelector, isMobileView))
-
-    let modifiedTableEntity = React.useMemo3(() => {
-      {
-        ...tableEntity,
-        defaultColumns: newDefaultCols,
-        allColumns: Some(newAllCols),
-      }
-    }, (tableEntity, newDefaultCols, newAllCols))
-
-    let filterKeysJson = ReactFinalForm.useField("searchField").input.value
-
-    let clearFormattingValue =
-      ReactFinalForm.useField("enableFormattedData").input.value
-      ->Js.Json.decodeBoolean
-      ->Belt.Option.getWithDefault(false)
-
-    let actualData = React.useMemo2(() => {
-      switch tableGlobalFilter {
-      | Some(tableGlobalFilter) => actualData->tableGlobalFilter(filterKeysJson)
-      | None => actualData
-      }
-    }, (actualData, filterKeysJson))
-    let search_class = "text-gray-400 dark:text-gray-600"
-
-    let clearFormattingToggleUi = FormRenderer.makeFieldInfo(
-      ~name="enableFormattedData",
-      ~label="Clear Formatting",
-      ~customInput=InputFields.boolInput(~isDisabled=false),
-      (),
-    )
-
-    let initialFilterFields = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchField",
-      ~placeholder="Search",
-      ~customInput=InputFields.textInput(
-        ~customStyle=`w-64 tableSearch`,
-        ~autoComplete="off",
-        ~leftIcon=<Icon size={16} className=search_class name={"search"} />,
-        (),
-      ),
-      (),
-    )
-
-    let filt = React.useMemo6(() => {
-      <div className="flex flex-row gap-4">
-        <ChooseColumns
-          entity={modifiedTableEntity}
-          totalResults={actualData->Js.Array2.length}
-          defaultColumns
-          activeColumnsAtom={transactionTableDefaultCols}
-          setShowColumnSelector
-          showColumnSelector
-          sortingBasedOnDisabled=false
-          orderdColumnBasedOnDefaultCol=true
-          showSerialNumber=false
-          mandatoryOptions=activeTab
-        />
-      </div>
-    }, (
-      modifiedTableEntity,
-      actualData,
-      transactionTableDefaultCols,
-      setShowColumnSelector,
-      showColumnSelector,
-      defaultColumns,
-    ))
-
-    let clearFormattedDataButton = switch showDeltaToggleUi {
-    | Some(toggleUi) =>
-      <div className="flex flex-row gap-2">
-        <div className="flex flex-row items-center">
-          <FormRenderer.FieldWrapper label="Show Delta"> {React.null} </FormRenderer.FieldWrapper>
-          {toggleUi}
-        </div>
-        <FormRenderer.FieldRenderer
-          field=clearFormattingToggleUi fieldWrapperClass="flex flex-row items-center gap-1"
-        />
-      </div>
-    | None =>
-      <FormRenderer.FieldRenderer
-        field=clearFormattingToggleUi fieldWrapperClass="flex flex-row items-center gap-1"
-      />
-    }
-
-    let bottomMargin = "-mb-13"
-    let tableBorderClass = "border-collapse border border-jp-gray-940 border-solid border-2 rounded-sm border-opacity-30 dark:border-jp-gray-dark_table_border_color dark:border-opacity-30"
-    let downloadCsv =
-      <DownloadCsv
-        title=downloadDataText
-        tableData=actualData
-        visibleColumns
-        colMapper
-        getHeading=modifiedTableEntity.getHeading
-      />
-    let frozenIndex = activeTab->Js.Array2.length
-    <div className="flex flex-1 flex-col m-4">
-      <RefetchContextProvider value=refetch>
-        {if loaderType === Shimmer && tableDataLoading {
-          <Shimmer styleClass="w-full h-96 dark:bg-black bg-white" shimmerType={Big} />
-        } else {
-          {
-            <>
-              <div className="flex">
-                <AddDataAttributes attributes=[("data-header-text", text)]>
-                  <div
-                    className="font-bold text-xl text-black text-opacity-75 dark:text-white dark:text-opacity-75">
-                    {React.string(text)}
-                  </div>
-                </AddDataAttributes>
-                {if tableDataLoading && loaderType === SideLoader {
-                  <div className="animate-spin px-4">
-                    <Icon name="spinner" size=20 />
-                  </div>
-                } else {
-                  React.null
-                }}
-              </div>
-              <div className={`flex flex-1 -ml-1  ${isMobileView ? "" : bottomMargin}`}>
-                <FormRenderer.FieldRenderer field=initialFilterFields />
-              </div>
-              <AddDataAttributes attributes=[("data-loaded-table", text)]>
-                <div>
-                  <LoadedTable
-                    visibleColumns
-                    title=text
-                    hideTitle=true
-                    actualData
-                    entity=modifiedTableEntity
-                    resultsPerPage=10
-                    totalResults={actualData->Js.Array2.length}
-                    filters={filt}
-                    offset
-                    setOffset
-                    defaultSort
-                    rightTitleElement={rightTitleElement}
-                    currrentFetchCount={actualData->Js.Array2.length}
-                    clearFormattedDataButton
-                    downloadCsv={downloadCsv}
-                    tableLocalFilter=true
-                    tableheadingClass=tableBorderClass
-                    tableBorderClass
-                    tableDataBorderClass=tableBorderClass
-                    frozenUpto={isMobileView ? 1 : frozenIndex}
-                    highlightText={filterKeysJson->getStringFromJson("")}
-                    clearFormatting=clearFormattingValue
-                    isAnalyticsModule=true
-                    showTableOnMobileView=true
-                  />
-                </div>
-              </AddDataAttributes>
-            </>
-          }
-        }}
-      </RefetchContextProvider>
-    </div>
-  }
-}
-
-let useTableSankeyWrapper = (
-  ~sankeyEntity: option<SankeyCharts.sankeyEntity>,
-  ~colMapper: 'colType => string,
-  ~analyticsTableEntity: AnalyticsUtils.analyticsTableEntity<'colType, 't>,
-  ~text,
-) => {
-  let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-  let parentToken = AuthWrapperUtils.useTokenParent(Original)
-
-  let activeTab = React.useMemo1(() => {
-    getModuleFilters->getOptionStrArrayFromDict(`${analyticsTableEntity.moduleName}.tabName`)
-  }, [getModuleFilters])
-
-  let (activeTabState, setActiveTabState) = React.useState(_ => activeTab)
-
-  let {
-    tableEntity,
-    defaultSortCol,
-    deltaMetrics,
-    isIndustry,
-    distributionArray,
-    metrics,
-    tableUpdatedHeading,
-    tableGlobalFilter,
-    moduleName,
-    filterKeys,
-    timeKeys,
-    modeKey,
-    moduleNamePrefix,
-    source,
-  } = analyticsTableEntity
-  let tableSelectedColumnUserPrefKey = `dynamicTable_selected_columns_${moduleName}`
-  let tableMetrics = metrics
-
-  let tableCustomFilterKey = switch analyticsTableEntity {
-  | {customFilterKey} => customFilterKey
-  | _ => ""
-  }
-
-  let defaultSort = defaultSortCol
-  let {getObjects} = tableEntity
-  let getTransactionTable = getObjects
-  let (tableLoading, setTableLoading) = React.useState(_ => false)
-  let (tableHeaderLoading, setShowTableHeaderLoading) = React.useState(_ => false)
-  let {getHeading, allColumns, defaultColumns} = tableEntity
-  let allMetricColumn = defaultColumns
-  let activeTabStr = activeTab->Belt.Option.getWithDefault([])->Js.Array2.joinWith("-")
-  let {startTimeKey, endTimeKey} = timeKeys
-  let (startTimeFilterKey, endTimeFilterKey) = (startTimeKey, endTimeKey)
-  let (showDelta, setShowDelta) = React.useState(_ => false)
-  // with prefix will be specific for the component level filter but without prefix will be at the overall level filters
-  let getAllFilter = UrlUtils.useGetFilterDictFromUrl("")
-  let showDeltaInput: ReactFinalForm.fieldRenderPropsInput = {
-    name: "showDelta",
-    onBlur: _ev => (),
-    onChange: ev => setShowDelta(_ => ev->Identity.formReactEventToBool),
-    onFocus: _ev => (),
-    value: showDelta->Js.Json.boolean,
-    checked: false,
-  }
-
-  // without prefix only table related Filters
-  let getTopLevelFilter = React.useMemo1(() => {
-    getAllFilter
-    ->Js.Dict.entries
-    ->Belt.Array.keepMap(item => {
-      let (key, value) = item
-      let keyArr = key->Js.String2.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-      if prefix === moduleName && prefix !== "" {
-        None
-      } else {
-        Some((prefix, value))
-      }
-    })
-    ->Js.Dict.fromArray
-  }, [getAllFilter])
-
-  let allColumns = allColumns->Belt.Option.getWithDefault([])
-  let defaultTableColumn = switch analyticsTableEntity {
-  | {defaultColumn} => defaultColumn
-  | {tableEntity} => tableEntity.allColumns->Belt.Option.getWithDefault([])
-  }
-
-  let consumeSankeyFetchedData = React.useMemo1(() => {
-    switch sankeyEntity {
-    | Some(sankeyEntity) => sankeyEntity.fetchData
-    | None => false
-    }
-  }, [sankeyEntity])
-  // NOTE ideally these filters keys should be passed in datatable entity or if we make a entity for the table and sankey
-
-  let (_, setDefaultFilter) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-
-  let mode = switch modeKey {
-  | Some(modeKey) => Some(getTopLevelFilter->getString(modeKey, ""))
-  | None => Some("ORDER")
-  }
-
-  let allFilterKeys = Js.Array2.concat(
-    [startTimeFilterKey, endTimeFilterKey, mode->Belt.Option.getWithDefault("")],
-    filterKeys,
-  )
-
-  let (topFiltersToSearchParam, customFilter) = React.useMemo1(() => {
-    let filterSearchParam =
-      getTopLevelFilter
-      ->Js.Dict.entries
-      ->Belt.Array.keepMap(entry => {
-        let (key, value) = entry
-        if allFilterKeys->Js.Array2.includes(key) {
-          switch value->Js.Json.classify {
-          | JSONString(str) => `${key}=${str}`->Some
-          | JSONNumber(num) => `${key}=${num->Js.String.make}`->Some
-          | JSONArray(arr) => `${key}=[${arr->Js.String.make}]`->Some
-          | _ => None
-          }
-        } else {
-          None
-        }
-      })
-      ->Js.Array2.joinWith("&")
-
-    (filterSearchParam, getTopLevelFilter->LogicUtils.getString(tableCustomFilterKey, ""))
-  }, [getTopLevelFilter])
-
-  let filterValueFromUrl = React.useMemo1(() => {
-    getTopLevelFilter
-    ->Js.Dict.entries
-    ->Belt.Array.keepMap(entries => {
-      let (key, value) = entries
-      filterKeys->Js.Array2.includes(key) ? Some((key, value)) : None
-    })
-    ->Js.Dict.fromArray
-    ->Js.Json.object_
-    ->Some
-  }, [topFiltersToSearchParam])
-
-  let startTimeFromUrl = React.useMemo1(() => {
-    getTopLevelFilter->getString(startTimeFilterKey, "")
-  }, [topFiltersToSearchParam])
-  let endTimeFromUrl = React.useMemo1(() => {
-    getTopLevelFilter->getString(endTimeFilterKey, "")
-  }, [topFiltersToSearchParam])
-  let {addConfig, getConfig} = React.useContext(UserPrefContext.userPrefContext)
-  let fetchApi = AuthHooks.useApiFetcher()
-
-  let (statusDict, setStatusDict) = React.useState(_ => Js.Dict.empty())
-  let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetch()
-  let (sankeyLoading, setSankeyLoading) = React.useState(_ => true)
-  let (sankeyFetchedData, setSankeyFetchedData) = React.useState(_ => None)
-  let (sankeyLoaderType, setSankeyLoaderType) = React.useState(_ => AnalyticsUtils.Shimmer)
-
-  let (tableData, setTableData) = React.useState(_ => None)
-  let (tableInfoData, setTableInfoData) = React.useState(_ => Js.Json.object_(Js.Dict.empty()))
-  let (tableLoaderType, setTableLoaderType) = React.useState(_ => AnalyticsUtils.Shimmer)
-
-  let defaultTableColumn = React.useMemo0(() => {
-    let defaultColumnsFromPref = switch getConfig(tableSelectedColumnUserPrefKey) {
-    | Some(jsonVal) => jsonVal->LogicUtils.getStrArryFromJson
-    | None => []
-    }
-
-    let defaultColumnFromUserPref = defaultTableColumn->Belt.Array.keepMap(item => {
-      let getHeadingType = item->getHeading
-      let key = getHeadingType.key
-      defaultColumnsFromPref->Js.Array2.includes(key) ? Some(item) : None
-    })
-
-    if defaultColumnFromUserPref->Js.Array2.length === 0 {
-      defaultTableColumn
-    } else {
-      defaultColumnFromUserPref
-    }
-  })
-
-  let newDefaultCols = React.useMemo1(() => {
-    activeTabState
-    ->Belt.Option.getWithDefault([])
-    ->Belt.Array.keepMap(item => {
-      allMetricColumn
-      ->Belt.Array.keepMap(
-        columnItem => {
-          let val = columnItem->getHeading
-          val.key === item ? Some(columnItem) : None
-        },
-      )
-      ->Belt.Array.get(0)
-    })
-    ->Belt.Array.concat(defaultTableColumn)
-  }, [activeTabState->Belt.Option.getWithDefault([])->Js.Array2.joinWith("-")])
-
-  let newAllCols = React.useMemo1(() => {
-    allMetricColumn
-    ->Belt.Array.keepMap(item => {
-      let val = item->getHeading
-      activeTabState->Belt.Option.getWithDefault([])->Js.Array2.includes(val.key)
-        ? Some(item)
-        : None
-    })
-    ->Belt.Array.concat(allColumns)
-  }, [activeTabState->Belt.Option.getWithDefault([])->Js.Array2.joinWith("-")])
-
-  let transactionTableDefaultCols = React.useMemo2(() => {
-    Recoil.atom(.
-      `${moduleName}${moduleNamePrefix}DefaultCols${activeTabState
-        ->Belt.Option.getWithDefault([])
-        ->Js.Array2.joinWith("-")}`,
-      newDefaultCols,
-    )
-  }, (
-    newDefaultCols,
-    `${moduleName}DefaultCols${activeTabState
-      ->Belt.Option.getWithDefault([])
-      ->Js.Array2.joinWith("-")}`,
-  ))
-
-  let visibleColumns = Recoil.useRecoilValueFromAtom(transactionTableDefaultCols)
-
-  React.useEffect1(() => {
-    let visibleColumnsUpdated =
-      visibleColumns
-      ->Belt.Array.keepMap(item => {
-        let item = item->getHeading
-        let itemKey = item.key
-        activeTabState->Belt.Option.getWithDefault([])->Js.Array2.includes(itemKey)
-          ? None
-          : Some(itemKey->Js.Json.string)
-      })
-      ->Js.Json.array
-    addConfig(tableSelectedColumnUserPrefKey, visibleColumnsUpdated)
-    None
-  }, [visibleColumns])
-
-  let deltaPrefixArr = switch analyticsTableEntity {
-  | {colDependentDeltaPrefixArr} =>
-    visibleColumns->Belt.Array.keepMap(item => item->colDependentDeltaPrefixArr)
-  | {deltaPrefixArr} => deltaPrefixArr
-  }
-
-  let tableOverallBodyEntity: AnalyticsUtils.tableApiBodyEntity = {
-    startTimeFromUrl,
-    endTimeFromUrl,
-    ?filterValueFromUrl,
-    deltaMetrics,
-    isIndustry,
-    deltaPrefixArr,
-    tableMetrics,
-    ?mode,
-    customFilter,
-    moduleName,
-    showDeltaMetrics: false,
-    source,
-  }
-
-  let overallBody = switch analyticsTableEntity {
-  | {tableSummaryBody} => tableSummaryBody(tableOverallBodyEntity)
-  | _ => AnalyticsUtils.generateTablePayloadFromEntity(tableOverallBodyEntity)
-  }
-
-  let tableApiBodyEntity = {
-    ...tableOverallBodyEntity,
-    currenltySelectedTab: ?activeTab,
-    ?distributionArray,
-    showDeltaMetrics: showDelta,
-  }
-  let tableBody = switch analyticsTableEntity {
-  | {tableBodyEntity} => tableBodyEntity(tableApiBodyEntity)
-  | _ => AnalyticsUtils.generateTablePayloadFromEntity(tableApiBodyEntity)
-  }
-
-  let (updatedCell, showDeltaToggleUi) = switch analyticsTableEntity {
-  | {getUpdatedCell} => (
-      getUpdatedCell(tableApiBodyEntity),
-      Some(InputFields.boolInput(~input=showDeltaInput, ~placeholder="", ~isDisabled=false)),
-    )
-  | {tableEntity} => (tableEntity.getCell, None)
-  }
-
-  React.useEffect5(() => {
-    // overall values in table header
-    setShowTableHeaderLoading(_ => true)
-    setSankeyLoading(_ => true)
-    setTableInfoData(_ => Js.Json.object_(Js.Dict.empty()))
-    if startTimeFromUrl !== "" && endTimeFromUrl !== "" && parentToken->Belt.Option.isSome {
-      fetchApi(
-        tableEntity.uri,
-        ~method_=Post,
-        ~bodyStr=overallBody,
-        ~authToken=parentToken,
-        ~headers=[("QueryType", "TableInfo")]->Js.Dict.fromArray,
-        (),
-      )
-      ->addLogsAroundFetch(~logTitle="Table info Data Api", ~setStatusDict)
-      ->thenResolve(json => {
-        setTableInfoData(_ => json)
-        setShowTableHeaderLoading(_ => false)
-      })
-      ->catch(_err => {
-        setTableInfoData(_ => Js.Json.object_(Js.Dict.empty()))
-        setShowTableHeaderLoading(_ => false)
-        resolve()
-      })
-      ->ignore
-    }
-    None
-  }, (
-    topFiltersToSearchParam,
-    parentToken,
-    customFilter,
-    mode,
-    deltaPrefixArr->Js.Array2.joinWith(""),
-  ))
-  React.useEffect6(() => {
-    setTableLoading(_ => true)
-    setSankeyLoading(_ => true)
-    if (
-      startTimeFromUrl !== "" &&
-      endTimeFromUrl !== "" &&
-      parentToken->Belt.Option.isSome &&
-      activeTab->Belt.Option.isSome
-    ) {
-      fetchApi(
-        tableEntity.uri,
-        ~method_=Post,
-        ~bodyStr=tableBody,
-        ~authToken=parentToken,
-        ~headers=[("QueryType", "TableSankey")]->Js.Dict.fromArray,
-        (),
-      )
-      ->addLogsAroundFetch(~logTitle="Table and Sankey Data Api", ~setStatusDict)
-      ->thenResolve(json => {
-        setActiveTabState(_ => activeTab)
-        setTableData(_ => json->Some)
-        if !consumeSankeyFetchedData {
-          setSankeyFetchedData(
-            _ => Some(
-              json->getDictFromJsonObject->getJsonObjectFromDict("queryData")->getArrayFromJson([]),
-            ),
-          )
-        }
-        setSankeyLoading(_ => false)
-        setTableLoading(_ => false)
-      })
-      ->catch(_err => {
-        setActiveTabState(_ => activeTab)
-        setTableData(_ => Js.Json.object_(Js.Dict.empty())->Some)
-        if !consumeSankeyFetchedData {
-          setSankeyFetchedData(_ => Some([]))
-        }
-        setSankeyLoading(_ => false)
-        setTableLoading(_ => false)
-        resolve()
-      })
-      ->ignore
-    }
-    None
-  }, (
-    topFiltersToSearchParam,
-    `${activeTabStr}${deltaPrefixArr->Js.Array2.joinWith("")}`,
-    parentToken,
-    customFilter,
-    mode,
-    showDelta,
-  ))
-
-  let tableEntity = React.useMemo3(() => {
-    let data = tableInfoData->getDictFromJsonObject
-    let tableInfoDesc =
-      tableData->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))->getDictFromJsonObject
-    let value = data->getJsonObjectFromDict("queryData")->getTransactionTable->Belt.Array.get(0)
-    let metaData =
-      tableInfoDesc->getArrayFromDict("metaData", [])->AnalyticsUtils.deltaTimeRangeMapper
-
-    let getHeading = switch tableUpdatedHeading {
-    | Some(tableUpdatedHeading) => tableUpdatedHeading(~item=value, ~dateObj=Some(metaData), ~mode)
-    | None => getHeading
-    }
-
-    {
-      ...tableEntity,
-      getHeading,
-      getCell: updatedCell,
-    }
-  }, (tableInfoData, showDelta, tableData))
-  let sampleAiBodyMaker =
-    analyticsTableEntity.sampleApiBody->Belt.Option.getWithDefault(AnalyticsUtils.sampleApiBody)
-  let sampleApiBody = {...tableApiBodyEntity, ?filterValueFromUrl}
-  let dict = sampleAiBodyMaker(sampleApiBody)
-
-  React.useEffect1(() => {
-    setDefaultFilter(._ => dict)
-    None
-  }, [dict])
-
-  // sankey fetch
-  React.useEffect4(() => {
-    setSankeyLoading(_ => true)
-    switch sankeyEntity {
-    | Some(sankeyEntity) =>
-      if sankeyEntity.fetchData {
-        if startTimeFromUrl !== "" && endTimeFromUrl !== "" && parentToken->Belt.Option.isSome {
-          fetchApi(
-            sankeyEntity.uri,
-            ~method_=Post,
-            ~bodyStr=[
-              AnalyticsUtils.getFilterRequestBody(
-                ~groupByNames=sankeyEntity.groupByNames,
-                ~filter=filterValueFromUrl,
-                ~metrics=sankeyEntity.sankeyMetrics,
-                ~delta=false,
-                ~mode,
-                ~startDateTime=startTimeFromUrl,
-                ~endDateTime=endTimeFromUrl,
-                ~customFilter,
-                ~source=sankeyEntity.source,
-                (),
-              )->Js.Json.object_,
-            ]
-            ->Js.Json.array
-            ->Js.Json.stringify,
-            ~authToken=parentToken,
-            ~headers=[("QueryType", "Sankey")]->Js.Dict.fromArray,
-            (),
-          )
-          ->addLogsAroundFetch(~logTitle="Sankey Data Api")
-          ->thenResolve(json => {
-            setSankeyFetchedData(
-              _ => Some(
-                json
-                ->getDictFromJsonObject
-                ->getJsonObjectFromDict("queryData")
-                ->getArrayFromJson([]),
-              ),
-            )
-
-            setSankeyLoading(_ => false)
-          })
-          ->catch(_err => {
-            setSankeyFetchedData(_ => Some([]))
-            setSankeyLoading(_ => false)
-            resolve()
-          })
-          ->ignore
-        }
-      }
-
-    | None => ()
-    }
-
-    None
-  }, (sankeyEntity, topFiltersToSearchParam, customFilter, mode))
-
-  let (sankeyLevels, startNodeLable, endNodeLable) = React.useMemo2(() => {
-    switch sankeyEntity {
-    | Some(sankeyEntity) =>
-      sankeyEntity.fetchData
-        ? (sankeyEntity.groupByNames, sankeyEntity.startNodeLable, sankeyEntity.endNodeLable)
-        : (activeTabState, "Total Volume", "Status")
-    | None => (activeTabState, "Total Volume", "Status")
-    }
-  }, (activeTabState, sankeyEntity))
-
-  let tableDataLoading = {tableLoading || tableHeaderLoading}
-  React.useEffect2(() => {
-    if tableData !== None && tableDataLoading === false {
-      setTableLoaderType(_ => SideLoader)
-    }
-    None
-  }, (tableData, tableDataLoading))
-  React.useEffect3(() => {
-    if sankeyFetchedData !== None && (sankeyLoading || tableDataLoading) == false {
-      setSankeyLoaderType(_ => SideLoader)
-    }
-    None
-  }, (sankeyFetchedData, tableDataLoading, sankeyLoading))
-
-  let tableSankeyUi = () => {
-    [
-      {
-        if statusDict->Js.Dict.values->Js.Array2.includes(504) {
-          <AnalyticsUtils.NoDataFoundPage />
-        } else {
-          <Form>
-            <BaseTableComponent
-              filters=(startTimeFromUrl, endTimeFromUrl)
-              text
-              tableData={tableData->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))}
-              tableDataLoading
-              transactionTableDefaultCols
-              defaultSort
-              newDefaultCols
-              newAllCols
-              tableEntity
-              getTransactionTable
-              colMapper
-              tableGlobalFilter
-              activeTab={activeTabState->Belt.Option.getWithDefault([])}
-              ?showDeltaToggleUi
-              loaderType=tableLoaderType
-            />
-          </Form>
-        }
-      },
-      {
-        switch sankeyEntity {
-        | Some(sankeyEntity) =>
-          <Form>
-            <SankeyWithDropDown
-              data={sankeyFetchedData->Belt.Option.getWithDefault([])}
-              activeTab={sankeyLevels->Belt.Option.getWithDefault([])}
-              dataLoading={sankeyLoading}
-              sankeyConfig=sankeyEntity.sankeyMetricsConfig
-              startNodeLable
-              endNodeLable
-              loaderType=sankeyLoaderType
-            />
-          </Form>
-        | None => React.null
-        }
-      },
-    ]
-  }
-  tableSankeyUi
-}
-
-module TabDetails = {
-  @react.component
-  let make = (
-    ~chartEntity: DynamicChart.entity,
-    ~activeTab,
-    ~sankeyEntity: option<SankeyCharts.sankeyEntity>,
-    ~colMapper: 'colType => string,
-    ~modeKey=?,
-    ~moduleName,
-    ~updateUrl: Js.Dict.t<string> => unit,
-    ~text="Summary Table",
-    ~analyticsTableEntity: option<AnalyticsUtils.analyticsTableEntity<'colType, 't>>,
-  ) => {
-    let tableSankeyWrapper = useTableSankeyWrapper()
-
-    <div className="h-full mt-4">
-      <DynamicChart
-        entity=chartEntity selectedTab=activeTab ?modeKey chartId=moduleName updateUrl
-      />
-      {switch analyticsTableEntity {
-      | Some(analyticsTableEntity) =>
-        <div className="h-full -mx-4 mt-4 overflow-scroll">
-          {tableSankeyWrapper(~sankeyEntity, ~colMapper, ~text, ~analyticsTableEntity)->React.array}
-        </div>
-      | None => React.null
-      }}
-    </div>
-  }
-}
-
-module ParentAnalyticsComponentV1 = {
-  @react.component
-  let make = (
-    ~chartEntity as _: DynamicChart.entity,
-    ~sankeyEntity as _: option<SankeyCharts.sankeyEntity>=?,
-    ~tabValues as _: array<DynamicTabs.tab>,
-    ~colMapper as _: 'colType => string,
-    ~stepsForModule=[],
-    ~modeKey as _: option<string>=?,
-    ~analyticsTableEntity as _: option<AnalyticsUtils.analyticsTableEntity<'colType, 't>>=?,
-    ~children=React.null,
-    ~totalVolume=0,
-    ~setTotalVolume=_ => (),
-  ) => {
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let isMobileView = MatchMedia.useMobileChecker()
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-
-    let {parentAuthInfo} = React.useContext(TokenContextProvider.tokenContext)
-
-    let authInfo = switch parentAuthInfo {
-    | Some(info) => info
-    | None => HyperSwitchAuthTypes.getDummyAuthInfoForToken("")
-    }
-
-    let updateComponentPrefrences = UrlUtils.useUpdateUrlWith(~prefix="")
-
-    React.useEffect1(() => {
-      updateComponentPrefrences(~dict=filterValue)
-      None
-    }, [filterValue])
-
-    // as there should be always date and mode so added this condition
-    if getModuleFilters->Js.Dict.entries->Js.Array2.length > 0 && authInfo.token !== "" {
-      <div
-        className={`flex flex-col h-full gap-4 relative ${isMobileView ? "overflow-scroll" : ""}`}>
-        // case when no filters but download data is required
-        <div className={`flex flex-col pb-5 ${isMobileView ? "" : "overflow-scroll"}`}>
-          <div> {children} </div>
-        </div>
-      </div>
-    } else {
-      React.null
-    }
-  }
-}
-
-module ParentAnalyticsComponentNew = {
-  @react.component
-  let make = (~stepsForModule=[], ~domain="txns", ~children=React.null, ~totalVolume=0) => {
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let isMobileView = MatchMedia.useMobileChecker()
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-
-    let {parentAuthInfo} = React.useContext(TokenContextProvider.tokenContext)
-
-    let authInfo = switch parentAuthInfo {
-    | Some(info) => info
-    | None => HyperSwitchAuthTypes.getDummyAuthInfoForToken("")
-    }
-
-    let updateComponentPrefrences = UrlUtils.useUpdateUrlWith(~prefix="")
-
-    React.useEffect1(() => {
-      updateComponentPrefrences(~dict=filterValue)
-      None
-    }, [filterValue])
-
-    // as there should be always date and mode so added this condition
-    if getModuleFilters->Js.Dict.entries->Js.Array2.length > 0 && authInfo.token !== "" {
-      <div
-        className={`flex flex-col h-full gap-4 relative ${isMobileView ? "overflow-scroll" : ""}`}>
-        // case when no filters but download data is required
-        <div className={`flex flex-col pb-5 ${isMobileView ? "" : "overflow-x-hidden"}`}>
-          <div> {children} </div>
-        </div>
-      </div>
-    } else {
-      React.null
-    }
-  }
-}
-
-module OnCellClickDistribution = {
-  @react.component
-  let make = (
-    ~valDict,
-    ~value="Click to view",
-    ~tabValues: array<DynamicTabs.tab>,
-    ~domain: string,
-    ~customFilterKey: option<string>=?,
-    ~summaryTableOnClickEntity,
-    ~filterByData,
-    ~metrics,
-    ~groupBy,
-    ~defSort: Table.sortedObject,
-    ~defaultFiltersToModal=?,
-  ) => {
-    let (showTableModal, setShowTableModal) = React.useState(_ => false)
-    let (modalHeading, setModalHeading) = React.useState(_ => "")
-    let (defaultFilter, _) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let defaultFilterDict = defaultFilter->safeParse->getDictFromJsonObject
-    let activeTab =
-      defaultFilterDict
-      ->getArrayFromDict("activeTab", [])
-      ->Js.Array2.map(key => {
-        key->getStringFromJson("")
-      })
-
-    let defaultFilters = defaultFilterDict->getJsonObjectFromDict("filter")->getDictFromJsonObject
-    let dictKeys = valDict->Js.Dict.keys
-    let filters = defaultFilters->getJsonObjectFromDict("filters")->getDictFromJsonObject
-    let filterKeys = filters->Js.Dict.keys
-    let getTitle = key => {
-      (
-        tabValues
-        ->Js.Array2.filter(item => {
-          item.value == key
-        })
-        ->Belt.Array.get(0)
-        ->Belt.Option.getWithDefault({title: "", value: "", isRemovable: false})
-      ).title
-    }
-
-    activeTab->Js.Array2.forEach(key => {
-      if !(filterKeys->Js.Array2.includes(key)) {
-        filterKeys->Js.Array2.push(key)->ignore
-      }
-    })
-    filterKeys->Js.Array2.forEach(key => {
-      let value = valDict->getString(key, "")
-      if dictKeys->Js.Array2.includes(key) && value !== "" {
-        filters->Js.Dict.set(key, [value->Js.Json.string]->Js.Json.array)
-      }
-    })
-    let currentCustomFilterValue = switch customFilterKey {
-    | Some(customFilterKey) =>
-      filterValue->Js.Dict.get(customFilterKey)->Belt.Option.getWithDefault("")
-    | None => ""
-    }
-
-    defaultFilters->Js.Dict.set("filters", filters->Js.Json.object_)
-    if currentCustomFilterValue !== "" {
-      defaultFilters->Js.Dict.set("customFilter", currentCustomFilterValue->Js.Json.string)
-    }
-
-    let valStr =
-      activeTab
-      ->Js.Array2.map(key => {
-        valDict->getJsonObjectFromDict(key)
-      })
-      ->Js.Array2.joinWith(", ")
-
-    let keyStr = activeTab->Js.Array2.map(getTitle)->Js.Array2.joinWith(", ")
-
-    let heading = `${keyStr} : ${valStr}`
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    let onClick = _ => {
-      setShowTableModal(_ => true)
-      setModalHeading(_ => heading)
-    }
-    <>
-      <div
-        className="px-2 py-0.5 fira-code text-fs-13 font-normal text-sky-500 cursor-pointer"
-        onClick>
-        {React.string(`${value}`)}
-      </div>
-      {if showTableModal {
-        <Modal
-          modalHeading
-          headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background"
-          showModal=showTableModal
-          closeOnOutsideClick=true
-          setShowModal=setShowTableModal
-          borderBottom=true
-          modalClass="md:w-10/12 w-full md:mx-auto md:my-8 dark:!bg-jp-gray-lightgray_background p-4 pb-8 overflow-auto">
-          <Form>
-            <FormRenderer.FieldRenderer field=searchTable />
-            <AnalyticsUtils.TableErrorModalContent
-              defaultFilters
-              domain
-              filterByData
-              summayTableEntity=summaryTableOnClickEntity
-              metrics
-              customFilterValue=currentCustomFilterValue
-              groupBy
-              defSort
-              ?defaultFiltersToModal
-            />
-          </Form>
-        </Modal>
-      } else {
-        React.null
-      }}
-    </>
-  }
-}

From ff1b90b87f0188d7fca96cf9288465226317df9f Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:37:14 +0530
Subject: [PATCH 09/11] feat: Routing back to Integration Fields if Connector
 Label already exist. (#93)

---
 .../Connectors/ConnectorPaymentMethod.res         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
index be2e23d32..768f8ca69 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
@@ -8,11 +8,11 @@ let make = (
   ~isUpdateFlow,
   ~isPayoutFlow,
 ) => {
-  let hyperswitchMixPanel = HSMixPanel.useSendEvent()
   open ConnectorUtils
   open APIUtils
   open PageLoaderWrapper
   open LogicUtils
+  let hyperswitchMixPanel = HSMixPanel.useSendEvent()
   let url = RescriptReactRouter.useUrl()
   let _showAdvancedConfiguration = false
   let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ =>
@@ -22,7 +22,7 @@ let make = (
   let showToast = ToastState.useShowToast()
   let connectorID = initialValues->getDictFromJsonObject->getOptionString("merchant_connector_id")
   let (screenState, setScreenState) = React.useState(_ => Loading)
-  let updateAPIHook = useUpdateMethod()
+  let updateAPIHook = useUpdateMethod(~showErrorToast=false, ())
 
   let updateDetails = value => {
     setPaymentMethods(_ => value->Js.Array2.copy)
@@ -77,7 +77,16 @@ let make = (
     } catch {
     | Js.Exn.Error(e) => {
         let err = Js.Exn.message(e)->Belt.Option.getWithDefault("Something went wrong")
-        setScreenState(_ => PageLoaderWrapper.Error(err))
+        let errorCode = err->safeParse->getDictFromJsonObject->getString("code", "")
+        let errorMessage = err->safeParse->getDictFromJsonObject->getString("message", "")
+
+        if errorCode === "HE_01" {
+          showToast(~message="Connector label already exist!", ~toastType=ToastError, ())
+          setCurrentStep(_ => ConnectorTypes.IntegFields)
+        } else {
+          showToast(~message=errorMessage, ~toastType=ToastError, ())
+          setScreenState(_ => PageLoaderWrapper.Error(err))
+        }
       }
     }
   }

From 16a3e1850a658e397dc8f924f1bc07443e73ace5 Mon Sep 17 00:00:00 2001
From: Lokesh Jain <56452497+jainlokesh318@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:40:58 +0530
Subject: [PATCH 10/11] feat: sub steps (#56)

Co-authored-by: Lokesh Jain <lokesh.jain@juspay.in>
Co-authored-by: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
---
 package-lock.json                             |  4 +-
 .../IntegrateYourApp/IntegrateFromScratch.res | 27 ++++++++----
 .../IntegrateYourAppUtils.res                 | 23 ++++++++++
 .../IntegrateYourApp/MigrateFromStripe.res    | 26 ++++++++----
 .../Home/QuickStart/QuickStartTypes.res       | 20 +++++++++
 .../Home/QuickStart/QuickStartUtils.res       | 42 +++++++++++++++----
 .../HyperSwitch/Hooks/EnumVariantHook.res     |  4 ++
 7 files changed, 121 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 195c36bdd..581a1335b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "rescript-euler-dashboard",
+  "name": "hyperswitch-dashboard",
   "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "rescript-euler-dashboard",
+      "name": "hyperswitch-dashboard",
       "version": "1.0.5",
       "hasInstallScript": true,
       "license": "MIT",
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
index a85045ad2..073c4f22d 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
@@ -14,6 +14,7 @@ let make = (
   let (currentStep, setCurrentStep) = React.useState(_ => DownloadTestAPIKey)
   let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext)
   let isLastStep = currentStep === DisplayPaymentConfirmation
+  let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil()
 
   let theme = switch ThemeProvider.useTheme() {
   | Dark => "vs-dark"
@@ -25,10 +26,18 @@ let make = (
       buttonState={Normal}
       buttonType={PrimaryOutline}
       text="Back"
-      onClick={_ =>
-        currentStep === DownloadTestAPIKey
-          ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
-          : setCurrentStep(_ => getNavigationStepForStandardIntegration(~currentStep, ()))}
+      onClick={_ => {
+        let prevStep = getNavigationStepForStandardIntegration(~currentStep, ())
+        if currentStep === DownloadTestAPIKey {
+          setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
+        } else {
+          let _ = updateEnumInRecoil([
+            (String("pending"), currentStep->getPolyMorphicVariantOfIntegrationSubStep),
+            (String("ongoing"), prevStep->getPolyMorphicVariantOfIntegrationSubStep),
+          ])
+          setCurrentStep(_ => prevStep)
+        }
+      }}
       buttonSize=Small
     />
 
@@ -40,9 +49,13 @@ let make = (
         if isLastStep {
           markAsDone()->ignore
         } else {
-          setCurrentStep(_ =>
-            getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ())
-          )
+          let nextStep = getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ())
+          let _ = updateEnumInRecoil([
+            (String("completed"), currentStep->getPolyMorphicVariantOfIntegrationSubStep),
+            (String("ongoing"), nextStep->getPolyMorphicVariantOfIntegrationSubStep),
+          ])
+
+          setCurrentStep(_ => nextStep)
         }
       }}
       buttonSize=Small
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
index 35abaf046..2b24edd6b 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
@@ -45,3 +45,26 @@ let getNavigationStepForStandardIntegration = (
   | DisplayPaymentConfirmation => forward ? DisplayPaymentConfirmation : DisplayCheckout
   }
 }
+
+let getPolyMorphicVariantOfIntegrationSubStep: standardIntegrationSteps => QuickStartTypes.sectionHeadingVariant = (
+  currentStep: standardIntegrationSteps,
+) => {
+  switch currentStep {
+  | DownloadTestAPIKey => #DownloadTestAPIKey
+  | CreatePayment => #CreatePayment
+  | DisplayCheckout => #DisplayCheckout
+  | DisplayPaymentConfirmation => #DisplayPaymentConfirmation
+  }
+}
+
+let getPolyMorphicVariantOfMigrateFromStripe: migrateFromStripeSteps => QuickStartTypes.sectionHeadingVariant = (
+  currentStep: migrateFromStripeSteps,
+) => {
+  switch currentStep {
+  | DownloadAPIKey => #DownloadTestAPIKeyStripe
+  | InstallDeps => #InstallDeps
+  | ReplaceAPIKeys => #ReplaceAPIKeys
+  | ReconfigureCheckout => #ReconfigureCheckout
+  | LoadCheckout => #LoadCheckout
+  }
+}
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
index 0d1b1f156..562726bee 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
@@ -14,6 +14,7 @@ let make = (
   let (currentStep, setCurrentStep) = React.useState(_ => DownloadAPIKey)
   let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext)
   let isLastStep = currentStep === LoadCheckout
+  let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil()
 
   let theme = switch ThemeProvider.useTheme() {
   | Dark => "vs-dark"
@@ -25,10 +26,18 @@ let make = (
       buttonState={Normal}
       buttonType={PrimaryOutline}
       text="Back"
-      onClick={_ =>
-        currentStep === DownloadAPIKey
-          ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
-          : setCurrentStep(_ => getNavigationStepForMigrateFromStripe(~currentStep, ()))}
+      onClick={_ => {
+        let prevStep = getNavigationStepForMigrateFromStripe(~currentStep, ())
+        if currentStep === DownloadAPIKey {
+          setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
+        } else {
+          let _ = updateEnumInRecoil([
+            (String("pending"), currentStep->getPolyMorphicVariantOfMigrateFromStripe),
+            (String("ongoing"), prevStep->getPolyMorphicVariantOfMigrateFromStripe),
+          ])
+          setCurrentStep(_ => prevStep)
+        }
+      }}
       buttonSize=Small
     />
 
@@ -40,9 +49,12 @@ let make = (
         if isLastStep {
           markAsDone()->ignore
         } else {
-          setCurrentStep(_ =>
-            getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ())
-          )
+          let nextStep = getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ())
+          let _ = updateEnumInRecoil([
+            (String("completed"), currentStep->getPolyMorphicVariantOfMigrateFromStripe),
+            (String("ongoing"), nextStep->getPolyMorphicVariantOfMigrateFromStripe),
+          ])
+          setCurrentStep(_ => nextStep)
         }
       }}
       buttonSize=Small
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
index 34f0e65c2..caa84a5ac 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
@@ -47,6 +47,10 @@ type sectionHeadingVariant = [
   | #TestPayment
   | #IntegrationMethod
   | #IntegrationCompleted
+  | #DownloadTestAPIKey
+  | #CreatePayment
+  | #DisplayCheckout
+  | #DisplayPaymentConfirmation
   | #StripeConnected
   | #PaypalConnected
   | #SPRoutingConfigured
@@ -56,6 +60,11 @@ type sectionHeadingVariant = [
   | #SetupWoocomWebhook
   | #IsMultipleConfiguration
   | #GoLive
+  | #DownloadTestAPIKeyStripe
+  | #InstallDeps
+  | #ReplaceAPIKeys
+  | #ReconfigureCheckout
+  | #LoadCheckout
 ]
 
 type processorType = {
@@ -85,7 +94,17 @@ type responseType = {
   configureWoocom: bool,
   setupWoocomWebhook: bool,
   isMultipleConfiguration: bool,
+  downloadTestAPIKeyStripe: string,
+  installDeps: string,
+  replaceAPIKeys: string,
+  reconfigureCheckout: string,
+  loadCheckout: string,
+  downloadTestAPIKey: string,
+  createPayment: string,
+  displayCheckout: string,
+  displayPaymentConfirmation: string,
 }
+
 type requestObjectType =
   | ProcesorType(processorType)
   | RoutingType(routingType)
@@ -93,5 +112,6 @@ type requestObjectType =
   | IntegrationMethod(integrationMethod)
   | ConnectorChoice(connectorChoice)
   | Boolean(bool)
+  | String(string)
 
 type valueType = String(string) | Boolean(bool)
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
index 4ae161e6c..7de1e90e6 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
@@ -169,6 +169,13 @@ let getTypedValueFromDict = valueString => {
     ->getDictfromDict(#IntegrationMethod->getStringFromVariant)
     ->getIntegrationType,
     integrationCompleted: value->getBool(#IntegrationCompleted->getStringFromVariant, false),
+    downloadTestAPIKey: value->getString(#DownloadTestAPIKey->getStringFromVariant, ""),
+    createPayment: value->getString(#CreatePayment->getStringFromVariant, ""),
+    displayCheckout: value->getString(#DisplayCheckout->getStringFromVariant, ""),
+    displayPaymentConfirmation: value->getString(
+      #DisplayPaymentConfirmation->getStringFromVariant,
+      "",
+    ),
     stripeConnected: value
     ->getDictfromDict(#StripeConnected->getStringFromVariant)
     ->getProcessorType,
@@ -183,6 +190,11 @@ let getTypedValueFromDict = valueString => {
     configureWoocom: value->getBool(#ConfigureWoocom->getStringFromVariant, false),
     setupWoocomWebhook: value->getBool(#SetupWoocomWebhook->getStringFromVariant, false),
     isMultipleConfiguration: value->getBool(#IsMultipleConfiguration->getStringFromVariant, false),
+    downloadTestAPIKeyStripe: value->getString(#DownloadTestAPIKeyStripe->getStringFromVariant, ""),
+    installDeps: value->getString(#InstallDeps->getStringFromVariant, ""),
+    replaceAPIKeys: value->getString(#ReplaceAPIKeys->getStringFromVariant, ""),
+    reconfigureCheckout: value->getString(#ReconfigureCheckout->getStringFromVariant, ""),
+    loadCheckout: value->getString(#LoadCheckout->getStringFromVariant, ""),
   }
   typedValue
 }
@@ -231,6 +243,17 @@ let getStatusValue = (comparator: valueType, enumVariant, dashboardPageState) =>
     boolValue ? COMPLETED : dashboardPageState === enumVariant ? ONGOING : PENDING
   }
 }
+
+let getStatusFromString = statusString => {
+  open HSSelfServeSidebar
+  switch statusString->Js.String2.toUpperCase {
+  | "PENDING" => PENDING
+  | "COMPLETED" => COMPLETED
+  | "ONGOING" => ONGOING
+  | _ => PENDING
+  }
+}
+
 let sidebarTextBasedOnVariant = choiceState =>
   switch choiceState {
   | #MigrateFromStripe => "Hyperswitch For Stripe Users"
@@ -276,23 +299,23 @@ let getSidebarOptionsForIntegrateYourApp: (
       subOptions: [
         {
           title: "Download Test API Keys",
-          status: PENDING,
+          status: enumValue.downloadTestAPIKeyStripe->getStatusFromString,
         },
         {
           title: "Install Dependencies",
-          status: PENDING,
+          status: enumValue.installDeps->getStatusFromString,
         },
         {
           title: "Replace API keys",
-          status: PENDING,
+          status: enumValue.replaceAPIKeys->getStatusFromString,
         },
         {
           title: "Reconfigure Checkout Form",
-          status: PENDING,
+          status: enumValue.reconfigureCheckout->getStatusFromString,
         },
         {
           title: "Load Hyperswitch Checkout",
-          status: PENDING,
+          status: enumValue.loadCheckout->getStatusFromString,
         },
       ],
     },
@@ -317,19 +340,19 @@ let getSidebarOptionsForIntegrateYourApp: (
       subOptions: [
         {
           title: "Download Test API Key",
-          status: PENDING,
+          status: enumValue.downloadTestAPIKey->getStatusFromString,
         },
         {
           title: "Create a Payment",
-          status: PENDING,
+          status: enumValue.createPayment->getStatusFromString,
         },
         {
           title: "Display Hyperswitch Checkout",
-          status: PENDING,
+          status: enumValue.displayCheckout->getStatusFromString,
         },
         {
           title: "Display Payment Confirmation",
-          status: PENDING,
+          status: enumValue.displayPaymentConfirmation->getStatusFromString,
         },
       ],
     },
@@ -571,6 +594,7 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ
     ]->getJsonFromArrayOfJson
 
   | Boolean(_) => (parentVariant :> string)->Js.Json.string
+  | String(str) => str->Js.Json.string
   }
 }
 
diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
index ae31a0902..0a7ae6a37 100644
--- a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
+++ b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
@@ -48,6 +48,10 @@ let useUpdateEnumInRecoil = () => {
           let booleanDict = [((enumVariant :> string), true->Js.Json.boolean)]->Js.Dict.fromArray
           enumDictsArray->Array.push(booleanDict)
         }
+      | String(str) => {
+          let stringDict = [((enumVariant :> string), str->Js.Json.string)]->Js.Dict.fromArray
+          enumDictsArray->Array.push(stringDict)
+        }
       | _ => enumDictsArray->Array.push(bodyValForApi->getDictFromJsonObject)
       }
     })

From cc09ab534f8bc87ae71a117b965a5f1201cc5a35 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Tue, 12 Dec 2023 14:34:10 +0530
Subject: [PATCH 11/11] feat: default id for connector label (#84)

---
 public/hyperswitch/icons/solid.svg            |  8 +++++++
 src/components/tooltip/ToolTip.res            |  2 +-
 .../Connectors/ConnectorAccountDetails.res    | 23 ++++++++++++++++---
 .../ConnectorAccountDetailsHelper.res         | 11 +++++++--
 .../Connectors/ConnectorTableUtils.res        |  2 +-
 5 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg
index 7c73d26b4..74489e91d 100644
--- a/public/hyperswitch/icons/solid.svg
+++ b/public/hyperswitch/icons/solid.svg
@@ -4754,6 +4754,14 @@ License)
       d="M298.028 214.267L285.793 96H328c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v48c0 13.255 10.745 24 24 24h42.207L85.972 214.267C37.465 236.82 0 277.261 0 328c0 13.255 10.745 24 24 24h136v104.007c0 1.242.289 2.467.845 3.578l24 48c2.941 5.882 11.364 5.893 14.311 0l24-48a8.008 8.008 0 0 0 .845-3.578V352h136c13.255 0 24-10.745 24-24-.001-51.183-37.983-91.42-85.973-113.733z"
     ></path>
   </symbol>
+  <symbol id="tooltip_info" viewBox="0 0 12 13">
+    <path
+      d="M6 1.25C3.10078 1.25 0.75 3.60078 0.75 6.5C0.75 9.39922 3.10078 11.75 6 11.75C8.89922 11.75 11.25 9.39922 11.25 6.5C11.25 3.60078 8.89922 1.25 6 1.25ZM6 10.8594C3.59297 10.8594 1.64062 8.90703 1.64062 6.5C1.64062 4.09297 3.59297 2.14062 6 2.14062C8.40703 2.14062 10.3594 4.09297 10.3594 6.5C10.3594 8.90703 8.40703 10.8594 6 10.8594Z"
+    ></path>
+    <path
+      d="M5.46332 4H6.52896V4.96657H5.46332V4ZM5 8.20669H5.20077C5.30888 8.20669 5.3861 8.17933 5.43243 8.12462C5.47876 8.06383 5.50193 7.97264 5.50193 7.85106V6.79939C5.50193 6.66565 5.48134 6.56839 5.44015 6.5076C5.40412 6.44681 5.32947 6.41641 5.21622 6.41641H5V5.6231H6.51351V7.8693C6.51351 7.9848 6.53411 8.06991 6.57529 8.12462C6.62162 8.17933 6.69627 8.20669 6.79923 8.20669H7V9H5V8.20669Z"
+    ></path>
+  </symbol>
   <symbol id="ticket-alt" viewBox="0 0 576 512">
     <path
       d="M128 160h320v192H128V160zm400 96c0 26.51 21.49 48 48 48v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96c26.51 0 48-21.49 48-48s-21.49-48-48-48v-96c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v96c-26.51 0-48 21.49-48 48zm-48-104c0-13.255-10.745-24-24-24H120c-13.255 0-24 10.745-24 24v208c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V152z"
diff --git a/src/components/tooltip/ToolTip.res b/src/components/tooltip/ToolTip.res
index 2e0162b67..7ddda7430 100644
--- a/src/components/tooltip/ToolTip.res
+++ b/src/components/tooltip/ToolTip.res
@@ -614,7 +614,7 @@ let make = (
   ~descriptionComponent=React.null,
   ~tooltipPositioning: tooltipPositioning=#fixed,
   ~toolTipFor=?,
-  ~tooltipWidthClass="w-64",
+  ~tooltipWidthClass="w-fit",
   ~tooltipForWidthClass="",
   ~toolTipPosition: option<toolTipPosition>=?,
   ~customStyle="",
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
index 52b924357..1e98197ca 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -30,8 +30,9 @@ module BusinessProfileRender = {
     let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let {setDashboardPageState} = React.useContext(GlobalProvider.defaultContext)
     let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom)
-
     let arrayOfBusinessProfile = businessProfiles->MerchantAccountUtils.getArrayOfBusinessProfile
+    let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
+    let connectorLabelOnChange = ReactFinalForm.useField(`connector_label`).input.onChange
 
     let (showModalFromOtherScreen, setShowModalFromOtherScreen) = React.useState(_ => false)
 
@@ -64,6 +65,16 @@ module BusinessProfileRender = {
                 ...input,
                 onChange: {
                   ev => {
+                    let profileName = (
+                      arrayOfBusinessProfile
+                      ->Js.Array2.find((ele: HSwitchSettingTypes.profileEntity) =>
+                        ele.profile_id === ev->Identity.formReactEventToString
+                      )
+                      ->Belt.Option.getWithDefault(defaultBusinessProfile)
+                    ).profile_name
+                    connectorLabelOnChange(
+                      `${selectedConnector}_${profileName}`->Identity.stringToFormReactEvent,
+                    )
                     input.onChange(ev)
                     mixpanelEventWrapper(
                       ~url,
@@ -89,7 +100,7 @@ module BusinessProfileRender = {
       />
       <UIUtils.RenderIf condition={!isUpdateFlow}>
         <div className="text-gray-400 text-sm mt-3">
-          <span> {"Manage your list of business units"->React.string} </span>
+          <span> {"Manage your list of profiles."->React.string} </span>
           <span
             className={`ml-1 ${hereTextStyle}`}
             onClick={_ => {
@@ -272,12 +283,18 @@ let make = (
   let (showModal, setShowModal) = React.useState(_ => false)
 
   let updatedInitialVal = React.useMemo1(() => {
+    let initialValuesToDict = initialValues->LogicUtils.getDictFromJsonObject
+    if !isUpdateFlow {
+      initialValuesToDict->Js.Dict.set(
+        "connector_label",
+        `${connector}_${activeBusinessProfile.profile_name}`->Js.Json.string,
+      )
+    }
     if (
       connector
       ->getConnectorNameTypeFromString
       ->checkIsDummyConnector(featureFlagDetails.testProcessors) && !isUpdateFlow
     ) {
-      let initialValuesToDict = initialValues->LogicUtils.getDictFromJsonObject
       let apiKeyDict = [("api_key", "test_key"->Js.Json.string)]->Js.Dict.fromArray
       initialValuesToDict->Js.Dict.set("connector_account_details", apiKeyDict->Js.Json.object_)
 
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
index d334e81cb..d5684ede0 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
@@ -39,11 +39,15 @@ let inputField = (
   ~getPlaceholder,
   ~checkRequiredFields,
   ~disabled,
+  ~description="",
+  ~toolTipPosition: ToolTip.toolTipPosition=ToolTip.Right,
   (),
 ) =>
   FormRenderer.makeFieldInfo(
     ~label,
     ~name,
+    ~description,
+    ~toolTipPosition,
     ~customInput=InputFields.textInput(~isDisabled=disabled, ()),
     ~placeholder=switch getPlaceholder {
     | Some(fun) => fun(connector, field, label)
@@ -93,6 +97,7 @@ module RenderConnectorInputFields = {
     ~getPlaceholder=?,
     ~isLabelNested=true,
     ~disabled=false,
+    ~description="",
   ) => {
     let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
     open ConnectorUtils
@@ -100,11 +105,11 @@ module RenderConnectorInputFields = {
     let keys =
       details->Js.Dict.keys->Js.Array2.filter(ele => !Js.Array2.includes(keysToIgnore, ele))
     keys
-    ->Array.mapWithIndex((field, index) => {
+    ->Array.map(field => {
       let label = details->getString(field, "")
       let formName = isLabelNested ? `${name}.${field}` : name
       <UIUtils.RenderIf condition={label->Js.String2.length > 0}>
-        <div key={index->string_of_int}>
+        <div key={label}>
           <FormRenderer.FieldRenderer
             labelClass="font-semibold !text-hyperswitch_black"
             field={switch (connector, field) {
@@ -118,6 +123,7 @@ module RenderConnectorInputFields = {
                 ~checkRequiredFields,
                 ~getPlaceholder,
                 ~disabled,
+                ~description,
                 (),
               )
             }}
@@ -210,6 +216,7 @@ module ConnectorConfigurationFields = {
         selectedConnector
         isLabelNested=false
         disabled={isUpdateFlow ? true : false}
+        description="This is an unique label you can generate and pass in order to identify this connector account on your Hyperswitch dashboard and reports. Eg: if your profile label is 'default', connector label can be 'stripe_default'"
       />
       <RenderConnectorInputFields
         details={connectorMetaDataFields}
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
index 21a26b2a2..aeb416188 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
@@ -185,7 +185,7 @@ let getHeading = colType => {
   | ProfileName =>
     Table.makeHeaderInfo(~key="profile_name", ~title="Profile Name", ~showSort=false, ())
   | ConnectorLabel =>
-    Table.makeHeaderInfo(~key="connector_label", ~title="Label", ~showSort=false, ())
+    Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label", ~showSort=false, ())
   | PaymentMethods =>
     Table.makeHeaderInfo(~key="payment_methods", ~title="Payment Methods", ~showSort=false, ())
   }