feat: Refunds amount filter and UI enhancements (#1884)

src/screens/HSwitchRemoteFilter.res

@@ -124,14 +124,15 @@ module SearchBarFilter = {
       checked: true,
     }
 
-    <div className="w-64">
+    <div className="w-max">
       {InputFields.textInput(
         ~customStyle="rounded-lg placeholder:opacity-90",
         ~customPaddingClass="px-0",
         ~leftIcon=<Icon size=14 name="search" />,
         ~iconOpacity="opacity-100",
         ~leftIconCustomStyle="pl-4",
         ~inputStyle="!placeholder:opacity-90",
+        ~customWidth="w-72",
       )(~input=inputSearch, ~placeholder)}
     </div>
   }

src/screens/Payouts/PayoutsList.res

@@ -79,7 +79,7 @@ let make = () => {
             initialFixedFilter
             setOffset
             customLeftView={<SearchBarFilter
-              placeholder="Search payout id" setSearchVal=setSearchText searchVal=searchText
+              placeholder="Search for payout ID" setSearchVal=setSearchText searchVal=searchText
             />}
             entityName=PAYOUTS_FILTERS
           />

src/screens/Transaction/CommonFilters/AmountFilter/AmountFilterUtils.res

@@ -1,4 +1,5 @@
 open AmountFilterTypes
+open LogicUtils
 let amountFilterOptions: array<FilterSelectBox.dropdownOption> = [
   GreaterThanOrEqualTo,
   LessThanOrEqualTo,
@@ -11,8 +12,8 @@ let amountFilterOptions: array<FilterSelectBox.dropdownOption> = [
     value: label,
   }
 })
