diff --git a/src/Components/AddressPaymentInput.res b/src/Components/AddressPaymentInput.res index 75b5af853..5b9dc389a 100644 --- 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 index 947583a45..a9cb52a33 100644 --- a/src/Components/BillingNamePaymentInput.res +++ b/src/Components/BillingNamePaymentInput.res @@ -44,7 +44,7 @@ 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 { @@ -52,7 +52,7 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None, ( 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 index f089665ba..571e2dfb3 100644 --- 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)}
{dynamicFieldsToRenderInsideBilling ->Js.Array2.mapi((item, index) => { diff --git a/src/Components/EmailPaymentInput.res b/src/Components/EmailPaymentInput.res index 44de30af0..a207be735 100644 --- 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 index 2a277a617..adea5cb76 100644 --- a/src/Components/FullNamePaymentInput.res +++ b/src/Components/FullNamePaymentInput.res @@ -42,7 +42,7 @@ 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 { @@ -50,7 +50,7 @@ let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) = if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, FullName, fullName) { setFullName(.prev => { ...prev, - errorString: `Please provide your complete ${fieldName}`, + errorString: fieldName->localeString.completeNameEmptyText, }) } | None => () diff --git a/src/LocaleString.res b/src/LocaleString.res index 95485592a..c6b03c901 100644 --- a/src/LocaleString.res +++ b/src/LocaleString.res @@ -11,15 +11,23 @@ type localeStrings = { sortCodeText: string, cvcTextLabel: string, emailLabel: string, + emailEmptyText: string, + emailInvalidText: string, accountNumberText: string, fullNameLabel: string, line1Label: string, line1Placeholder: string, + line1EmptyText: string, line2Label: string, line2Placeholder: string, + line2EmptyText: string, cityLabel: string, + cityEmptyText: string, postalCodeLabel: string, + postalCodeEmptyText: string, + postalCodeInvalidText: string, stateLabel: string, + stateEmptyText: string, fullNamePlaceholder: string, countryLabel: string, currencyLabel: string, @@ -50,6 +58,9 @@ type localeStrings = { cardHolderName: string, on: string, \"and": string, + nameEmptyText: string => string, + completeNameEmptyText: string => string, + billingDetailsText: string, } let defaultLocale = { @@ -66,13 +77,21 @@ let defaultLocale = { accountNumberText: "Account Number", cvcTextLabel: "CVC", emailLabel: "Email", + emailEmptyText: "Email cannot be empty", + emailInvalidText: "Invalid email address", line1Label: "Address line 1", line1Placeholder: "Street address", + line1EmptyText: "Address line 1 cannot be empty", line2Label: "Address line 2", line2Placeholder: "Apt., unit number, etc (optional)", + line2EmptyText: "Address line 2 cannot be empty", cityLabel: "City", + cityEmptyText: "City cannot be empty", postalCodeLabel: "Postal Code", + postalCodeEmptyText: "Postal code cannot be empty", + postalCodeInvalidText: "Invalid postal code", stateLabel: "State", + stateEmptyText: "State cannot be empty", fullNameLabel: "Full name", fullNamePlaceholder: "First and last name", countryLabel: "Country", @@ -115,6 +134,9 @@ let defaultLocale = { cardHolderName: "Card Holder Name", on: "on", \"and": "and", + nameEmptyText: str => `Please provide your ${str}`, + completeNameEmptyText: str => `Please provide your complete ${str}`, + billingDetailsText: "Billing Details", } type locale = {localeStrings: array} @@ -133,13 +155,21 @@ let localeStrings = [ cvcTextLabel: "CVC", line1Label: "Address line 1", line1Placeholder: "Street address", + line1EmptyText: "Address line 1 cannot be empty", line2Label: "Address line 2", line2Placeholder: "Apt., unit number, etc (optional)", + line2EmptyText: "Address line 2 cannot be empty", cityLabel: "City", + cityEmptyText: "City cannot be empty", postalCodeLabel: "Postal Code", + postalCodeEmptyText: "Postal code cannot be empty", + postalCodeInvalidText: "Invalid postal code", stateLabel: "State", + stateEmptyText: "State cannot be empty", accountNumberText: "Account Number", emailLabel: "Email", + emailEmptyText: "Email cannot be empty", + emailInvalidText: "Invalid email address", fullNameLabel: "Full name", fullNamePlaceholder: "First and last name", countryLabel: "Country", @@ -182,6 +212,9 @@ let localeStrings = [ cardHolderName: "Card Holder Name", on: "on", \"and": "and", + nameEmptyText: str => `Please provide your ${str}`, + completeNameEmptyText: str => `Please provide your complete ${str}`, + billingDetailsText: "Billing Details", }, { locale: "he", @@ -197,13 +230,21 @@ let localeStrings = [ cvcTextLabel: `קוד בגב הכרטיס`, line1Label: `כתובת - שורה 1`, line1Placeholder: `כתובת רחוב`, + line1EmptyText: `שורת כתובת 1 לא יכולה להיות ריקה`, line2Label: `כתובת - שורה 2`, line2Placeholder: `דירה, יחידה, וכדומה (אופציונלי)`, + line2EmptyText: `שורת כתובת 2 לא יכולה להיות ריקה`, cityLabel: `עיר`, + cityEmptyText: `עיר לא יכולה להיות ריקה`, postalCodeLabel: `מיקוד`, + postalCodeEmptyText: `מיקוד לא יכול להיות ריק`, + postalCodeInvalidText: `מיקוד לא חוקי`, stateLabel: `מדינה`, + stateEmptyText: `המדינה לא יכולה להיות ריקה`, accountNumberText: `מספר חשבון`, emailLabel: `אימייל`, + emailEmptyText: `אימייל לא יכול להיות ריק`, + emailInvalidText: `כתובת אימייל לא חוקית`, fullNameLabel: `שם מלא`, fullNamePlaceholder: `שם פרטי ושם משפחה`, countryLabel: `מדינה`, @@ -246,6 +287,9 @@ let localeStrings = [ cardHolderName: `שם בעל הכרטיס`, on: `עַל`, \"and": `ו`, + nameEmptyText: str => `אנא ספק את שלך ${str}`, + completeNameEmptyText: str => `אנא ספק את המלא שלך ${str}`, + billingDetailsText: `פרטי תשלום`, }, { locale: `fr`, @@ -261,13 +305,21 @@ let localeStrings = [ cvcTextLabel: `Code CVC`, line1Label: `Adresse - Ligne 1`, line1Placeholder: `Adresse de rue`, + line1EmptyText: `La ligne d'adresse 1 ne peut pas être vide`, line2Label: `Adresse - Ligne 2`, line2Placeholder: `Appartement, numéro d'unité, etc (facultatif)`, + line2EmptyText: `La ligne d'adresse 2 ne peut pas être vide`, cityLabel: `Ville`, + cityEmptyText: `La ville ne peut pas être vide`, postalCodeLabel: `Code postal`, + postalCodeEmptyText: `Le code postal ne peut pas être vide`, + postalCodeInvalidText: `Code postal invalide`, stateLabel: `État`, + stateEmptyText: `L'état ne peut pas être vide`, accountNumberText: `Numéro de compte`, emailLabel: `E-mail`, + emailEmptyText: `L'e-mail ne peut pas être vide`, + emailInvalidText: "Adresse e-mail invalide", fullNameLabel: `Nom complet`, fullNamePlaceholder: `Prénom et nom de famille`, countryLabel: `Pays`, @@ -310,6 +362,9 @@ let localeStrings = [ cardHolderName: `Nom du titulaire`, on: `sur`, \"and": `et`, + nameEmptyText: str => `Veuillez fournir votre ${str}`, + completeNameEmptyText: str => `Veuillez fournir votre complet ${str}`, + billingDetailsText: "Détails de la facturation", }, { locale: "en-GB", @@ -324,13 +379,21 @@ let localeStrings = [ sortCodeText: "Sort Code", cvcTextLabel: "CVC", emailLabel: "Email", + emailEmptyText: "Email cannot be empty", + emailInvalidText: "Invalid email address", line1Label: "Address line 1", line1Placeholder: "Street address", + line1EmptyText: "Address line 1 cannot be empty", line2Label: "Address line 2", line2Placeholder: "Apt., unit number, etc (optional)", + line2EmptyText: "Address line 2 cannot be empty", cityLabel: "City", + cityEmptyText: "City cannot be empty", postalCodeLabel: "Postal Code", + postalCodeEmptyText: "Postal code cannot be empty", + postalCodeInvalidText: "Invalid postal code", stateLabel: "State", + stateEmptyText: "State cannot be empty", accountNumberText: "Account Number", fullNameLabel: "Full name", fullNamePlaceholder: "First and last name", @@ -374,6 +437,9 @@ let localeStrings = [ cardHolderName: "Card Holder Name", on: "on", \"and": "and", + nameEmptyText: str => `Please provide your ${str}`, + completeNameEmptyText: str => `Please provide your complete ${str}`, + billingDetailsText: "Billing Details", }, { locale: "ar", @@ -389,14 +455,22 @@ let localeStrings = [ accountNumberText: `رقم حساب`, cvcTextLabel: `رمز الحماية`, emailLabel: `البريد الإلكتروني`, + emailEmptyText: `لا يمكن أن يكون البريد الإلكتروني فارغًا`, + emailInvalidText: `عنوان البريد الإلكتروني غير صالح`, fullNameLabel: `الاسم الكامل`, line1Label: `العنوان سطر 1`, line1Placeholder: `.عنوان الشارع`, + line1EmptyText: `لا يمكن أن يكون سطر العنوان 1 فارغًا`, line2Label: `سطر العنوان 2`, line2Placeholder: `مناسب ، رقم الوحدة ، إلخ (اختياري)`, + line2EmptyText: `لا يمكن أن يكون سطر العنوان 2 فارغًا`, postalCodeLabel: `رمز بريدي`, + postalCodeEmptyText: `لا يمكن أن يكون الرمز البريدي فارغًا`, + postalCodeInvalidText: `الرمز البريدي غير صالح`, stateLabel: `ولاية`, + stateEmptyText: `لا يمكن أن تكون الحالة فارغة`, cityLabel: `مدينة`, + cityEmptyText: `لا يمكن أن تكون المدينة فارغة`, fullNamePlaceholder: `الاسم الأول والاسم الأخير`, countryLabel: `دولة`, currencyLabel: `عملة`, @@ -438,6 +512,9 @@ let localeStrings = [ cardHolderName: `إسم صاحب البطاقة`, on: `على`, \"and": `و`, + nameEmptyText: str => `يرجى تقديم الخاص بك ${str}`, + completeNameEmptyText: str => `يرجى تقديم كامل الخاص بك ${str}`, + billingDetailsText: `تفاصيل الفاتورة`, }, { locale: "ja", @@ -453,16 +530,24 @@ let localeStrings = [ cvcTextLabel: `セキュリティコード`, accountNumberText: `口座番号`, emailLabel: `Eメール`, + emailEmptyText: `電子メールを空にすることはできません`, + emailInvalidText: `無効なメールアドレス`, fullNameLabel: `フルネーム`, fullNamePlaceholder: `名前と苗字`, line1Label: `住所1`, line1Placeholder: `住所`, + line1EmptyText: `住所行 1 を空にすることはできません`, line2Label: `住所2`, postalCodeLabel: `郵便番号`, + postalCodeEmptyText: `郵便番号を空白にすることはできません`, + postalCodeInvalidText: `郵便番号が無効です`, stateLabel: `州`, + stateEmptyText: `状態を空にすることはできません`, cityLabel: `街`, line2Placeholder: `アパート、ユニット番号など(任意)`, + line2EmptyText: `住所行 2 を空にすることはできません`, countryLabel: `国`, + cityEmptyText: `都市を空にすることはできません`, currencyLabel: "通貨", bankLabel: `バンクを選択`, redirectText: `注文を送信すると、安全に購入を完了するためにリダイレクトされます。`, @@ -502,6 +587,9 @@ let localeStrings = [ cardHolderName: `クレジットカード名義人氏名`, on: `の上`, \"and": `そして`, + nameEmptyText: str => `あなたの情報を提供してください ${str}`, + completeNameEmptyText: str => `完全な情報を提供してください ${str}`, + billingDetailsText: `支払明細`, }, { locale: "de", @@ -517,13 +605,21 @@ let localeStrings = [ cvcTextLabel: `CVC`, line1Label: `Adresszeile 1`, line1Placeholder: `Adresse`, + line1EmptyText: "Adresszeile 1 darf nicht leer sein", line2Label: `Adresszeile 2`, line2Placeholder: `Wohnung, Einheitennummer usw. (optional)`, + line2EmptyText: `Adresszeile 2 darf nicht leer sein`, cityLabel: `Stadt`, + cityEmptyText: `Die Stadt darf nicht leer sein`, postalCodeLabel: `Postleitzahl`, + postalCodeEmptyText: `Die Postleitzahl darf nicht leer sein`, + postalCodeInvalidText: `Ungültige Postleitzahl`, stateLabel: `Zustand`, + stateEmptyText: `Der Status darf nicht leer sein`, accountNumberText: `Accountnummer`, emailLabel: `Email`, + emailEmptyText: `E-Mail darf nicht leer sein`, + emailInvalidText: `Ungültige E-Mail-Adresse`, fullNameLabel: `Vollständiger Name`, fullNamePlaceholder: `Vor-und Nachname`, countryLabel: `Land`, @@ -566,5 +662,8 @@ let localeStrings = [ cardHolderName: `Name des Karteninhabers`, on: `An`, \"and": `Und`, + nameEmptyText: str => `Bitte geben Sie Ihre an ${str}`, + completeNameEmptyText: str => `Bitte geben Sie Ihr vollständiges Formular an ${str}`, + billingDetailsText: `Rechnungsdetails`, }, ] diff --git a/src/Payments/BankDebitModal.res b/src/Payments/BankDebitModal.res index 702f4fd6d..732de6225 100644 --- a/src/Payments/BankDebitModal.res +++ b/src/Payments/BankDebitModal.res @@ -91,7 +91,8 @@ module AccountNumberCard = {
{React.string("000123456789")}
-
{React.string("1234")}
+ +
{React.string("1234")}
@@ -112,7 +113,7 @@ let make = (~setModalData) => { let (sortCode, setSortCode) = React.useState(_ => "") let (isRoutingValid, setIsRoutingValid) = React.useState(_ => None) let (routingError, setRoutingError) = React.useState(_ => "") - let {themeObj, config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) + let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) let (accountType, setAccountType) = React.useState(() => "Savings") let (openModal, setOpenModal) = React.useState(_ => false) @@ -188,7 +189,7 @@ let make = (~setModalData) => {
- {React.string("Billing Details")} + {React.string(localeString.billingDetailsText)}
{ active=submitActive onclick={_ => { setModalData(_ => Some({ - routingNumber: routingNumber, + routingNumber, accountNumber: accountNum, - accountHolderName: accountHolderName, + accountHolderName, accountType: accountType->Js.String2.toLowerCase, - iban: iban, - sortCode: sortCode, + iban, + sortCode, })) Modal.close(setOpenModal) }} diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res index ec601b9f6..c21995fbf 100644 --- a/src/Utilities/DynamicFieldsUtils.res +++ b/src/Utilities/DynamicFieldsUtils.res @@ -657,6 +657,9 @@ let useSubmitCallback = () => { ) let (city, setCity) = Recoil.useLoggedRecoilState(RecoilAtoms.userAddressCity, "city", logger) let {billingAddress} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom) + + let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) + React.useCallback5((ev: Window.event) => { let json = ev.data->Js.Json.parseExn let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper @@ -664,31 +667,31 @@ let useSubmitCallback = () => { if line1.value == "" { setLine1(.prev => { ...prev, - errorString: "Address line 1 cannot be empty", + errorString: localeString.line1EmptyText, }) } if line2.value == "" { setLine2(.prev => { ...prev, - errorString: billingAddress.isUseBillingAddress ? "" : "Address line 2 cannot be empty", + errorString: billingAddress.isUseBillingAddress ? "" : 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, }) } }