fix: amount filter validation (#1834)

Co-authored-by: Kanika Bansal <[email protected]>
juspay · Nov 29, 2024 · 8be6040 · 8be6040
1 parent 20a2516
commit 8be6040
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 114 deletions.
diff --git a/src/components/Filter.res b/src/components/Filter.res
@@ -366,10 +366,7 @@ let make = (
     </Menu>
 
   <Form
-    onSubmit
-    initialValues=initialValueJson
-    validate={values =>
-      values->OrderUIUtils.validateForm(~fieldsToValidate=[StartAmount, EndAmount])}>
+    onSubmit initialValues=initialValueJson validate={values => values->OrderUIUtils.validateForm}>
     <AutoSubmitter autoApply submit=onSubmit defaultFilterKeys submitInputOnEnter />
     {<AddDataAttributes attributes=[("data-filter", "remoteFilters")]>
       {<>

diff --git a/src/entryPoints/AuthModule/Common/CommonInputFields.res b/src/entryPoints/AuthModule/Common/CommonInputFields.res
@@ -100,79 +100,3 @@ let passwordField = FormRenderer.makeFieldInfo(
   ),
   ~isRequired=false,
 )
-
-let startamountField = FormRenderer.makeFieldInfo(
-  ~label="",
-  ~name="start_amount",
-  ~placeholder="0",
-  ~customInput=InputFields.numericTextInput(),
-  ~type_="number",
-)
-
-let endAmountField = FormRenderer.makeFieldInfo(
-  ~label="",
-  ~name="end_amount",
-  ~placeholder="0",
-  ~customInput=InputFields.numericTextInput(),
-  ~type_="number",
-)
-
-module CustomAmountEqualField = {
-  @react.component
-  let make = () => {
-    let form = ReactFinalForm.useForm()
-    <div className={"flex gap-5 items-center justify-center w-28 ml-2"}>
-      <FormRenderer.FieldRenderer
-        labelClass="font-semibold !text-black"
-        field={FormRenderer.makeFieldInfo(~label="", ~name="start_amount", ~customInput=(
-          ~input,
-          ~placeholder as _,
-        ) =>
-          InputFields.numericTextInput()(
-            ~input={
-              ...input,
-              onChange: {
-                ev => {
-                  form.change("end_amount", ev->Identity.genericTypeToJson)
-                  input.onChange(ev)
-                }
-              },
-            },
-            ~placeholder="0",
-          )
-        )}
-      />
-    </div>
-  }
-}
-
-module CustomAmountBetweenField = {
-  @react.component
-  let make = () => {
-    let form = ReactFinalForm.useForm()
-    <div className="flex gap-1 items-center justify-center mx-1 w-10.25-rem">
-      <FormRenderer.FieldRenderer
-        labelClass="font-semibold !text-black"
-        field={FormRenderer.makeFieldInfo(~label="", ~name="start_amount", ~customInput=(
-          ~input,
-          ~placeholder as _,
-        ) =>
-          InputFields.numericTextInput()(
-            ~input={
-              ...input,
-              onChange: {
-                ev => {
-                  form.change("end_amount", 0->Identity.genericTypeToJson)
-                  input.onChange(ev)
-                }
-              },
-            },
-            ~placeholder="0",
-          )
-        )}
-      />
-      <p className="mt-3 text-xs text-jp-gray-700"> {"and"->React.string} </p>
-      <FormRenderer.FieldRenderer labelClass="font-semibold !text-black" field=endAmountField />
-    </div>
-  }
-}
diff --git a/src/screens/Order/OrderTypes.res b/src/screens/Order/OrderTypes.res
@@ -289,19 +289,6 @@ type amountFilter =
   | InBetween
   | UnknownRange(string)
 
-type amountFields =
-  | StartAmount
-  | EndAmount
-  | UnknownValidateFields(string)
-
-let validationFieldsMapper = key => {
-  switch key {
-  | StartAmount => "start_amount"
-  | EndAmount => "end_amount"
-  | UnknownValidateFields(key) => key
-  }
-}
-
 let getSortString = (value: LoadedTable.sortOb) =>
   switch value.sortType {
   | ASC => "asc"

diff --git a/src/screens/Order/OrderUIUtils.res b/src/screens/Order/OrderUIUtils.res
@@ -539,22 +539,31 @@ let orderViewList: OMPSwitchTypes.ompViews = [
 let deleteNestedKeys = (dict: Dict.t<'a>, keys: array<string>) => {
   keys->Array.forEach(key => dict->Dict.delete(key))
 }
-
-let validateForm = (values, ~fieldsToValidate: array<amountFields>) => {
-  let errors = Dict.make()
+let validateForm = values => {
   open LogicUtils
-  let valuesDict = values->JsonFlattenUtils.flattenObject(false)
-  let amountValues = fieldsToValidate->Array.map(key => {
-    valuesDict->getJsonObjectFromDict(key->validationFieldsMapper)
-  })
-  let start_amount = amountValues->getValueFromArray(0, JSON.Encode.null)
-  let end_amount = amountValues->getValueFromArray(1, JSON.Encode.null)
-  if start_amount->isNullJson && end_amount->isNullJson {
-    errors->Dict.set("Invalid", "Please enter value."->JSON.Encode.string)
-  } else if !isNullJson(start_amount) && !isNullJson(end_amount) {
-    if end_amount < start_amount {
+  let errors = Dict.make()
+  let dict = values->getDictFromJsonObject
+  let sAmntK = dict->getvalFromDict("start_amount")->mapOptionOrDefault(None, key => Some(key))
+  let eAmtK = dict->getvalFromDict("end_amount")->mapOptionOrDefault(None, key => Some(key))
+
+  // check only if the key is present
+  if sAmntK->Option.isSome && eAmtK->Option.isSome {
+    let _ = if (
+      sAmntK->Option.getOr(JSON.Encode.null) === JSON.Encode.null &&
+        eAmtK->Option.getOr(JSON.Encode.null) === JSON.Encode.null
+    ) {
       errors->Dict.set("Invalid", "Please enter valid range."->JSON.Encode.string)
+    } else {
+      let startAmt = sAmntK->getFloatFromJson(0.0)
+      let endAmt = eAmtK->getFloatFromJson(0.0)
+      if endAmt < startAmt {
+        errors->Dict.set("Invalid", "Please enter valid range."->JSON.Encode.string)
+      }
     }
+  } else if sAmntK->Option.isSome && sAmntK->Option.getOr(JSON.Encode.null) === JSON.Encode.null {
+    errors->Dict.set("Invalid", "Please enter valid range."->JSON.Encode.string)
+  } else if eAmtK->Option.isSome && eAmtK->Option.getOr(JSON.Encode.null) === JSON.Encode.null {
+    errors->Dict.set("Invalid", "Please enter valid range."->JSON.Encode.string)
   }
   errors->JSON.Encode.object
 }
diff --git a/src/screens/Order/OrdersHelper.res b/src/screens/Order/OrdersHelper.res
@@ -1,27 +1,114 @@
-open CommonAuthForm
-open CommonInputFields
-open OrderTypes
+let startamountField = FormRenderer.makeFieldInfo(
+  ~label="",
+  ~name="start_amount",
+  ~placeholder="0",
+  ~customInput=InputFields.numericTextInput(),
+  ~type_="number",
+)
+
+let endAmountField = FormRenderer.makeFieldInfo(
+  ~label="",
+  ~name="end_amount",
+  ~placeholder="0",
+  ~customInput=InputFields.numericTextInput(),
+  ~type_="number",
+)
+
+module CustomAmountEqualField = {
+  @react.component
+  let make = () => {
+    let form = ReactFinalForm.useForm()
+    <div className={"flex gap-5 items-center justify-center w-28 ml-2"}>
+      <FormRenderer.FieldRenderer
+        labelClass="font-semibold !text-black"
+        field={FormRenderer.makeFieldInfo(~label="", ~name="start_amount", ~customInput=(
+          ~input,
+          ~placeholder as _,
+        ) =>
+          InputFields.numericTextInput()(
+            ~input={
+              ...input,
+              onChange: {
+                ev => {
+                  form.change("end_amount", ev->Identity.genericTypeToJson)
+                  input.onChange(ev)
+                }
+              },
+            },
+            ~placeholder="0",
+          )
+        )}
+      />
+    </div>
+  }
+}
+
+module CustomAmountBetweenField = {
+  @react.component
+  let make = () => {
+    <div className="flex gap-1 items-center justify-center mx-1 w-10.25-rem">
+      <FormRenderer.FieldRenderer
+        labelClass="font-semibold !text-black"
+        field={FormRenderer.makeFieldInfo(~label="", ~name="start_amount", ~customInput=(
+          ~input,
+          ~placeholder as _,
+        ) =>
+          InputFields.numericTextInput()(
+            ~input={
+              ...input,
+              onChange: {
+                ev => {
+                  input.onChange(ev)
+                }
+              },
+            },
+            ~placeholder="0",
+          )
+        )}
+      />
+      <p className="mt-3 text-xs text-jp-gray-700"> {"and"->React.string} </p>
+      <FormRenderer.FieldRenderer labelClass="font-semibold !text-black" field=endAmountField />
+    </div>
+  }
+}
+
 @react.component
 let make = (~options) => {
+  open OrderTypes
+  open LogicUtils
+  open CommonAuthForm
   let (selectedOption, setSelectedOption) = React.useState(_ => UnknownRange("Select Amount"))
   let form = ReactFinalForm.useForm()
+  let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
+    ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
+  )
   let input: ReactFinalForm.fieldRenderPropsInput = {
     name: "amount",
     onBlur: _ => (),
     onChange: ev => {
       let newValue = ev->Identity.formReactEventToString
-      if newValue != selectedOption->mapRangeTypetoString && newValue->LogicUtils.isNonEmptyString {
-        setSelectedOption(_ => newValue->mapStringToRange)
-        form.change("start_amount", JSON.Encode.null)
-        form.change("end_amount", JSON.Encode.null)
-      }
+      form.change("start_amount", JSON.Encode.null)
+      form.change("end_amount", JSON.Encode.null)
+      setSelectedOption(_ => newValue->mapStringToRange)
     },
     onFocus: _ => (),
     value: {
       selectedOption->mapRangeTypetoString->JSON.Encode.string
     },
     checked: true,
   }
+  React.useEffect(() => {
+    let formDict = formState.values->getDictFromJsonObject
+    if selectedOption == GreaterThanEqualTo {
+      let _ = formDict->Dict.delete("end_amount")
+    } else if selectedOption == LessThanEqualTo {
+      let _ = formDict->Dict.delete("start_amount")
+    }
+    // remove the object reference
+    let t = formDict->JSON.Encode.object->JSON.stringify->safeParse
+    form.reset(t->Nullable.make)
+    None
+  }, [selectedOption])
 
   let renderCommonFields = field =>
     <div className={"flex gap-5 items-center justify-center w-28"}>