Merge branch 'main' into fix/safari

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [0.98.0](https://github.com/juspay/hyperswitch-web/compare/v0.97.0...v0.98.0) (2024-10-29)
+
+
+### Features
+
+* added dynamic fields for SEPA ([#624](https://github.com/juspay/hyperswitch-web/issues/624)) ([63f536e](https://github.com/juspay/hyperswitch-web/commit/63f536ef22dc0304b01d703a232ce99819743608))
+
 # [0.97.0](https://github.com/juspay/hyperswitch-web/compare/v0.96.3...v0.97.0) (2024-10-29)
 
 

package.json

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

src/App.res

@@ -16,6 +16,38 @@ let make = () => {
     None
   }, [logger])
 
+  React.useEffect0(() => {
+    let handleMetaDataPostMessage = (ev: Window.event) => {
+      let json = ev.data->Utils.safeParse
+      let dict = json->Utils.getDictFromJson
+
+      if dict->Dict.get("metadata")->Option.isSome {
+        let metadata = dict->Utils.getJsonObjectFromDict("metadata")
+        let config = metadata->Utils.getDictFromJson->Dict.get("config")
+
+        switch config {
+        | Some(config) => {
+            let config = CardTheme.itemToObjMapper(
+              config->Utils.getDictFromJson,
+              DefaultTheme.default,
+              DefaultTheme.defaultRules,
+              logger,
+            )
+
+            CardUtils.generateFontsLink(config.fonts)
+            let dict = config.appearance.rules->Utils.getDictFromJson
+            if dict->Dict.toArray->Array.length > 0 {
+              Utils.generateStyleSheet("", dict, "mystyle")
+            }
+          }
+        | None => ()
+        }
+      }
+    }
+    Window.addEventListener("message", handleMetaDataPostMessage)
+    Some(() => Window.removeEventListener("message", handleMetaDataPostMessage))
+  })
+
   let renderFullscreen = switch paymentMode {
   | "paymentMethodCollect" =>
     <LoaderController paymentMode setIntegrateErrorError logger initTimestamp>

src/CardTheme.res

@@ -3,7 +3,7 @@ open Utils
 open ErrorUtils
 
 let getTheme = (val, logger) => {
-  switch val {
+  switch val->String.toLowerCase {
   | "default" => Default
   | "brutal" => Brutal
   | "midnight" => Midnight
@@ -360,7 +360,7 @@ let getAppearance = (
       variables: getVariables("variables", json, default, logger),
       rules: mergeJsons(rulesJson, getJsonObjectFromDict(json, "rules")),
       innerLayout: getWarningString(json, "innerLayout", "spaced", ~logger)->getInnerLayout,
-      labels: switch getWarningString(json, "labels", "above", ~logger) {
+      labels: switch getWarningString(json, "labels", "above", ~logger)->String.toLowerCase {
       | "above" => Above
       | "floating" => Floating
       | "none" => Never

src/CardUtils.res

@@ -424,7 +424,7 @@ let cvcNumberInRange = (val, cardBrand) => {
   })
   cvcLengthInRange
 }
-let genreateFontsLink = (fonts: array<CardThemeType.fonts>) => {
+let generateFontsLink = (fonts: array<CardThemeType.fonts>) => {
   if fonts->Array.length > 0 {
     fonts
     ->Array.map(item =>

src/Components/AddBankAccount.res

@@ -6,7 +6,7 @@ module ToolTip = {
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     <RenderIf condition={openTip}>
       <button
-        className="h-auto max-w-20 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
+        className="h-auto max-w-30 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
         style={
           background: themeObj.colorBackground,
           color: themeObj.colorDanger,
@@ -30,15 +30,18 @@ module ToolTip = {
 @react.component
 let make = (~modalData, ~setModalData) => {
   let isDataAvailable = modalData->Option.isSome
-  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {themeObj, localeString, config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let (openToolTip, setOpenToolTip) = React.useState(_ => false)
   let toolTipRef = React.useRef(Nullable.null)
 
   let openModal = () => {
+    let metaData = [("config", config->Identity.anyTypeToJson)]->getJsonFromArrayOfJson
+
     messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("iframeId", iframeId->JSON.Encode.string),
+      ("metadata", metaData),
     ])
   }
   <div

src/Components/DynamicFields.res

@@ -93,10 +93,17 @@ let make = (
   let line1Ref = React.useRef(Nullable.null)
   let line2Ref = React.useRef(Nullable.null)
   let cityRef = React.useRef(Nullable.null)
+  let bankAccountNumberRef = React.useRef(Nullable.null)
   let postalRef = React.useRef(Nullable.null)
   let (selectedBank, setSelectedBank) = Recoil.useRecoilState(userBank)
   let (country, setCountry) = Recoil.useRecoilState(userCountry)
 
+  let (bankAccountNumber, setBankAccountNumber) = Recoil.useLoggedRecoilState(
+    userBankAccountNumber,
+    "bankAccountNumber",
+    logger,
+  )
+
   let defaultCardProps = (
     None,
     _ => (),
@@ -462,6 +469,34 @@ let make = (
           | PixKey => <PixPaymentInput label="pixKey" />
           | PixCPF => <PixPaymentInput label="pixCPF" />
           | PixCNPJ => <PixPaymentInput label="pixCNPJ" />
+          | BankAccountNumber | IBAN =>
+            <PaymentField
+              fieldName="IBAN"
+              setValue={setBankAccountNumber}
+              value=bankAccountNumber
+              onChange={ev => {
+                let value = ReactEvent.Form.target(ev)["value"]
+                setBankAccountNumber(_ => {
+                  isValid: Some(value !== ""),
+                  value,
+                  errorString: value !== "" ? "" : localeString.ibanEmptyText,
+                })
+              }}
+              onBlur={ev => {
+                let value = ReactEvent.Focus.target(ev)["value"]
+                setBankAccountNumber(prev => {
+                  ...prev,
+                  errorString: value !== "" ? "" : localeString.ibanEmptyText,
+                  isValid: Some(value !== ""),
+                })
+              }}
+              paymentType
+              type_="text"
+              name="bankAccountNumber"
+              maxLength=42
+              inputRef=bankAccountNumberRef
+              placeholder="DE00 0000 0000 0000 0000 00"
+            />
           | Email
           | InfoElement
           | Country
@@ -777,6 +812,8 @@ let make = (
                 | PhoneCountryCode
                 | VpaId
                 | LanguagePreference(_)
+                | BankAccountNumber
+                | IBAN
                 | None => React.null
                 }}
               </div>

src/Components/PayNowButton.res

@@ -10,7 +10,7 @@ module Loader = {
   }
 }
 @react.component
-let make = () => {
+let make = (~onClickHandler=?, ~label=?) => {
   open RecoilAtoms
   open Utils
   let (showLoader, setShowLoader) = React.useState(() => false)
@@ -19,8 +19,10 @@ let make = () => {
   let {sdkHandleConfirmPayment} = optionAtom->Recoil.useRecoilValueFromAtom
 
   let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
-  let buttonText = sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
-
+  let buttonText = switch label {
+  | Some(val) => val
+  | None => sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
+  }
 
   let handleMessage = (event: Types.event) => {
     let json = event.data->Identity.anyTypeToJson->getStringFromJson("")->safeParse
@@ -35,6 +37,13 @@ let make = () => {
     }
   }
 
+  let onClickHandlerFunc = _ => {
+    switch onClickHandler {
+    | Some(fn) => fn()
+    | None => ()
+    }
+  }
+
   let handleOnClick = _ => {
     setIsPayNowButtonDisable(_ => true)
     setShowLoader(_ => true)
@@ -45,7 +54,7 @@ let make = () => {
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
       disabled=isPayNowButtonDisable
-      onClick=handleOnClick
+      onClick={onClickHandler->Option.isNone ? handleOnClick : onClickHandlerFunc}
       className={`w-full flex flex-row justify-center items-center`}
       style={
         borderRadius: themeObj.buttonBorderRadius,

src/LoaderController.res

@@ -36,11 +36,9 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   let setUserAddressPincode = Recoil.useLoggedSetRecoilState(userAddressPincode, "pin", logger)
   let setUserAddressState = Recoil.useLoggedSetRecoilState(userAddressState, "state", logger)
   let setUserAddressCountry = Recoil.useLoggedSetRecoilState(userAddressCountry, "country", logger)
-  let (_country, setCountry) = Recoil.useRecoilState(userCountry)
-  let (isCompleteCallbackUsed, setIsCompleteCallbackUsed) = Recoil.useRecoilState(
-    isCompleteCallbackUsed,
-  )
-  let (isPaymentButtonHandlerProvided, setIsPaymentButtonHandlerProvided) = Recoil.useRecoilState(
+  let setCountry = Recoil.useSetRecoilState(userCountry)
+  let setIsCompleteCallbackUsed = Recoil.useSetRecoilState(isCompleteCallbackUsed)
+  let setIsPaymentButtonHandlerProvided = Recoil.useSetRecoilState(
     isPaymentButtonHandlerProvidedAtom,
   )
 
@@ -194,7 +192,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   })
 
   React.useEffect(() => {
-    CardUtils.genreateFontsLink(config.fonts)
+    CardUtils.generateFontsLink(config.fonts)
     let dict = config.appearance.rules->getDictFromJson
     if dict->Dict.toArray->Array.length > 0 {
       generateStyleSheet("", dict, "themestyle")

src/LocaleStrings/ArabicLocale.res

@@ -12,6 +12,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   accountNumberText: `رقم حساب`,
   cvcTextLabel: `رمز الحماية`,
   emailLabel: `البريد الإلكتروني`,
+  ibanEmptyText: `لا يمكن أن يكون رقم IBAN فارغًا`,
   emailEmptyText: `لا يمكن أن يكون البريد الإلكتروني فارغًا`,
   emailInvalidText: `عنوان البريد الإلكتروني غير صالح`,
   fullNameLabel: `الاسم الكامل`,

src/LocaleStrings/CatalanLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nom del titular de la targeta`,
   cardNickname: `Sobrenom de la targeta`,
   billingNamePlaceholder: `Nom i cognom`,
+  ibanEmptyText: `L'IBAN no pot estar buit`,
   emailEmptyText: `El correu electrònic no pot estar buit`,
   emailInvalidText: `adressa de correu invàlida`,
   line1EmptyText: `La línia d'adreça 1 no pot estar buida`,

src/LocaleStrings/ChineseLocale.res

@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `省/州不能为空`,
   accountNumberText: `账户号码`,
   emailLabel: `电子邮箱`,
+  ibanEmptyText: `IBAN 不能为空`,
   emailEmptyText: `电子邮箱不能为空`,
   emailInvalidText: `无效的电子邮箱地址`,
   fullNameLabel: `全名`,

src/LocaleStrings/DeutschLocale.res

@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `Der Status darf nicht leer sein`,
   accountNumberText: `Accountnummer`,
   emailLabel: `Email`,
+  ibanEmptyText: `IBAN darf nicht leer sein`,
   emailEmptyText: `E-Mail darf nicht leer sein`,
   emailInvalidText: `Ungültige E-Mail-Adresse`,
   fullNameLabel: `Vollständiger Name`,

src/LocaleStrings/DutchLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Naam van de kaarthouder`,
   cardNickname: `Kaartbijnaam`,
   billingNamePlaceholder: `Voornaam en achternaam`,
+  ibanEmptyText: `IBAN mag niet leeg zijn`,
   emailEmptyText: `E-mail mag niet leeg zijn`,
   emailInvalidText: `Ongeldig e-mailadres`,
   line1EmptyText: `Adresregel 1 mag niet leeg zijn`,

src/LocaleStrings/EnglishGBLocale.res

@@ -11,6 +11,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   sortCodeText: "Sort Code",
   cvcTextLabel: "CVC",
   emailLabel: "Email",
+  ibanEmptyText: "IBAN cannot be empty",
   emailEmptyText: "Email cannot be empty",
   emailInvalidText: "Invalid email address",
   line1Label: "Address line 1",

src/LocaleStrings/EnglishLocale.res

@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: "State cannot be empty",
   accountNumberText: "Account Number",
   emailLabel: "Email",
+  ibanEmptyText: "IBAN cannot be empty",
   emailEmptyText: "Email cannot be empty",
   emailInvalidText: "Invalid email address",
   fullNameLabel: "Full name",

src/LocaleStrings/FrenchBelgiumLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nom du titulaire`,
   cardNickname: `Pseudonyme de la carte`,
   billingNamePlaceholder: `Nom et prénom`,
+  ibanEmptyText: `L'IBAN ne peut pas être vide`,
   emailEmptyText: `L'e-mail ne peut pas être vide`,
   emailInvalidText: `Adresse e-mail invalide`,
   line1EmptyText: `La ligne d'adresse 1 ne peut pas être vide`,

src/LocaleStrings/FrenchLocale.res

@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `L'état ne peut pas être vide`,
   accountNumberText: `Numéro de compte`,
   emailLabel: `E-mail`,
+  ibanEmptyText: `L'IBAN ne peut pas être vide`,
   emailEmptyText: `L'e-mail ne peut pas être vide`,
   emailInvalidText: "Adresse e-mail invalide",
   fullNameLabel: `Nom complet`,

src/LocaleStrings/HebrewLocale.res

@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `המדינה לא יכולה להיות ריקה`,
   accountNumberText: `מספר חשבון`,
   emailLabel: `אימייל`,
+  ibanEmptyText: `ה-IBAN אינו יכול להיות ריק`,
   emailEmptyText: `אימייל לא יכול להיות ריק`,
   emailInvalidText: `כתובת אימייל לא חוקית`,
   fullNameLabel: `שם מלא`,

src/LocaleStrings/ItalianLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nome del titolare della carta`,
   cardNickname: `Soprannome della carta`,
   billingNamePlaceholder: `Nome e cognome`,
+  ibanEmptyText: `L'IBAN non può essere vuoto`,
   emailEmptyText: `L'e-mail non può essere vuota`,
   emailInvalidText: `indirizzo email non valido`,
   line1EmptyText: `La riga dell'indirizzo 1 non può essere vuota`,

src/LocaleStrings/JapaneseLocale.res

@@ -12,6 +12,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cvcTextLabel: `セキュリティコード`,
   accountNumberText: `口座番号`,
   emailLabel: `Eメール`,
+  ibanEmptyText: `IBANは空にできません`,
   emailEmptyText: `電子メールを空にすることはできません`,
   emailInvalidText: `無効なメールアドレス`,
   fullNameLabel: `フルネーム`,

src/LocaleStrings/LocaleStringTypes.res

@@ -14,6 +14,7 @@ type localeStrings = {
   sortCodeText: string,
   cvcTextLabel: string,
   emailLabel: string,
+  ibanEmptyText: string,
   emailEmptyText: string,
   emailInvalidText: string,
   accountNumberText: string,

src/LocaleStrings/PolishLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Imię i nazwisko posiadacza karty`,
   cardNickname: `Przezwisko karty`,
   billingNamePlaceholder: `Imię i nazwisko`,
+  ibanEmptyText: `IBAN nie może być pusty`,
   emailEmptyText: `Adres e-mail nie może być pusty`,
   emailInvalidText: `Niepoprawny adres email`,
   line1EmptyText: `Linia adresu 1 nie może być pusta`,

src/LocaleStrings/PortugueseLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nome do titular do cartão`,
   cardNickname: `Apelido do cartão`,
   billingNamePlaceholder: `Nome e sobrenome`,
+  ibanEmptyText: `O IBAN não pode estar vazio`,
   emailEmptyText: `O e-mail não pode ficar vazio`,
   emailInvalidText: `Endereço de email invalido`,
   line1EmptyText: `A linha de endereço 1 não pode ficar vazia`,

src/LocaleStrings/RussianLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Имя держателя карты`,
   cardNickname: `Прозвище карты`,
   billingNamePlaceholder: `Имя и фамилия`,
+  ibanEmptyText: `IBAN не может быть пустым`,
   emailEmptyText: `Электронная почта не может быть пустой`,
   emailInvalidText: `Неверный адрес электронной почты`,
   line1EmptyText: `Адресная строка 1 не может быть пустой.`,

src/LocaleStrings/SpanishLocale.res

@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nombre del titular de la tarjeta`,
   cardNickname: `Apodo de la tarjeta`,
   billingNamePlaceholder: `Nombre y apellido`,
+  ibanEmptyText: `El IBAN no puede estar vacío`,
   emailEmptyText: `El correo electrónico no puede estar vacío.`,
   emailInvalidText: `Dirección de correo electrónico no válida`,
   line1EmptyText: `La línea de dirección 1 no puede estar vacía`,