Merge branch 'main' into payout_validations

CHANGELOG.md

@@ -1,3 +1,19 @@
+## [0.74.5](https://github.com/juspay/hyperswitch-web/compare/v0.74.4...v0.74.5) (2024-07-12)
+
+
+### Bug Fixes
+
+* error string ([#498](https://github.com/juspay/hyperswitch-web/issues/498)) ([213daf7](https://github.com/juspay/hyperswitch-web/commit/213daf793498b7e23d0da74a1e17975c8591bc9e))
+
+## [0.74.4](https://github.com/juspay/hyperswitch-web/compare/v0.74.3...v0.74.4) (2024-07-12)
+
+## [0.74.3](https://github.com/juspay/hyperswitch-web/compare/v0.74.2...v0.74.3) (2024-07-11)
+
+
+### Bug Fixes
+
+* premount loader fix ([#492](https://github.com/juspay/hyperswitch-web/issues/492)) ([f9d973c](https://github.com/juspay/hyperswitch-web/commit/f9d973cd19a54d73dfcbc664f9ec093ecefd3798))
+
 ## [0.74.2](https://github.com/juspay/hyperswitch-web/compare/v0.74.1...v0.74.2) (2024-07-10)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.74.2",
+  "version": "0.74.5",
   "main": "index.js",
   "private": true,
   "dependencies": {

src/LoaderController.res

@@ -3,7 +3,6 @@ open Utils
 let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTimestamp) => {
   open RecoilAtoms
 
-  //<...>//
   let (configAtom, setConfig) = Recoil.useRecoilState(configAtom)
   let (keys, setKeys) = Recoil.useRecoilState(keys)
   let (paymentMethodList, setPaymentMethodList) = Recoil.useRecoilState(paymentMethodList)
@@ -579,7 +578,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     ])
     None
   }, (divH, iframeId))
-  //<...>//
 
   <div ref={divRef->ReactDOM.Ref.domRef}> children </div>
 }

src/LocaleStrings/ArabicLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `معرف VPA`,
   vpaIdEmptyText: `لا يمكن أن يكون معرف Vpa فارغًا`,
   vpaIdInvalidText: `معرف Vpa غير صالح`,
+  dateofBirthRequiredText: `تاريخ الميلاد مطلوب`,
+  dateOfBirthInvalidText: `يجب أن يكون العمر أكبر من أو يساوي 18 عامًا`,
+  dateOfBirthPlaceholderText: `أدخل تاريخ الميلاد`,
 }

src/LocaleStrings/CatalanLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Vpa Id`,
   vpaIdEmptyText: `L'identificador de Vpa no pot estar buit`,
   vpaIdInvalidText: `Identificador de VPA no vàlid`,
+  dateofBirthRequiredText: `Es requereix la data de naixement`,
+  dateOfBirthInvalidText: `L'edat ha de ser igual o superior a 18 anys`,
+  dateOfBirthPlaceholderText: `Introdueix la data de naixement`,
 }

src/LocaleStrings/DeutschLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Vpa-ID`,
   vpaIdEmptyText: `Die VPA-ID darf nicht leer sein`,
   vpaIdInvalidText: `Ungültige VPA-ID`,
+  dateofBirthRequiredText: `Geburtsdatum ist erforderlich`,
+  dateOfBirthInvalidText: `Das Alter sollte 18 Jahre oder älter sein`,
+  dateOfBirthPlaceholderText: `Geben Sie das Geburtsdatum ein`,
 }

src/LocaleStrings/DutchLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Vpa-id`,
   vpaIdEmptyText: `Vpa-ID mag niet leeg zijn`,
   vpaIdInvalidText: `Ongeldige Vpa-ID`,
+  dateofBirthRequiredText: `Geboortedatum is vereist`,
+  dateOfBirthInvalidText: `De leeftijd moet groter of gelijk zijn aan 18 jaar`,
+  dateOfBirthPlaceholderText: `Voer geboortedatum in`,
 }

