From 52933b434dd6920e821a465b51c5bbb46ced68cd Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Wed, 20 Dec 2023 14:16:39 +0530
Subject: [PATCH] feat: dropdown grouping added in routing (#102)

Co-authored-by: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
---
 .../RoutingRevamp/AdvancedRoutingUIUtils.res  | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 31f8ce1d6..0a4f96c16 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -283,11 +283,40 @@ let metaInput = (id, keyType) =>
 
 module FieldInp = {
   @react.component
-  let make = (~ops, ~prefix, ~onChangeMethod) => {
+  let make = (~methodKeys, ~prefix, ~onChangeMethod) => {
     let field = ReactFinalForm.useField(`${prefix}.lhs`).input
     let op = ReactFinalForm.useField(`${prefix}.comparison`).input
     let val = ReactFinalForm.useField(`${prefix}.value.value`).input
 
+    let convertedValue = React.useMemo0(() => {
+      let keyDescriptionMapper = Window.getDescriptionCategory()->MapTypes.changeType
+      keyDescriptionMapper->LogicUtils.convertMapObjectToDict
+    })
+
+    let options = React.useMemo0(() =>
+      convertedValue->Js.Dict.keys->Js.Array2.reduce((acc, ele) => {
+        open LogicUtils
+        convertedValue
+        ->getArrayFromDict(ele, [])
+        ->Js.Array2.forEach(
+          value => {
+            let dictValue = value->LogicUtils.getDictFromJsonObject
+            let kindValue = dictValue->getString("kind", "")
+            if methodKeys->Js.Array2.includes(kindValue) {
+              let generatedSelectBoxOptionType: SelectBox.dropdownOption = {
+                label: kindValue,
+                value: kindValue,
+                description: dictValue->getString("description", ""),
+                optGroup: ele,
+              }
+              acc->Js.Array2.push(generatedSelectBoxOptionType)->ignore
+            }
+          },
+        )
+        acc
+      }, [])
+    )
+
     let input: ReactFinalForm.fieldRenderPropsInput = {
       name: "string",
       onBlur: _ev => (),
@@ -303,10 +332,6 @@ module FieldInp = {
       checked: true,
     }
 
-    let options = ops->Js.Array2.map((op): SelectBox.dropdownOption => {
-      {value: op, label: op}
-    })
-
     <SelectBox.BaseDropdown
       allowMultiSelect=false buttonText="Select Field" input options hideMultiSelectButtons=true
     />
@@ -358,7 +383,7 @@ module RuleFieldBase = {
           </UIUtils.RenderIf>
           <div className="-mt-5 p-1">
             <FieldWrapper label="">
-              <FieldInp ops=methodKeys prefix=id onChangeMethod />
+              <FieldInp methodKeys prefix=id onChangeMethod />
             </FieldWrapper>
           </div>
           <div className="-mt-5">