Merge branch 'feat/logging_revamp' of github.com:juspay/hyperswitch-w…

…eb into feat/logging_revamp
juspay · Feb 16, 2024 · 0d86f9c · 0d86f9c
2 parents 6b33e8d + b0ae622
commit 0d86f9c
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [0.23.10](https://github.com/juspay/hyperswitch-web/compare/v0.23.9...v0.23.10) (2024-02-16)
+
+
+### Bug Fixes
+
+* HS-148: Added Currency with surcharge amount ([#146](https://github.com/juspay/hyperswitch-web/issues/146)) ([ceadf3e](https://github.com/juspay/hyperswitch-web/commit/ceadf3e8bb1845058504884940c5d5573bda2dbf))
+
+## [0.23.9](https://github.com/juspay/hyperswitch-web/compare/v0.23.8...v0.23.9) (2024-02-16)
+
+
+### Bug Fixes
+
+* HS-132: Error handling for Address Fields ([#171](https://github.com/juspay/hyperswitch-web/issues/171)) ([38f3a79](https://github.com/juspay/hyperswitch-web/commit/38f3a79552f10e6712d2402475d44a70aba46e41))
+
+## [0.23.8](https://github.com/juspay/hyperswitch-web/compare/v0.23.7...v0.23.8) (2024-02-15)
+
+
+### Bug Fixes
+
+* HS-111: Added billing name to address element ([#145](https://github.com/juspay/hyperswitch-web/issues/145)) ([426415a](https://github.com/juspay/hyperswitch-web/commit/426415a8c88e56bd0e6b84da56982c1e40082c67))
+
 ## [0.23.7](https://github.com/juspay/hyperswitch-web/compare/v0.23.6...v0.23.7) (2024-02-13)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.23.7",
+  "version": "0.23.10",
   "main": "index.js",
   "private": true,
   "dependencies": {

diff --git a/src/Components/BillingNamePaymentInput.res b/src/Components/BillingNamePaymentInput.res
@@ -19,9 +19,16 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None, (
   let changeName = ev => {
     let val: string = ReactEvent.Form.target(ev)["value"]
     setBillingName(.prev => {
-      ...prev,
       value: val,
-      errorString: "",
+      isValid: Some(val !== ""),
+      errorString: val !== "" ? "" : prev.errorString,
+    })
+  }
+  let onBlur = ev => {
+    let val: string = ReactEvent.Focus.target(ev)["value"]
+    setBillingName(.prev => {
+      ...prev,
+      isValid: Some(val !== ""),
     })
   }
   let (placeholder, fieldName) = switch customFieldName {
@@ -58,9 +65,11 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None, (
   <RenderIf condition={showDetails.name == Auto}>
     <PaymentField
       fieldName
+      setValue=setBillingName
       value=billingName
       onChange=changeName
       paymentType
+      onBlur
       type_="text"
       name="name"
       inputRef=nameRef

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -211,47 +211,6 @@ let make = (
     }
   }
 
-  let onPostalBlur = ev => {
-    // 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(
     ~requiredFields,
     ~fieldsArr,
@@ -283,6 +242,9 @@ let make = (
     ~setRequiredFieldsBody,
   )
 
+  let submitCallback = DynamicFieldsUtils.useSubmitCallback()
+  Utils.submitPaymentData(submitCallback)
+
   let bottomElement = <InfoElement />
 
   let getCustomFieldName = (item: PaymentMethodsRecord.paymentMethodsFields) => {
@@ -448,8 +410,13 @@ let make = (
                   disabled=false
                   options=currencyArr
                 />
+              | FullName =>
+                <FullNamePaymentInput
+                  paymentType
+                  customFieldName={item->getCustomFieldName}
+                  optionalRequiredFields={Some(requiredFields)}
+                />
               | Email
-              | FullName
               | InfoElement
               | Country
               | Bank
@@ -487,33 +454,31 @@ let make = (
                     key={`inside-billing-${index->Js.Int.toString}`}
                     className="flex flex-col w-full place-content-between">
                     {switch item {
-                    | FullName =>
-                      <FullNamePaymentInput
-                        paymentType
-                        customFieldName={item->getCustomFieldName}
-                        optionalRequiredFields={Some(requiredFields)}
-                      />
                     | BillingName =>
                       <BillingNamePaymentInput
-                        paymentType
-                        customFieldName={item->getCustomFieldName}
-                        optionalRequiredFields={Some(requiredFields)}
+                        paymentType optionalRequiredFields={Some(requiredFields)}
                       />
                     | Email => <EmailPaymentInput paymentType />
                     | PhoneNumber => <PhoneNumberPaymentInput />
                     | StateAndCity =>
                       <div className="flex gap-1">
                         <PaymentField
                           fieldName=localeString.cityLabel
-                          // setValue={setCity}
+                          setValue={setCity}
                           value=city
                           onChange={ev => {
+                            let value = ReactEvent.Form.target(ev)["value"]
+                            setCity(.prev => {
+                              isValid: value !== "" ? Some(true) : Some(false),
+                              value,
+                              errorString: value !== "" ? "" : prev.errorString,
+                            })
+                          }}
+                          onBlur={ev => {
+                            let value = ReactEvent.Focus.target(ev)["value"]
                             setCity(.prev => {
                               ...prev,
-                              isValid: ReactEvent.Form.target(ev)["value"] !== ""
-                                ? Some(true)
-                                : Some(false),
-                              value: ReactEvent.Form.target(ev)["value"],
+                              isValid: Some(value !== ""),
                             })
                           }}
                           paymentType
@@ -551,7 +516,13 @@ let make = (
                           fieldName=localeString.postalCodeLabel
                           setValue={setPostalCode}
                           value=postalCode
-                          onBlur=onPostalBlur
+                          onBlur={ev => {
+                            let value = ReactEvent.Focus.target(ev)["value"]
+                            setPostalCode(.prev => {
+                              ...prev,
+                              isValid: Some(value !== ""),
+                            })
+                          }}
                           onChange=onPostalChange
                           paymentType
                           type_="tel"
@@ -563,15 +534,21 @@ let make = (
                     | AddressLine1 =>
                       <PaymentField
                         fieldName=localeString.line1Label
-                        // setValue={setLine1}
+                        setValue={setLine1}
                         value=line1
                         onChange={ev => {
+                          let value = ReactEvent.Form.target(ev)["value"]
+                          setLine1(.prev => {
+                            isValid: value !== "" ? Some(true) : Some(false),
+                            value,
+                            errorString: value !== "" ? "" : prev.errorString,
+                          })
+                        }}
+                        onBlur={ev => {
+                          let value = ReactEvent.Focus.target(ev)["value"]
                           setLine1(.prev => {
                             ...prev,
-                            isValid: ReactEvent.Form.target(ev)["value"] !== ""
-                              ? Some(true)
-                              : Some(false),
-                            value: ReactEvent.Form.target(ev)["value"],
+                            isValid: Some(value !== ""),
                           })
                         }}
                         paymentType
@@ -583,15 +560,21 @@ let make = (
                     | AddressLine2 =>
                       <PaymentField
                         fieldName=localeString.line2Label
-                        // setValue={setLine2}
+                        setValue={setLine2}
                         value=line2
                         onChange={ev => {
+                          let value = ReactEvent.Form.target(ev)["value"]
+                          setLine2(.prev => {
+                            isValid: value !== "" ? Some(true) : Some(false),
+                            value,
+                            errorString: value !== "" ? "" : prev.errorString,
+                          })
+                        }}
+                        onBlur={ev => {
+                          let value = ReactEvent.Focus.target(ev)["value"]
                           setLine2(.prev => {
                             ...prev,
-                            isValid: ReactEvent.Form.target(ev)["value"] !== ""
-                              ? Some(true)
-                              : Some(false),
-                            value: ReactEvent.Form.target(ev)["value"],
+                            isValid: Some(value !== ""),
                           })
                         }}
                         paymentType
@@ -606,9 +589,18 @@ let make = (
                         setValue={setCity}
                         value=city
                         onChange={ev => {
+                          let value = ReactEvent.Form.target(ev)["value"]
+                          setCity(.prev => {
+                            isValid: value !== "" ? Some(true) : Some(false),
+                            value,
+                            errorString: value !== "" ? "" : prev.errorString,
+                          })
+                        }}
+                        onBlur={ev => {
+                          let value = ReactEvent.Focus.target(ev)["value"]
                           setCity(.prev => {
                             ...prev,
-                            value: ReactEvent.Form.target(ev)["value"],
+                            isValid: Some(value !== ""),
                           })
                         }}
                         paymentType
@@ -635,9 +627,15 @@ let make = (
                     | AddressPincode =>
                       <PaymentField
                         fieldName=localeString.postalCodeLabel
-                        // setValue={setPostalCode}
+                        setValue={setPostalCode}
                         value=postalCode
-                        onBlur=onPostalBlur
+                        onBlur={ev => {
+                          let value = ReactEvent.Focus.target(ev)["value"]
+                          setPostalCode(.prev => {
+                            ...prev,
+                            isValid: Some(value !== ""),
+                          })
+                        }}
                         onChange=onPostalChange
                         paymentType
                         type_="tel"
@@ -690,6 +688,7 @@ let make = (
                     | CardCvc
                     | CardExpiryAndCvc
                     | Currency(_)
+                    | FullName
                     | None => React.null
                     }}
                   </div>

diff --git a/src/Components/EmailPaymentInput.res b/src/Components/EmailPaymentInput.res
@@ -16,12 +16,19 @@ let make = (~paymentType) => {
   let changeEmail = ev => {
     let val: string = ReactEvent.Form.target(ev)["value"]
     setEmail(.prev => {
-      ...prev,
       value: val,
+      isValid: val->Utils.isEmailValid,
+      errorString: val->Utils.isEmailValid->Belt.Option.getWithDefault(false)
+        ? ""
+        : prev.errorString,
     })
   }
-  let onBlur = _ => {
-    Utils.checkEmailValid(email, setEmail)
+  let onBlur = ev => {
+    let val = ReactEvent.Focus.target(ev)["value"]
+    setEmail(.prev => {
+      ...prev,
+      isValid: val->Utils.isEmailValid,
+    })
   }
 
   React.useEffect1(() => {

diff --git a/src/Components/FullNamePaymentInput.res b/src/Components/FullNamePaymentInput.res
@@ -15,11 +15,20 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
   let changeName = ev => {
     let val: string = ReactEvent.Form.target(ev)["value"]
     setFullName(.prev => {
-      ...prev,
       value: val,
-      errorString: "",
+      isValid: Some(val !== ""),
+      errorString: val !== "" ? "" : prev.errorString,
     })
   }
+
+  let onBlur = ev => {
+    let val: string = ReactEvent.Focus.target(ev)["value"]
+    setFullName(.prev => {
+      ...prev,
+      isValid: Some(val !== ""),
+    })
+  }
+
   let (placeholder, fieldName) = switch customFieldName {
   | Some(val) => (val, val)
   | None => (localeString.fullNamePlaceholder, localeString.fullNameLabel)
@@ -54,9 +63,11 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
   <RenderIf condition={showDetails.name == Auto}>
     <PaymentField
       fieldName
+      setValue=setFullName
       value=fullName
       onChange=changeName
       paymentType
+      onBlur
       type_="text"
       name="name"
       inputRef=nameRef

diff --git a/src/Components/Surcharge.res b/src/Components/Surcharge.res
@@ -24,7 +24,7 @@ let make = (
       SurchargeUtils.getOneClickWalletsMessage(~list)
     } else {
       switch paymentMethodTypes.surcharge_details {
-      | Some(surchargeDetails) => SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails)
+      | Some(surchargeDetails) => SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list)
       | None =>
         if paymentMethod === "card" {
           let creditPaymentMethodTypes = getPaymentMethodTypes("credit")
@@ -44,13 +44,13 @@ let make = (
             let debitCardSurcharge = debitSurchargeDetails.displayTotalSurchargeAmount
 
             if creditCardSurcharge >= debitCardSurcharge {
-              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={creditSurchargeDetails})
+              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={creditSurchargeDetails}, ~list)
             } else {
-              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={debitSurchargeDetails})
+              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={debitSurchargeDetails}, ~list)
             }
           | (None, Some(surchargeDetails))
           | (Some(surchargeDetails), None) =>
-            SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails)
+            SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list)
           | (None, None) => None
           }
         } else {