src/LocaleStrings/EnglishGBLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Vpa Id`,
   vpaIdEmptyText: `Vpa Id cannot be empty`,
   vpaIdInvalidText: `Invalid Vpa Id address`,
+  dateofBirthRequiredText: `Date of birth is required`,
+  dateOfBirthInvalidText: `Age should be greater than or equal to 18 years`,
+  dateOfBirthPlaceholderText: `Enter Date of Birth`,
 }

src/LocaleStrings/EnglishLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: "Vpa Id",
   vpaIdEmptyText: "Vpa Id cannot be empty",
   vpaIdInvalidText: "Invalid Vpa Id address",
+  dateofBirthRequiredText: `Date of birth is required`,
+  dateOfBirthInvalidText: `Age should be greater than or equal to 18 years`,
+  dateOfBirthPlaceholderText: `Enter Date of Birth`,
 }

src/LocaleStrings/FrenchBelgiumLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Identifiant Vpa`,
   vpaIdEmptyText: `L'identifiant Vpa ne peut pas être vide`,
   vpaIdInvalidText: `Identifiant Vpa invalide`,
+  dateofBirthRequiredText: `La date de naissance est requise`,
+  dateOfBirthInvalidText: `L'âge doit être supérieur ou égal à 18 ans`,
+  dateOfBirthPlaceholderText: `Entrez la date de naissance`,
 }

src/LocaleStrings/FrenchLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Identifiant Vpa`,
   vpaIdEmptyText: `L'identifiant Vpa ne peut pas être vide`,
   vpaIdInvalidText: `Identifiant Vpa invalide`,
+  dateofBirthRequiredText: `La date de naissance est requise`,
+  dateOfBirthInvalidText: `L'âge doit être supérieur ou égal à 18 ans`,
+  dateOfBirthPlaceholderText: `Entrez la date de naissance`,
 }

src/LocaleStrings/HebrewLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `מזהה VPA`,
   vpaIdEmptyText: `מזהה VPA לא יכול להיות ריק`,
   vpaIdInvalidText: `מזהה VPA לא חוקי`,
+  dateofBirthRequiredText: `תאריך לידה נדרש`,
+  dateOfBirthInvalidText: `הגיל צריך להיות גדול או שווה ל-18 שנים`,
+  dateOfBirthPlaceholderText: `הכנס תאריך לידה`,
 }

src/LocaleStrings/ItalianLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Codice Vpa`,
   vpaIdEmptyText: `L'ID Vpa non può essere vuoto`,
   vpaIdInvalidText: `ID Vpa non valido`,
+  dateofBirthRequiredText: `La data di nascita è obbligatoria`,
+  dateOfBirthInvalidText: `L'età deve essere maggiore o uguale a 18 anni`,
+  dateOfBirthPlaceholderText: `Inserisci la data di nascita`,
 }

src/LocaleStrings/JapaneseLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `VPA ID`,
   vpaIdEmptyText: `VPA ID を空にすることはできません`,
   vpaIdInvalidText: `無効な VPA ID`,
+  dateofBirthRequiredText: `生年月日が必要です`,
+  dateOfBirthInvalidText: `年齢は18歳以上である必要があります`,
+  dateOfBirthPlaceholderText: `生年月日を入力してください`,
 }

src/LocaleStrings/LocaleStringTypes.res

@@ -79,4 +79,7 @@ type localeStrings = {
   vpaIdLabel: string,
   vpaIdEmptyText: string,
   vpaIdInvalidText: string,
+  dateofBirthRequiredText: string,
+  dateOfBirthInvalidText: string,
+  dateOfBirthPlaceholderText: string,
 }

src/LocaleStrings/PolishLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Identyfikator Vpa`,
   vpaIdEmptyText: `Identyfikator Vpa nie może być pusty`,
   vpaIdInvalidText: `Nieprawidłowy identyfikator Vpa`,
+  dateofBirthRequiredText: `Data urodzenia jest wymagana`,
+  dateOfBirthInvalidText: `Wiek powinien być większy lub równy 18 lat`,
+  dateOfBirthPlaceholderText: `Wprowadź datę urodzenia`,
 }

src/LocaleStrings/PortugueseLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `ID VPA`,
   vpaIdEmptyText: `O ID Vpa não pode ficar vazio`,
   vpaIdInvalidText: `ID Vpa inválido`,
+  dateofBirthRequiredText: `Data de nascimento é obrigatória`,
+  dateOfBirthInvalidText: `A idade deve ser maior ou igual a 18 anos`,
+  dateOfBirthPlaceholderText: `Insira a data de nascimento`,
 }

src/LocaleStrings/RussianLocale.res

@@ -92,4 +92,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Идентификатор ВПА`,
   vpaIdEmptyText: `Идентификатор VPA не может быть пустым.`,
   vpaIdInvalidText: `Неверный идентификатор VPA`,
