fix: HS-2222: Validation failing for Billing details (#165)

juspay · Feb 13, 2024 · 2c1754d · 2c1754d
1 parent ad9dde6
commit 2c1754d
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 31 deletions.
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -196,31 +196,60 @@ let make = (
   let onPostalChange = ev => {
     let val = ReactEvent.Form.target(ev)["value"]
 
-    setPostalCode(.prev => {
-      ...prev,
-      value: val,
-      errorString: "",
-    })
-    if regex !== "" && Js.Re.test_(regex->Js.Re.fromString, val) {
-      CardUtils.blurRef(postalRef)
+    if val !== "" {
+      setPostalCode(._ => {
+        isValid: Some(true),
+        value: val,
+        errorString: "",
+      })
+    } else {
+      setPostalCode(._ => {
+        isValid: Some(false),
+        value: val,
+        errorString: "",
+      })
     }
   }
 
   let onPostalBlur = ev => {
-    let val = ReactEvent.Focus.target(ev)["value"]
-    if regex !== "" && Js.Re.test_(regex->Js.Re.fromString, val) && val !== "" {
-      setPostalCode(.prev => {
-        ...prev,
-        isValid: Some(true),
-        errorString: "",
-      })
-    } else if regex !== "" && !Js.Re.test_(regex->Js.Re.fromString, val) && val !== "" {
+    // let val = ReactEvent.Focus.target(ev)["value"]
+    // if !postalCode.isValid {
+    //   setPostalCode(.prev => {
+    //     ...prev,
+    //     isValid: Some(false),
+    //     errorString: "Invalid postal code",
+    //   })
+    // }
+
+    switch postalCode.isValid {
+    | Some(val) =>
+      if !val {
+        setPostalCode(.prev => {
+          ...prev,
+          isValid: Some(false),
+          errorString: "Invalid postal code",
+        })
+      }
+    | None =>
       setPostalCode(.prev => {
         ...prev,
         isValid: Some(false),
         errorString: "Invalid postal code",
       })
     }
+    // if regex !== "" && Js.Re.test_(regex->Js.Re.fromString, val) && val !== "" {
+    //   setPostalCode(.prev => {
+    //     ...prev,
+    //     isValid: Some(true),
+    //     errorString: "",
+    //   })
+    // } else if regex !== "" && !Js.Re.test_(regex->Js.Re.fromString, val) && val !== "" {
+    //   setPostalCode(.prev => {
+    //     ...prev,
+    //     isValid: Some(false),
+    //     errorString: "Invalid postal code",
+    //   })
+    // }
   }
 
   DynamicFieldsUtils.useRequiredFieldsEmptyAndValid(
@@ -514,11 +543,14 @@ let make = (
                       <div className="flex gap-1">
                         <PaymentField
                           fieldName=localeString.cityLabel
-                          setValue={setCity}
+                          // setValue={setCity}
                           value=city
                           onChange={ev => {
                             setCity(.prev => {
                               ...prev,
+                              isValid: ReactEvent.Form.target(ev)["value"] !== ""
+                                ? Some(true)
+                                : Some(false),
                               value: ReactEvent.Form.target(ev)["value"],
                             })
                           }}
@@ -569,11 +601,14 @@ let make = (
                     | AddressLine1 =>
                       <PaymentField
                         fieldName=localeString.line1Label
-                        setValue={setLine1}
+                        // setValue={setLine1}
                         value=line1
                         onChange={ev => {
                           setLine1(.prev => {
                             ...prev,
+                            isValid: ReactEvent.Form.target(ev)["value"] !== ""
+                              ? Some(true)
+                              : Some(false),
                             value: ReactEvent.Form.target(ev)["value"],
                           })
                         }}
@@ -586,11 +621,14 @@ let make = (
                     | AddressLine2 =>
                       <PaymentField
                         fieldName=localeString.line2Label
-                        setValue={setLine2}
+                        // setValue={setLine2}
                         value=line2
                         onChange={ev => {
                           setLine2(.prev => {
                             ...prev,
+                            isValid: ReactEvent.Form.target(ev)["value"] !== ""
+                              ? Some(true)
+                              : Some(false),
                             value: ReactEvent.Form.target(ev)["value"],
                           })
                         }}
@@ -635,7 +673,7 @@ let make = (
                     | AddressPincode =>
                       <PaymentField
                         fieldName=localeString.postalCodeLabel
-                        setValue={setPostalCode}
+                        // setValue={setPostalCode}
                         value=postalCode
                         onBlur=onPostalBlur
                         onChange=onPostalChange

diff --git a/src/Components/PaymentDropDownField.res b/src/Components/PaymentDropDownField.res
@@ -27,22 +27,24 @@ let make = (
       }
     }
   }
-  React.useEffect0(() => {
-    if value.value === "" {
+  React.useEffect1(() => {
+    let initialValue = options->Belt.Array.get(0)->Belt.Option.getWithDefault("")
+    if value.value === "" || value.value === initialValue {
       setValue(.prev => {
         ...prev,
-        value: options->Belt.Array.get(0)->Belt.Option.getWithDefault(""),
+        isValid: Some(true),
+        value: initialValue,
       })
     }
     None
-  })
+  }, [options])
   let handleFocus = _ => {
     setInputFocused(_ => true)
-    setValue(.prev => {
-      ...prev,
-      isValid: None,
-      errorString: "",
-    })
+    // setValue(.prev => {
+    //   ...prev,
+    //   isValid: None,
+    //   errorString: "",
+    // })
     Utils.handleOnFocusPostMessage(~targetOrigin=parentURL, ())
   }
   let focusClass = if inputFocused || value.value->Js.String2.length > 0 {
@@ -58,9 +60,9 @@ let make = (
   let handleChange = ev => {
     let target = ev->ReactEvent.Form.target
     let value = target["value"]
-    setValue(.prev => {
-      ...prev,
-      value: value,
+    setValue(._ => {
+      isValid: Some(true),
+      value,
       errorString: "",
     })
   }