feat: HS-132: Language Support for Error Messages (#173)

juspay · Feb 19, 2024 · 281279c · 281279c
1 parent 56fce9d
commit 281279c
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 49 deletions.
diff --git a/src/Components/AddressPaymentInput.res b/src/Components/AddressPaymentInput.res
@@ -32,30 +32,6 @@ let showField = (val: PaymentType.addressType, type_: addressType) => {
   }
 }
 
-let checkPostalValidity = (
-  postal: RecoilAtomTypes.field,
-  setPostal: (
-    . OrcaPaymentPage.RecoilAtomTypes.field => OrcaPaymentPage.RecoilAtomTypes.field,
-  ) => unit,
-  regex,
-) => {
-  if Js.Re.test_(regex->Js.Re.fromString, postal.value) && postal.value !== "" && regex !== "" {
-    setPostal(.prev => {
-      ...prev,
-      isValid: Some(true),
-      errorString: "",
-    })
-  } else if (
-    regex !== "" && !Js.Re.test_(regex->Js.Re.fromString, postal.value) && postal.value !== ""
-  ) {
-    setPostal(.prev => {
-      ...prev,
-      isValid: Some(false),
-      errorString: "Invalid postal code",
-    })
-  }
-}
-
 @react.component
 let make = (~paymentType, ~className="") => {
   let {localeString, themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -89,6 +65,30 @@ let make = (~paymentType, ~className="") => {
 
   let countryNames = getCountryNames(Country.country)
 
+  let checkPostalValidity = (
+    postal: RecoilAtomTypes.field,
+    setPostal: (
+      . OrcaPaymentPage.RecoilAtomTypes.field => OrcaPaymentPage.RecoilAtomTypes.field,
+    ) => unit,
+    regex,
+  ) => {
+    if Js.Re.test_(regex->Js.Re.fromString, postal.value) && postal.value !== "" && regex !== "" {
+      setPostal(.prev => {
+        ...prev,
+        isValid: Some(true),
+        errorString: "",
+      })
+    } else if (
+      regex !== "" && !Js.Re.test_(regex->Js.Re.fromString, postal.value) && postal.value !== ""
+    ) {
+      setPostal(.prev => {
+        ...prev,
+        isValid: Some(false),
+        errorString: localeString.postalCodeInvalidText,
+      })
+    }
+  }
+
   React.useEffect0(() => {
     open Promise
     // Dynamically import/download Postal codes and states JSON
@@ -147,7 +147,7 @@ let make = (~paymentType, ~className="") => {
       setPostalCode(.prev => {
         ...prev,
         isValid: Some(false),
-        errorString: "Invalid postal code",
+        errorString: localeString.postalCodeInvalidText,
       })
     }
   }
@@ -173,31 +173,31 @@ let make = (~paymentType, ~className="") => {
       if line1.value == "" {
         setLine1(.prev => {
           ...prev,
-          errorString: "Address line 1 cannot be empty",
+          errorString: localeString.line1EmptyText,
         })
       }
       if line2.value == "" {
         setLine2(.prev => {
           ...prev,
-          errorString: "Address line 2 cannot be empty",
+          errorString: localeString.line2EmptyText,
         })
       }
       if state.value == "" {
         setState(.prev => {
           ...prev,
-          errorString: "State cannot be empty",
+          errorString: localeString.stateEmptyText,
         })
       }
       if postalCode.value == "" {
         setPostalCode(.prev => {
           ...prev,
-          errorString: "Postal code cannot be empty",
+          errorString: localeString.postalCodeEmptyText,
         })
       }
       if city.value == "" {
         setCity(.prev => {
           ...prev,
-          errorString: "City cannot be empty",
+          errorString: localeString.cityEmptyText,
         })
       }
     }

diff --git a/src/Components/BillingNamePaymentInput.res b/src/Components/BillingNamePaymentInput.res
@@ -44,15 +44,15 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None, (
       if billingName.value == "" {
         setBillingName(.prev => {
           ...prev,
-          errorString: `Please provide your ${fieldName}`,
+          errorString: fieldName->localeString.nameEmptyText,
         })
       } else {
         switch optionalRequiredFields {
         | Some(requiredFields) =>
           if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, BillingName, billingName) {
             setBillingName(.prev => {
               ...prev,
-              errorString: `Please provide your complete ${fieldName}`,
+              errorString: fieldName->localeString.completeNameEmptyText,
             })
           }
         | None => ()

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -446,7 +446,7 @@ let make = (
                 ~margin=`10px 0`,
                 (),
               )}>
-              {React.string("Billing Details")}
+              {React.string(localeString.billingDetailsText)}
               <div className="p-2 flex flex-col gap-2">
                 {dynamicFieldsToRenderInsideBilling
                 ->Js.Array2.mapi((item, index) => {

diff --git a/src/Components/EmailPaymentInput.res b/src/Components/EmailPaymentInput.res
@@ -35,7 +35,7 @@ let make = (~paymentType) => {
     setEmail(.prev => {
       ...prev,
       errorString: switch prev.isValid {
-      | Some(val) => val ? "" : "Invalid email address"
+      | Some(val) => val ? "" : localeString.emailInvalidText
       | None => ""
       },
     })
@@ -49,7 +49,7 @@ let make = (~paymentType) => {
       if email.value == "" {
         setEmail(.prev => {
           ...prev,
-          errorString: "Email cannot be empty",
+          errorString: localeString.emailEmptyText,
         })
       }
     }

diff --git a/src/Components/FullNamePaymentInput.res b/src/Components/FullNamePaymentInput.res
@@ -42,15 +42,15 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) =
       if fullName.value == "" {
         setFullName(.prev => {
           ...prev,
-          errorString: `Please provide your ${fieldName}`,
+          errorString: fieldName->localeString.nameEmptyText,
         })
       } else {
         switch optionalRequiredFields {
         | Some(requiredFields) =>
           if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, FullName, fullName) {
             setFullName(.prev => {
               ...prev,
-              errorString: `Please provide your complete ${fieldName}`,
+              errorString: fieldName->localeString.completeNameEmptyText,
             })
           }
         | None => ()