+let encodeFloatOrDefault = val => (val->getFloatFromJson(0.0) *. 100.0)->JSON.Encode.float
 let validateAmount = dict => {
-  open LogicUtils
   let sAmntK = dict->getFloat((#start_amount: AmountFilterTypes.amountFilterChild :> string), -1.0)
   let eAmtK = dict->getFloat((#end_amount: AmountFilterTypes.amountFilterChild :> string), -1.0)
   let key = (#amount_option: AmountFilterTypes.amountFilterChild :> string)
@@ -27,3 +28,17 @@ let validateAmount = dict => {
   }
   haserror
 }
+let createAmountQuery = (~dict) => {
+  let hasAmountError = validateAmount(dict)
+  if !hasAmountError {
+    let encodeAmount = value => value->mapOptionOrDefault(JSON.Encode.null, encodeFloatOrDefault)
+    dict->Dict.set(
+      "amount_filter",
+      [
+        ("start_amount", dict->getvalFromDict("start_amount")->encodeAmount),
+        ("end_amount", dict->getvalFromDict("end_amount")->encodeAmount),
+      ]->getJsonFromArrayOfJson,
+    )
+  }
+  dict
+}

src/screens/Transaction/Disputes/Disputes.res

@@ -87,7 +87,7 @@ let make = () => {
       initialFixedFilter
       setOffset
       customLeftView={<SearchBarFilter
-        placeholder="Search for any disptue id" setSearchVal=setSearchText searchVal=searchText
+        placeholder="Search for dispute ID" setSearchVal=setSearchText searchVal=searchText
       />}
       entityName=DISPUTE_FILTERS
       title="Disputes"

src/screens/Transaction/Order/OrderUIUtils.res

@@ -550,7 +550,3 @@ let orderViewList: OMPSwitchTypes.ompViews = [
     entity: #Profile,
   },
 ]
-
-let deleteNestedKeys = (dict: Dict.t<'a>, keys: array<string>) => {
-  keys->Array.forEach(key => dict->Dict.delete(key))
-}

src/screens/Transaction/Order/Orders.res

@@ -53,36 +53,16 @@ let make = (~previewOnly=false) => {
             ]->getJsonFromArrayOfJson,
           )
         }
-        let encodeFloatOrDefault = val => (val->getFloatFromJson(0.0) *. 100.0)->JSON.Encode.float
-        let hasAmountError = AmountFilterUtils.validateAmount(dict)
-        if !hasAmountError {
-          filters->Dict.set(
-            "amount_filter",
-            [
-              (
-                "start_amount",
-                getvalFromDict(dict, "start_amount")->mapOptionOrDefault(
-                  JSON.Encode.null,
-                  encodeFloatOrDefault,
-                ),
-              ),
-              (
-                "end_amount",
-                getvalFromDict(dict, "end_amount")->mapOptionOrDefault(
-                  JSON.Encode.null,
-                  encodeFloatOrDefault,
-                ),
-              ),
-            ]->getJsonFromArrayOfJson,
-          )
-        }
-        dict
+        //to create amount_filter query
+        let newDict = AmountFilterUtils.createAmountQuery(~dict)
+        newDict
         ->Dict.toArray
         ->Array.forEach(item => {
           let (key, value) = item
           filters->Dict.set(key, value)
         })
-        filters->OrderUIUtils.deleteNestedKeys(["start_amount", "end_amount", "amount_option"])
+        //to delete unused keys
+        filters->deleteNestedKeys(["start_amount", "end_amount", "amount_option"])
         filters
         ->getOrdersList(
           ~updateDetails,
@@ -146,7 +126,7 @@ let make = (~previewOnly=false) => {
       setOffset
       submitInputOnEnter=true
       customLeftView={<SearchBarFilter
-        placeholder="Search for any payment id" setSearchVal=setSearchText searchVal=searchText
+        placeholder="Search for payment ID" setSearchVal=setSearchText searchVal=searchText
       />}
       entityName=ORDER_FILTERS
     />

src/screens/Transaction/Refunds/Refund.res

@@ -32,14 +32,16 @@ let make = () => {
         filters->Dict.set("payment_id", searchText->String.trim->JSON.Encode.string)
         filters->Dict.set("refund_id", searchText->String.trim->JSON.Encode.string)
       }
-
-      dict
+      //to create amount_filter query
+      let newdict = AmountFilterUtils.createAmountQuery(~dict)
+      newdict
       ->Dict.toArray
       ->Array.forEach(item => {
         let (key, value) = item
         filters->Dict.set(key, value)
       })
-
+      //to delete unused keys
+      filters->deleteNestedKeys(["start_amount", "end_amount", "amount_option"])
       filters
       ->getRefundsList(
         ~updateDetails,
@@ -95,7 +97,7 @@ let make = () => {
             initialFixedFilter
             setOffset
             customLeftView={<SearchBarFilter
-              placeholder="Search for any payment id or refund id"
+              placeholder="Search for payment ID or refund ID"
               setSearchVal=setSearchText
               searchVal=searchText
             />}

src/screens/Transaction/Refunds/RefundUtils.res

@@ -3,13 +3,15 @@ type filterTypes = {
   currency: array<string>,
   status: array<string>,
   connector_label: array<string>,
+  amount: array<string>,
 }
 
 type filter = [
   | #connector
   | #currency
   | #status
   | #connector_label
+  | #amount
   | #unknown
 ]
 
@@ -19,6 +21,7 @@ let getFilterTypeFromString = filterType => {
   | "currency" => #currency
   | "connector_label" => #connector_label
   | "refund_status" => #status
+  | "amount" => #amount
   | _ => #unknown
   }
 }
@@ -195,6 +198,7 @@ let itemToObjMapper = dict => {
     currency: dict->getArrayFromDict("currency", [])->getStrArrayFromJsonArray,
     status: dict->getArrayFromDict("refund_status", [])->getStrArrayFromJsonArray,
     connector_label: [],
+    amount: [],
   }
 }
 
@@ -210,8 +214,9 @@ let initialFilters = (json, filtervalues, _, _, _) => {
   if connectorFilter->Array.length !== 0 {
     filtersArray->Array.push(#connector_label->getLabelFromFilterType)
   }
-
-  filtersArray->Array.map((key): EntityType.initialFilters<'t> => {
+  let additionalFilters = [#amount]->Array.map(getLabelFromFilterType)
+  let allFiltersArray = filtersArray->Array.concat(additionalFilters)
+  allFiltersArray->Array.map((key): EntityType.initialFilters<'t> => {
     let title = `Select ${key->snakeToTitle}`
 
     let values = switch key->getFilterTypeFromString {
@@ -226,21 +231,28 @@ let initialFilters = (json, filtervalues, _, _, _) => {
     | #connector_label => getOptionsForRefundFilters(filterDict, filtervalues)
     | _ => values->FilterSelectBox.makeOptions
     }
-
+    let customInput = switch key->getFilterTypeFromString {
+    | #amount =>
+      (~input as _, ~placeholder as _) => {
+        <AmountFilter options=AmountFilterUtils.amountFilterOptions />
+      }
+    | _ =>
+      InputFields.filterMultiSelectInput(
+        ~options,
+        ~buttonText=title,
+        ~showSelectionAsChips=false,
+        ~searchable=true,
+        ~showToolTip=true,
+        ~showNameAsToolTip=true,
+        ~customButtonStyle="bg-none",
+        (),
+      )
+    }
     {
       field: FormRenderer.makeFieldInfo(
         ~label=key,
         ~name=getValueFromFilterType(key->getFilterTypeFromString),
-        ~customInput=InputFields.filterMultiSelectInput(
-          ~options,
-          ~buttonText=title,
-          ~showSelectionAsChips=false,
-          ~searchable=true,
-          ~showToolTip=true,
-          ~showNameAsToolTip=true,
-          ~customButtonStyle="bg-none",
-          (),
-        ),
+        ~customInput,
       ),
       localFilter: Some(filterByData),
     }

src/utils/LogicUtils.res

@@ -676,3 +676,6 @@ let getValFromNullableValue = (val, default) => {
 }
 
 let dateFormat = (timestamp, format) => (timestamp->DayJs.getDayJsForString).format(format)
+
+let deleteNestedKeys = (dict: Dict.t<'a>, keys: array<string>) =>
+  keys->Array.forEach(key => dict->Dict.delete(key))