+  dateofBirthRequiredText: `Дата рождения обязательна`,
+  dateOfBirthInvalidText: `Возраст должен быть не меньше 18 лет`,
+  dateOfBirthPlaceholderText: `Введите дату рождения`,
 }

src/LocaleStrings/SpanishLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Identificación de Vpa`,
   vpaIdEmptyText: `El ID de Vpa no puede estar vacío`,
   vpaIdInvalidText: `ID de Vpa no válido`,
+  dateofBirthRequiredText: `Se requiere la fecha de nacimiento`,
+  dateOfBirthInvalidText: `La edad debe ser mayor o igual a 18 años`,
+  dateOfBirthPlaceholderText: `Introduzca la fecha de nacimiento`,
 }

src/LocaleStrings/SwedishLocale.res

@@ -88,4 +88,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   vpaIdLabel: `Vpa-id`,
   vpaIdEmptyText: `Vpa-id får inte vara tomt`,
   vpaIdInvalidText: `Ogiltigt Vpa-ID`,
+  dateofBirthRequiredText: `Födelsedatum krävs`,
+  dateOfBirthInvalidText: `Åldern bör vara större än eller lika med 18 år`,
+  dateOfBirthPlaceholderText: `Ange födelsedatum`,
 }

src/Payments/DateOfBirth.res

@@ -25,13 +25,7 @@ let make = () => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (selectedDate, setSelectedDate) = Recoil.useRecoilState(RecoilAtoms.dateOfBirth)
   let (error, setError) = React.useState(_ => false)
-  let isNotEligible = React.useMemo(() => {
-    let isAbove18 = switch selectedDate->Nullable.toOption {
-    | Some(val) => val->checkIs18OrAbove
-    | None => false
-    }
-    !isAbove18
-  }, [selectedDate])
+  let (isNotEligible, setIsNotEligible) = React.useState(_ => false)
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -47,11 +41,17 @@ let make = () => {
   useSubmitPaymentData(submitCallback)
 
   let onChange = date => {
+    let isAbove18 = switch date->Nullable.toOption {
+    | Some(val) => val->checkIs18OrAbove
+    | None => false
+    }
     setSelectedDate(_ => date)
+    setIsNotEligible(_ => !isAbove18)
   }
+
   let errorString = error
-    ? "Date of birth is required"
-    : "Age should be equal or greater than 18 years"
+    ? localeString.dateofBirthRequiredText
+    : localeString.dateOfBirthInvalidText
 
   <div className="flex flex-col gap-1">
     <div
@@ -68,11 +68,11 @@ let make = () => {
       icon={<Icon name="calander" size=13 className="!px-[6px] !py-[10px]" />}
       className="w-full border border-gray-300 rounded p-2"
       selected={selectedDate}
-      onChange={date => onChange(date)}
+      onChange
       dateFormat="dd-MM-yyyy"
       wrapperClassName="datepicker"
       shouldCloseOnSelect=true
-      placeholderText="Enter Date of Birth"
+      placeholderText={localeString.dateOfBirthPlaceholderText}
       renderCustomHeader={val => {
         <div className="flex gap-4 items-center justify-center m-2">
           <select

src/Payments/PreMountLoader.res

@@ -137,15 +137,26 @@ let make = (
   })
 
   React.useEffect4(() => {
-    if (
-      paymentMethodsResponseSent &&
-      customerPaymentMethodsResponseSent &&
-      sessionTokensResponseSent &&
-      savedPaymentMethodsResponseSent
-    ) {
+    let handleUnmount = () => {
       handlePostMessage([("preMountLoaderIframeUnMount", true->JSON.Encode.bool)])
       Window.removeEventListener("message", handle)
     }
+
+    switch hyperComponentName {
+    | Elements =>
+      if (
+        paymentMethodsResponseSent &&
+        customerPaymentMethodsResponseSent &&
+        sessionTokensResponseSent
+      ) {
+        handleUnmount()
+      }
+    | PaymentMethodsManagementElements =>
+      if savedPaymentMethodsResponseSent {
+        handleUnmount()
+      }
+    }
+
     None
   }, (
     paymentMethodsResponseSent,

src/orca-loader/LoaderPaymentElement.res

@@ -186,7 +186,6 @@ let make = (
             }
           }
         }
-        //<...>//
 
         switch eventDataObject->getOptionalJsonFromJson("openurl") {
         | Some(val) => {