Merge branch 'main' into feat/support-for-billing-details-wallet

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [0.78.1](https://github.com/juspay/hyperswitch-web/compare/v0.78.0...v0.78.1) (2024-07-30)
+
+
+### Bug Fixes
+
+* pix confirm call and added locale support ([#528](https://github.com/juspay/hyperswitch-web/issues/528)) ([382e1c1](https://github.com/juspay/hyperswitch-web/commit/382e1c1eca0560863be5a489d78ec8f9fef5e0a7))
+
 # [0.78.0](https://github.com/juspay/hyperswitch-web/compare/v0.77.4...v0.78.0) (2024-07-26)
 
 

package.json

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

src/CardTheme.res

@@ -88,6 +88,7 @@ let getLocaleObject = async string => {
     | FR_BE => Js.import(FrenchBelgiumLocale.localeStrings)
     | ES => Js.import(SpanishLocale.localeStrings)
     | CA => Js.import(CatalanLocale.localeStrings)
+    | ZH => Js.import(ChineseLocale.localeStrings)
     | PT => Js.import(PortugueseLocale.localeStrings)
     | IT => Js.import(ItalianLocale.localeStrings)
     | PL => Js.import(PolishLocale.localeStrings)

src/Components/PixPaymentInput.res

@@ -3,6 +3,7 @@ let make = (~label="") => {
   open RecoilAtoms
   open Utils
 
+  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let (pixCNPJ, setPixCNPJ) = Recoil.useRecoilState(userPixCNPJ)
   let (pixCPF, setPixCPF) = Recoil.useRecoilState(userPixCPF)
   let (pixKey, setPixKey) = Recoil.useRecoilState(userPixKey)
@@ -35,14 +36,32 @@ let make = (~label="") => {
     })
   }
 
-  let onBlurPixCNPJ = _ => {
-    if pixCNPJ.value->String.length === 14 && pixCNPJ.isValid->Option.getOr(false) {
+  let onBlurPixKey = _ => {
+    if pixKey.value->String.length > 0 {
+      setPixKey(prev => {
+        ...prev,
+        isValid: Some(true),
+        errorString: "",
+      })
+    } else {
+      setPixKey(prev => {
+        ...prev,
+        isValid: None,
+        errorString: "",
+      })
+    }
+  }
+
+  let onBlurPixCNPJ = ev => {
+    let pixCNPJNumber = ReactEvent.Focus.target(ev)["value"]
+
+    if %re("/^\d*$/")->RegExp.test(pixCNPJNumber) && pixCNPJNumber->String.length === 14 {
       setPixCNPJ(prev => {
         ...prev,
         isValid: Some(true),
         errorString: "",
       })
-    } else if pixCNPJ.value->String.length === 0 {
+    } else if pixCNPJNumber->String.length == 0 {
       setPixCNPJ(prev => {
         ...prev,
         isValid: None,
@@ -52,19 +71,21 @@ let make = (~label="") => {
       setPixCNPJ(prev => {
         ...prev,
         isValid: Some(false),
-        errorString: "Invalid Pix CNPJ",
+        errorString: localeString.pixCNPJInvalidText,
       })
     }
   }
 
-  let onBlurPixCPF = _ => {
-    if pixCPF.value->String.length === 11 && pixCPF.isValid->Option.getOr(false) {
+  let onBlurPixCPF = ev => {
+    let pixCPFNumber = ReactEvent.Focus.target(ev)["value"]
+
+    if %re("/^\d*$/")->RegExp.test(pixCPFNumber) && pixCPFNumber->String.length === 11 {
       setPixCPF(prev => {
         ...prev,
         isValid: Some(true),
         errorString: "",
       })
-    } else if pixCPF.value->String.length === 0 {
+    } else if pixCPFNumber->String.length == 0 {
       setPixCPF(prev => {
         ...prev,
         isValid: None,
@@ -74,7 +95,7 @@ let make = (~label="") => {
       setPixCPF(prev => {
         ...prev,
         isValid: Some(false),
-        errorString: "Invalid Pix CPF",
+        errorString: localeString.pixCPFInvalidText,
       })
     }
   }
@@ -90,7 +111,7 @@ let make = (~label="") => {
       setPixCNPJ(prev => {
         ...prev,
         isValid: Some(false),
-        errorString: "Invalid Pix CPNJ",
+        errorString: localeString.pixCNPJInvalidText,
       })
     }
     None
@@ -107,7 +128,7 @@ let make = (~label="") => {
       setPixCPF(prev => {
         ...prev,
         isValid: Some(false),
-        errorString: "Invalid Pix CPF",
+        errorString: localeString.pixCPFInvalidText,
       })
     }
 
@@ -121,19 +142,19 @@ let make = (~label="") => {
       if pixKey.value == "" {
         setPixKey(prev => {
           ...prev,
-          errorString: "Pix key cannot be empty",
+          errorString: localeString.pixKeyEmptyText,
         })
       }
       if pixCNPJ.value == "" {
         setPixCNPJ(prev => {
           ...prev,
-          errorString: "Pix CNPJ cannot be empty",
+          errorString: localeString.pixCNPJEmptyText,
         })
       }
       if pixCPF.value == "" {
         setPixCPF(prev => {
           ...prev,
-          errorString: "Pix CPF cannot be empty",
+          errorString: localeString.pixCPFEmptyText,
         })
       }
     }
@@ -144,20 +165,21 @@ let make = (~label="") => {
   <>
     <RenderIf condition={label === "pixKey"}>
       <PaymentField
-        fieldName="Pix key"
+        fieldName={localeString.pixKeyLabel}
         setValue=setPixKey
         value=pixKey
         onChange=changePixKey
+        onBlur=onBlurPixKey
         paymentType=Payment
         type_="pixKey"
         name="pixKey"
         inputRef=pixKeyRef
-        placeholder="Enter Pix key"
+        placeholder={localeString.pixKeyPlaceholder}
       />
     </RenderIf>
     <RenderIf condition={label === "pixCPF"}>
       <PaymentField
-        fieldName="Pix CPF"
+        fieldName={localeString.pixCPFLabel}
         setValue=setPixCPF
         value=pixCPF
         onChange=changePixCPF
@@ -166,13 +188,13 @@ let make = (~label="") => {
         type_="pixCPF"
         name="pixCPF"
         inputRef=pixCPFRef
-        placeholder="Enter Pix CPF"
+        placeholder={localeString.pixCPFPlaceholder}
         maxLength=11
       />
     </RenderIf>
     <RenderIf condition={label === "pixCNPJ"}>
       <PaymentField
-        fieldName="Pix CNPJ"
+        fieldName={localeString.pixCNPJLabel}
         setValue=setPixCNPJ
         value=pixCNPJ
         onChange=changePixCNPJ
@@ -181,7 +203,7 @@ let make = (~label="") => {
         type_="pixCNPJ"
         name="pixCNPJ"
         inputRef=pixCNPJRef
-        placeholder="Enter Pix CNPJ"
+        placeholder={localeString.pixCNPJPlaceholder}
         maxLength=14
       />
     </RenderIf>

src/LocaleStrings/ArabicLocale.res

@@ -91,4 +91,15 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   dateofBirthRequiredText: `تاريخ الميلاد مطلوب`,
   dateOfBirthInvalidText: `يجب أن يكون العمر أكبر من أو يساوي 18 عامًا`,
   dateOfBirthPlaceholderText: `أدخل تاريخ الميلاد`,
+  pixCNPJInvalidText: `CNPJ الخاص بـ Pix غير صحيح`,
+  pixCNPJEmptyText: `لا يمكن أن يكون CNPJ الخاص بـ Pix فارغًا`,
+  pixCNPJLabel: `CNPJ الخاص بـ Pix`,
+  pixCNPJPlaceholder: `أدخل CNPJ الخاص بـ Pix`,
+  pixCPFInvalidText: `CPF الخاص بـ Pix غير صحيح`,
+  pixCPFEmptyText: `لا يمكن أن يكون CPF الخاص بـ Pix فارغًا`,
+  pixCPFLabel: `CPF الخاص بـ Pix`,
+  pixCPFPlaceholder: `أدخل CPF الخاص بـ Pix`,
+  pixKeyEmptyText: `مفتاح Pix لا يمكن أن يكون فارغًا`,
+  pixKeyPlaceholder: `أدخل مفتاح Pix`,
+  pixKeyLabel: `مفتاح Pix`,
 }

src/LocaleStrings/CatalanLocale.res

@@ -91,4 +91,15 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   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`,
+  pixCNPJInvalidText: `CNPJ Pix no vàlid`,
+  pixCNPJEmptyText: `El CNPJ Pix no pot estar buit`,
+  pixCNPJLabel: `CNPJ Pix`,
+  pixCNPJPlaceholder: `Introdueix el CNPJ Pix`,
+  pixCPFInvalidText: `CPF Pix no vàlid`,
+  pixCPFEmptyText: `El CPF Pix no pot estar buit`,
+  pixCPFLabel: `CPF Pix`,
+  pixCPFPlaceholder: `Introdueix el CPF Pix`,
+  pixKeyEmptyText: `La clau Pix no pot estar buida`,
+  pixKeyPlaceholder: `Introdueix la clau Pix`,
+  pixKeyLabel: `Clau Pix`,
 }

src/LocaleStrings/ChineseLocale.res

@@ -0,0 +1,105 @@
+let localeStrings: LocaleStringTypes.localeStrings = {
+  locale: `zh`,
+  localeDirection: `ltr`,
+  cardNumberLabel: `卡号`,
+  inValidCardErrorText: `卡号无效。`,
+  inCompleteCVCErrorText: `您的卡片安全码不完整。`,
+  inCompleteExpiryErrorText: `您的卡片到期日期不完整。`,
+  pastExpiryErrorText: `您的卡片到期年份已过期。`,
+  poweredBy: `由 Hyperswitch 提供技术支持`,
+  validThruText: `有效期`,
+  sortCodeText: `排序代码`,
+  cvcTextLabel: `CVC`,
+  line1Label: `地址行 1`,
+  line1Placeholder: `街道地址`,
+  line1EmptyText: `地址行 1 不能为空`,
+  line2Label: `地址行 2`,
+  line2Placeholder: `公寓、单元号等（可选）`,
+  line2EmptyText: `地址行 2 不能为空`,
+  cityLabel: `城市`,
+  cityEmptyText: `城市不能为空`,
+  postalCodeLabel: `邮政编码`,
+  postalCodeEmptyText: `邮政编码不能为空`,
+  postalCodeInvalidText: `无效的邮政编码`,
+  stateLabel: `省/州`,
+  stateEmptyText: `省/州不能为空`,
+  accountNumberText: `账户号码`,
+  emailLabel: `电子邮箱`,
+  emailEmptyText: `电子邮箱不能为空`,
+  emailInvalidText: `无效的电子邮箱地址`,
+  fullNameLabel: `全名`,
+  fullNamePlaceholder: `名字和姓氏`,
+  countryLabel: `国家`,
+  currencyLabel: `货币`,
+  bankLabel: `选择银行`,
+  redirectText: `提交订单后，您将被重定向到安全的页面完成购买。`,
+  bankDetailsText: `提交这些信息后，您将获得银行账户信息以进行付款。请确保记录下来。`,
+  orPayUsing: `或使用`,
+  addNewCard: `添加信用卡/借记卡`,
+  useExisitingSavedCards: `使用保存的信用卡/借记卡`,
+  saveCardDetails: `保存卡片信息`,
+  addBankAccount: `添加银行账户`,
+  achBankDebitTerms: _ =>
+    `您的 ACH 扣款授权将立即设置，但我们会确认金额并在未来的付款前通知您。`,
+  sepaDebitTerms: str =>
+    `通过提供您的付款信息并确认此付款，您授权（A）${str} 和 Hyperswitch，我们的支付服务提供商和/或 PPRO，其本地服务提供商，向您的银行发送指示从您的账户中扣款，以及（B）您的银行根据这些指示从您的账户中扣款。作为您的权利的一部分，您有权根据与银行的协议的条款和条件要求银行退款。退款必须在账户扣款之日起的 8 周内申请。您的权利在银行可以获得的声明中有解释。您同意在未来的扣款前最多提前 2 天接收通知。`,
+  becsDebitTerms: `通过提供您的银行账户详细信息并确认此付款，您同意此直接借记请求和直接借记请求服务协议，并授权 Hyperswitch Payments Australia Pty Ltd ACN 160 180 343 直接借记用户 ID 号码 507156（“Hyperswitch”）通过批量电子清算系统（BECS）从您的账户中扣款，代表 Hyperswitch Payment Widget（“商户”）处理任何商户单独通知您的金额。您确认您是上述账户的账户持有人或授权签署人。`,
+  cardTerms: str =>
+    `通过提供您的卡片信息，您允许 ${str} 根据其条款向您的卡片收费。`,
+  payNowButton: `立即支付`,
+  cardNumberEmptyText: `卡号不能为空`,
+  cardExpiryDateEmptyText: `卡片到期日期不能为空`,
+  cvcNumberEmptyText: `CVC 号码不能为空`,
+  enterFieldsText: `请输入所有字段`,
+  enterValidDetailsText: `请输入有效的详细信息`,
+  selectPaymentMethodText: `请选择付款方式然后重试`,
+  card: `卡片`,
+  surchargeMsgAmount: (currency, str) => <>
+    {React.string(`此交易将收取${Utils.nbsp}`)}
+    <strong> {React.string(`${currency} ${str}`)} </strong>
+    {React.string({`${Utils.nbsp}的附加费用`})}
+  </>,
+  surchargeMsgAmountForCard: (currency, str) => <>
+    {React.string(`此交易将收取最高${Utils.nbsp}`)}
+    <strong> {React.string(`${currency} ${str}`)} </strong>
+    {React.string(`${Utils.nbsp}的附加费用`)}
+  </>,
+  surchargeMsgAmountForOneClickWallets: `适用额外费用`,
+  billingNameLabel: `适用额外费用`,
+  billingNamePlaceholder: `名字和姓氏`,
+  cardHolderName: `持卡人姓名`,
+  on: `在`,
+  \"and": `和`,
+  nameEmptyText: str => `请提供您的 ${str}`,
+  completeNameEmptyText: str => `请提供您的完整 ${str}`,
+  billingDetailsText: `账单详情`,
+  socialSecurityNumberLabel: `社会安全号码`,
+  saveWalletDetails: `选择后将保存钱包信息`,
+  morePaymentMethods: `更多支付方式`,
+  useExistingPaymentMethods: `使用保存的支付方式`,
+  cardNickname: `卡片昵称`,
+  nicknamePlaceholder: `卡片昵称（可选）`,
+  cardExpiredText: `此卡已过期`,
+  cardHeader: `卡片信息`,
+  cardBrandConfiguredErrorText: str => `${str} 目前不支持。`,
+  currencyNetwork: `货币网络`,
+  expiryPlaceholder: `MM / YY`,
+  dateOfBirth: `出生日期`,
+  vpaIdLabel: `VPA ID`,
+  vpaIdEmptyText: `VPA ID 不能为空`,
+  vpaIdInvalidText: `无效的 VPA ID 地址`,
+  dateofBirthRequiredText: `出生日期是必填项`,
+  dateOfBirthInvalidText: `年龄应大于或等于 18 岁`,
+  dateOfBirthPlaceholderText: `输入出生日期`,
+  pixCNPJInvalidText: `无效的 Pix CNPJ`,
+  pixCNPJEmptyText: `Pix CNPJ 不能为空`,
+  pixCNPJLabel: `Pix CNPJ`,
+  pixCNPJPlaceholder: `输入 Pix CNPJ`,
+  pixCPFInvalidText: `无效的 Pix CPF`,
+  pixCPFEmptyText: `Pix CPF 不能为空`,
+  pixCPFLabel: `Pix CPF`,
+  pixCPFPlaceholder: `输入 Pix CPF`,
+  pixKeyEmptyText: `Pix 密钥不能为空`,
+  pixKeyPlaceholder: `输入 Pix 密钥`,
+  pixKeyLabel: `Pix 密钥`,
+}

src/LocaleStrings/DeutschLocale.res

@@ -91,4 +91,15 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   dateofBirthRequiredText: `Geburtsdatum ist erforderlich`,
   dateOfBirthInvalidText: `Das Alter sollte 18 Jahre oder älter sein`,
   dateOfBirthPlaceholderText: `Geben Sie das Geburtsdatum ein`,
+  pixCNPJInvalidText: `Ungültiger Pix CNPJ`,
+  pixCNPJEmptyText: `Pix CNPJ darf nicht leer sein`,
+  pixCNPJLabel: `Pix CNPJ`,
+  pixCNPJPlaceholder: `Geben Sie Pix CNPJ ein`,
+  pixCPFInvalidText: `Ungültiger Pix CPF`,
+  pixCPFEmptyText: `Pix CPF darf nicht leer sein`,
+  pixCPFLabel: `Pix CPF`,
+  pixCPFPlaceholder: `Geben Sie Pix CPF ein`,
+  pixKeyEmptyText: `Pix-Schlüssel darf nicht leer sein`,
+  pixKeyPlaceholder: `Geben Sie den Pix-Schlüssel ein`,
+  pixKeyLabel: `Pix-Schlüssel`,
 }

src/LocaleStrings/DutchLocale.res

@@ -91,4 +91,15 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   dateofBirthRequiredText: `Geboortedatum is vereist`,
   dateOfBirthInvalidText: `De leeftijd moet groter of gelijk zijn aan 18 jaar`,
   dateOfBirthPlaceholderText: `Voer geboortedatum in`,
+  pixCNPJInvalidText: `Ongeldige Pix CNPJ`,
+  pixCNPJEmptyText: `Pix CNPJ mag niet leeg zijn`,
+  pixCNPJLabel: `Pix CNPJ`,
+  pixCNPJPlaceholder: `Voer Pix CNPJ in`,
+  pixCPFInvalidText: `Ongeldige Pix CPF`,
+  pixCPFEmptyText: `Pix CPF mag niet leeg zijn`,
+  pixCPFLabel: `Pix CPF`,
+  pixCPFPlaceholder: `Voer Pix CPF in`,
+  pixKeyEmptyText: `Pix-sleutel mag niet leeg zijn`,
+  pixKeyPlaceholder: `Voer Pix-sleutel in`,
+  pixKeyLabel: `Pix-sleutel`,
 }

src/LocaleStrings/EnglishGBLocale.res

@@ -91,4 +91,15 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   dateofBirthRequiredText: `Date of birth is required`,
   dateOfBirthInvalidText: `Age should be greater than or equal to 18 years`,
   dateOfBirthPlaceholderText: `Enter Date of Birth`,
+  pixCNPJInvalidText: `Invalid Pix CNPJ`,
+  pixCNPJEmptyText: `Pix CNPJ cannot be empty`,
+  pixCNPJLabel: `Pix CNPJ`,
+  pixCNPJPlaceholder: `Enter Pix CNPJ`,
+  pixCPFInvalidText: `Invalid Pix CPF`,
+  pixCPFEmptyText: `Pix CPF cannot be empty`,
+  pixCPFLabel: `Pix CPF`,
+  pixCPFPlaceholder: `Enter Pix CPF`,
+  pixKeyEmptyText: `Pix key cannot be empty`,
+  pixKeyPlaceholder: `Enter Pix key`,
+  pixKeyLabel: `Pix key`,
 }