[V5] ACH savings and checking (#2904)

* v5 imp of ach savings and checking * fix test * update lang files
Adyen · Oct 21, 2024 · 3097f74 · 3097f74
1 parent 133f457
commit 3097f74
Show file tree

Hide file tree

Showing 31 changed files with 90 additions and 40 deletions.
diff --git a/.changeset/six-queens-mix.md b/.changeset/six-queens-mix.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Adds selector for savings and checking accounts on ACH component
diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.scss b/packages/lib/src/components/Ach/components/AchInput/AchInput.scss
@@ -18,4 +18,8 @@
     .adyen-checkout__fieldset--address {
         margin-top: 16px;
     }
+
+    .adyen-checkout__radio_group__input-wrapper:not(:last-child) {
+        margin-bottom: 12px;
+    }
 }
diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.test.tsx b/packages/lib/src/components/Ach/components/AchInput/AchInput.test.tsx
@@ -22,11 +22,6 @@ describe('AchInput', () => {
         expect(await screen.findByText(/aba routing number/i)).toBeTruthy();
     });
 
-    test('should render Address by default', async () => {
-        withCoreProvider(<AchInput enableStoreDetails={false} resources={new Resources()} />);
-        expect(await screen.findByText(/billing address/i)).toBeTruthy();
-    });
-
     test('should render FormInstruction by default', async () => {
         withCoreProvider(<AchInput enableStoreDetails={false} resources={new Resources()} />);
         expect(await screen.findByText(/all fields are required unless marked otherwise./i)).toBeTruthy();
@@ -43,4 +38,9 @@ describe('AchInput', () => {
         );
         expect(await screen.findByText(/test pay button/i)).toBeTruthy();
     });
+
+    test('should show checking and savings selector', async () => {
+        withCoreProvider(<AchInput enableStoreDetails={false} resources={global.resources} />);
+        expect(await screen.findByText(/Checking/i)).toBeTruthy();
+    });
 });
diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
@@ -3,7 +3,6 @@ import { useState, useEffect, useRef } from 'preact/hooks';
 import classNames from 'classnames';
 import AchSecuredFields from './components/AchSecuredFields';
 import SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';
-import Address from '../../../internal/Address';
 import Field from '../../../internal/FormFields/Field';
 import LoadingWrapper from '../../../internal/LoadingWrapper/LoadingWrapper';
 import defaultProps from './defaultProps';
@@ -16,6 +15,7 @@ import StoreDetails from '../../../internal/StoreDetails';
 import { ComponentMethodsRef } from '../../../types';
 import InputText from '../../../internal/FormFields/InputText';
 import FormInstruction from '../../../internal/FormInstruction';
+import RadioGroup from '../../../internal/FormFields/RadioGroup';
 
 function validateHolderName(holderName, holderNameRequired = false) {
     if (holderNameRequired) {
@@ -34,10 +34,10 @@ function AchInput(props: ACHInputProps) {
         ...(props.holderNameRequired && { holderName: holderNameIsValid })
     });
     const [data, setData] = useState<ACHInputDataState>({
+        bankAccountType: 'checking',
         ...(props.hasHolderName && { holderName: props.holderName || props.data.holderName })
     });
 
-    const [billingAddress, setBillingAddress] = useState(props.billingAddressRequired ? props.data.billingAddress : null);
     const [isSfpValid, setIsSfpValid] = useState(false);
     const [focusedElement, setFocusedElement] = useState('');
     const [storePaymentMethod, setStorePaymentMethod] = useState(false);
@@ -54,11 +54,6 @@ function AchInput(props: ACHInputProps) {
         }
     };
 
-    const handleAddress = address => {
-        setBillingAddress({ ...billingAddress, ...address.data });
-        setValid({ ...valid, billingAddress: address.isValid });
-    };
-
     const handleHolderName = e => {
         const holderName = e.target.value;
 
@@ -67,6 +62,11 @@ function AchInput(props: ACHInputProps) {
         setValid({ ...valid, holderName: props.holderNameRequired ? validateHolderName(holderName, props.holderNameRequired) : true });
     };
 
+    const handleBankAccountType = e => {
+        const bankAccountType = e.target.value;
+        setData({ ...data, bankAccountType });
+    };
+
     const handleSecuredFieldsChange = newState => {
         const sfState = newState;
 
@@ -85,10 +85,6 @@ function AchInput(props: ACHInputProps) {
 
     // Refs
     const sfp = useRef(null);
-    const billingAddressRef = useRef(null);
-    const setAddressRef = ref => {
-        billingAddressRef.current = ref;
-    };
 
     const [status, setStatus] = useState('ready');
 
@@ -107,9 +103,6 @@ function AchInput(props: ACHInputProps) {
         if (props.holderNameRequired && !valid.holderName) {
             setErrors({ ...errors, holderName: true });
         }
-
-        // Validate Address
-        if (billingAddressRef.current) billingAddressRef.current.showValidation();
     };
 
     achRef.current.setStatus = setStatus;
@@ -125,14 +118,13 @@ function AchInput(props: ACHInputProps) {
 
     // Run when state.data, -errors or -valid change
     useEffect(() => {
-        // Validate whole component i.e holderName + securedFields + address
+        // Validate whole component i.e holderName + securedFields
         const holderNameValid = validateHolderName(data.holderName, props.holderNameRequired);
         const sfpValid = isSfpValid;
-        const billingAddressValid = props.billingAddressRequired ? Boolean(valid.billingAddress) : true;
 
-        const isValid = sfpValid && holderNameValid && billingAddressValid;
+        const isValid = sfpValid && holderNameValid;
 
-        props.onChange({ data, isValid, billingAddress, storePaymentMethod });
+        props.onChange({ data, isValid, storePaymentMethod });
     }, [data, valid, errors, storePaymentMethod]);
 
     return (
@@ -150,6 +142,19 @@ function AchInput(props: ACHInputProps) {
                             <div className={classNames(['adyen-checkout__fieldset', 'adyen-checkout__fieldset--ach'])}>
                                 {<div className="adyen-checkout__fieldset__title">{i18n.get('ach.bankAccount')}</div>}
 
+                                <Field classNameModifiers={['bankAccountType']} name={'bankAccountType'} useLabelElement={false}>
+                                    <RadioGroup
+                                        name={'bankAccountType'}
+                                        value={data.bankAccountType}
+                                        items={[
+                                            { id: 'checking', name: 'ach.checking' },
+                                            { id: 'savings', name: 'ach.savings' }
+                                        ]}
+                                        onChange={handleBankAccountType}
+                                        required={true}
+                                    />
+                                </Field>
+
                                 {props.hasHolderName && (
                                     <Field
                                         label={i18n.get('ach.accountHolderNameField.title')}
@@ -176,17 +181,6 @@ function AchInput(props: ACHInputProps) {
                                 />
                             </div>
 
-                            {props.billingAddressRequired && (
-                                <Address
-                                    label="billingAddress"
-                                    data={billingAddress}
-                                    onChange={handleAddress}
-                                    allowedCountries={props.billingAddressAllowedCountries}
-                                    requiredFields={props.billingAddressRequiredFields}
-                                    setComponentRef={setAddressRef}
-                                />
-                            )}
-
                             {props.enableStoreDetails && <StoreDetails onChange={setStorePaymentMethod} />}
                         </LoadingWrapper>
                     </div>

diff --git a/packages/lib/src/components/Ach/components/AchInput/types.ts b/packages/lib/src/components/Ach/components/AchInput/types.ts
@@ -5,21 +5,19 @@ import { Resources } from '../../../../core/Context/Resources';
 
 export interface ACHInputStateValid {
     holderName?: boolean;
-    billingAddress?: boolean;
     encryptedBankAccountNumber?: boolean;
     encryptedBankLocationId?: boolean;
 }
 
 export interface ACHInputStateError {
     holderName?: boolean;
-    billingAddress?: boolean;
     encryptedBankAccountNumber?: boolean;
     encryptedBankLocationId?: boolean;
 }
 
 export interface ACHInputDataState {
+    bankAccountType?: 'savings' | 'checking';
     holderName?: string;
-    billingAddress?: object;
 }
 
 type Placeholders = {
@@ -29,9 +27,6 @@ type Placeholders = {
 export interface ACHInputProps {
     allowedDOMAccess?: boolean;
     autoFocus?: boolean;
-    billingAddressAllowedCountries?: string[];
-    billingAddressRequired?: boolean;
-    billingAddressRequiredFields?: string[];
     clientKey?: string;
     data?: ACHInputDataState;
     enableStoreDetails: boolean;

diff --git a/packages/lib/src/language/locales/ar.json b/packages/lib/src/language/locales/ar.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "رقم توجيه ABA",
     "ach.accountLocationField.invalid": "رقم توجيه ABA غير صحيح",
     "ach.savedBankAccount": "الحساب البنكي المحفوظ",
+    "ach.savings": "حساب التوفير",
+    "ach.checking": "الحساب الجاري",
     "select.state": "حدد الولاية",
     "select.stateOrProvince": "حدد الولاية أو المقاطعة",
     "select.provinceOrTerritory": "حدد المقاطعة أو الإقليم",

diff --git a/packages/lib/src/language/locales/cs-CZ.json b/packages/lib/src/language/locales/cs-CZ.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Směrovací tranzitní číslo ABA",
     "ach.accountLocationField.invalid": "Neplatné směrovací tranzitní číslo ABA",
     "ach.savedBankAccount": "Uložený bankovní účet",
+    "ach.savings": "Spořicí účet",
+    "ach.checking": "Běžný účet",
     "select.state": "Vyberte stát",
     "select.stateOrProvince": "Vyberte kraj nebo okres",
     "select.provinceOrTerritory": "Vyberte provincii nebo teritorium",

diff --git a/packages/lib/src/language/locales/da-DK.json b/packages/lib/src/language/locales/da-DK.json
@@ -152,6 +152,8 @@
     "ach.accountLocationField.title": "ABA-registreringsnummer",
     "ach.accountLocationField.invalid": "Ugyldigt ABA-registreringsnummer",
     "ach.savedBankAccount": "Gemt bankkonto",
+    "ach.savings": "Opsparingskonto",
+    "ach.checking": "Lønkonto",
     "select.state": "Vælg stat",
     "select.stateOrProvince": "Vælg region eller kommune",
     "select.provinceOrTerritory": "Vælg provins eller territorium",

diff --git a/packages/lib/src/language/locales/de-DE.json b/packages/lib/src/language/locales/de-DE.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABA-Nummer",
     "ach.accountLocationField.invalid": "Ungültige ABA-Nummer",
     "ach.savedBankAccount": "Gespeichertes Bankkonto",
+    "ach.savings": "Sparkonto",
+    "ach.checking": "Girokonto",
     "select.state": "Bundesstaat auswählen",
     "select.stateOrProvince": "Bundesland oder Provinz/Region auswählen",
     "select.provinceOrTerritory": "Provinz oder Territorium auswählen",

diff --git a/packages/lib/src/language/locales/el-GR.json b/packages/lib/src/language/locales/el-GR.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Αριθμός δρομολόγησης ABA",
     "ach.accountLocationField.invalid": "Μη έγκυρος αριθμός δρομολόγησης ABA",
     "ach.savedBankAccount": "Αποθηκευμένος τραπεζικός λογαριασμός",
+    "ach.savings": "Λογαριασμός ταμιευτηρίου",
+    "ach.checking": "Τρεχούμενος λογαριασμός",
     "select.state": "Επιλέξτε πολιτεία",
     "select.stateOrProvince": "Επιλέξτε πολιτεία ή επαρχία",
     "select.provinceOrTerritory": "Επιλέξτε επαρχία ή περιφέρεια",

diff --git a/packages/lib/src/language/locales/en-US.json b/packages/lib/src/language/locales/en-US.json
@@ -152,6 +152,8 @@
     "ach.accountLocationField.title": "ABA routing number",
     "ach.accountLocationField.invalid": "Invalid ABA routing number",
     "ach.savedBankAccount": "Saved bank account",
+    "ach.savings": "Savings account",
+    "ach.checking": "Checking account",
     "select.state": "Select state",
     "select.stateOrProvince": "Select state or province",
     "select.provinceOrTerritory": "Select province or territory",

diff --git a/packages/lib/src/language/locales/es-ES.json b/packages/lib/src/language/locales/es-ES.json
@@ -148,6 +148,8 @@
     "ach.accountLocationField.title": "Número de ruta ABA",
     "ach.accountLocationField.invalid": "El número de ruta ABA no es válido",
     "ach.savedBankAccount": "Se ha guardado la cuenta bancaria",
+    "ach.savings": "Cuenta de ahorros",
+    "ach.checking": "Cuenta corriente",
     "select.state": "Seleccione el estado",
     "select.stateOrProvince": "Seleccione el estado o provincia",
     "select.provinceOrTerritory": "Seleccione la provincia o territorio",

diff --git a/packages/lib/src/language/locales/fi-FI.json b/packages/lib/src/language/locales/fi-FI.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABA-reititysnumero",
     "ach.accountLocationField.invalid": "Ei-kelvollinen ABA-reititysnumero",
     "ach.savedBankAccount": "Tallennettu pankkitili",
+    "ach.savings": "Säästötili",
+    "ach.checking": "Käyttötili",
     "select.state": "Valitse osavaltio",
     "select.stateOrProvince": "Valitse osavaltio tai lääni",
     "select.provinceOrTerritory": "Valitse maakunta tai alue",

diff --git a/packages/lib/src/language/locales/fr-FR.json b/packages/lib/src/language/locales/fr-FR.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Code ABA",
     "ach.accountLocationField.invalid": "Code ABA incorrect",
     "ach.savedBankAccount": "Compte bancaire enregistré",
+    "ach.savings": "Compte d’épargne",
+    "ach.checking": "Compte courant",
     "select.state": "Sélectionnez l'État",
     "select.stateOrProvince": "Sélectionnez l'État ou la province",
     "select.provinceOrTerritory": "Sélectionnez la province ou le territoire",

diff --git a/packages/lib/src/language/locales/hr-HR.json b/packages/lib/src/language/locales/hr-HR.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABA identifikacijski broj",
     "ach.accountLocationField.invalid": "Nevažeći ABA identifikacijski broj",
     "ach.savedBankAccount": "Spremljeni bankovni račun",
+    "ach.savings": "Štedni račun",
+    "ach.checking": "Tekući račun",
     "select.state": "Odaberite saveznu državu",
     "select.stateOrProvince": "Odaberite državu ili provinciju",
     "select.provinceOrTerritory": "Odaberite provinciju ili teritorij",

diff --git a/packages/lib/src/language/locales/hu-HU.json b/packages/lib/src/language/locales/hu-HU.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABA-irányítószám",
     "ach.accountLocationField.invalid": "Érvénytelen ABA-irányítószám",
     "ach.savedBankAccount": "Mentett bankszámla",
+    "ach.savings": "Betétszámla",
+    "ach.checking": "Folyószámla",
     "select.state": "Állam kiválasztása",
     "select.stateOrProvince": "Állam vagy tartomány kiválasztása",
     "select.provinceOrTerritory": "Tartomány vagy terület kiválasztása",

diff --git a/packages/lib/src/language/locales/it-IT.json b/packages/lib/src/language/locales/it-IT.json
@@ -149,6 +149,8 @@
     "ach.accountLocationField.title": "Codice ABA",
     "ach.accountLocationField.invalid": "Codice ABA non valido",
     "ach.savedBankAccount": "Conto corrente salvato",
+    "ach.savings": "Conto di risparmio",
+    "ach.checking": "Conto corrente",
     "select.state": "Seleziona stato",
     "select.stateOrProvince": "Seleziona stato o provincia",
     "select.provinceOrTerritory": "Seleziona provincia o territorio",

diff --git a/packages/lib/src/language/locales/ja-JP.json b/packages/lib/src/language/locales/ja-JP.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABAナンバー",
     "ach.accountLocationField.invalid": "無効なABAナンバー",
     "ach.savedBankAccount": "保存済みの銀行口座",
+    "ach.savings": "普通預金口座",
+    "ach.checking": "当座預金口座",
     "select.state": "都道府県を選択してください",
     "select.stateOrProvince": "都道府県を選択してください",
     "select.provinceOrTerritory": "州または準州を選択してください",

diff --git a/packages/lib/src/language/locales/ko-KR.json b/packages/lib/src/language/locales/ko-KR.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABA 라우팅 번호",
     "ach.accountLocationField.invalid": "유효하지 않은 ABA 라우팅 번호",
     "ach.savedBankAccount": "저장된 은행 계좌",
+    "ach.savings": "저축 계좌",
+    "ach.checking": "당좌 예금 계좌",
     "select.state": "주 선택",
     "select.stateOrProvince": "주/도 선택",
     "select.provinceOrTerritory": "도 선택",

diff --git a/packages/lib/src/language/locales/nl-NL.json b/packages/lib/src/language/locales/nl-NL.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Routingnummer (ABA)",
     "ach.accountLocationField.invalid": "Ongeldig routingnummer (ABA)",
     "ach.savedBankAccount": "Opgeslagen bankrekening",
+    "ach.savings": "Spaarrekening",
+    "ach.checking": "Betaalrekening",
     "select.state": "Selecteer staat",
     "select.stateOrProvince": "Selecteer staat of provincie",
     "select.provinceOrTerritory": "Selecteer provincie of territorium",

diff --git a/packages/lib/src/language/locales/no-NO.json b/packages/lib/src/language/locales/no-NO.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "ABA-dirigeringsnummer",
     "ach.accountLocationField.invalid": "Ugyldig ABA-dirigeringsnummer",
     "ach.savedBankAccount": "Lagret bankkonto",
+    "ach.savings": "Sparekonto",
+    "ach.checking": "Sjekkkonto",
     "select.state": "Velg delstat",
     "select.stateOrProvince": "Velg delstat eller provins",
     "select.provinceOrTerritory": "Velg provins eller territorium",

diff --git a/packages/lib/src/language/locales/pl-PL.json b/packages/lib/src/language/locales/pl-PL.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Kod bankowy ABA Routing Number",
     "ach.accountLocationField.invalid": "Nieprawidłowy kod bankowy ABA Routing Number",
     "ach.savedBankAccount": "Zapisane konto bankowe",
+    "ach.savings": "Konto oszczędnościowe",
+    "ach.checking": "Rachunek bieżący",
     "select.state": "Wybierz stan",
     "select.stateOrProvince": "Wybierz stan/województwo",
     "select.provinceOrTerritory": "Wybierz region/terytorium",

diff --git a/packages/lib/src/language/locales/pt-BR.json b/packages/lib/src/language/locales/pt-BR.json
@@ -148,6 +148,8 @@
     "ach.accountLocationField.title": "Número de roteamento ABA",
     "ach.accountLocationField.invalid": "Número de roteamento ABA inválido",
     "ach.savedBankAccount": "Conta bancária cadastrada",
+    "ach.savings": "Conta poupança",
+    "ach.checking": "Conta corrente",
     "select.state": "Selecionar estado",
     "select.stateOrProvince": "Selecione estado ou província",
     "select.provinceOrTerritory": "Selecionar província ou território",

diff --git a/packages/lib/src/language/locales/pt-PT.json b/packages/lib/src/language/locales/pt-PT.json
@@ -152,6 +152,8 @@
     "ach.accountLocationField.title": "Número de encaminhamento da ABA",
     "ach.accountLocationField.invalid": "Número de encaminhamento ABA inválido",
     "ach.savedBankAccount": "Conta bancária guardada",
+    "ach.savings": "Conta poupança",
+    "ach.checking": "Conta corrente",
     "select.state": "Selecione estado",
     "select.stateOrProvince": "Selecione estado ou província",
     "select.provinceOrTerritory": "Selecionar província ou território",

diff --git a/packages/lib/src/language/locales/ro-RO.json b/packages/lib/src/language/locales/ro-RO.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Număr de direcționare ABA",
     "ach.accountLocationField.invalid": "Număr de direcționare ABA incorect",
     "ach.savedBankAccount": "Cont bancar salvat",
+    "ach.savings": "Cont de economii",
+    "ach.checking": "Cont curent",
     "select.state": "Selectați statul",
     "select.stateOrProvince": "Selectați județul sau provincia",
     "select.provinceOrTerritory": "Selectați provincia sau teritoriul",

diff --git a/packages/lib/src/language/locales/ru-RU.json b/packages/lib/src/language/locales/ru-RU.json
@@ -150,6 +150,8 @@
     "ach.accountLocationField.title": "Маршрутный номер ABA",
     "ach.accountLocationField.invalid": "Недействительный маршрутный номер ABA",
     "ach.savedBankAccount": "Сохраненный банковский счет",
+    "ach.savings": "Сберегательный счет",
+    "ach.checking": "Текущий счет",
     "select.state": "Выберите штат",
     "select.stateOrProvince": "Выберите штат или область",
     "select.provinceOrTerritory": "Выберите провинцию или территорию",

diff --git a/packages/lib/src/language/locales/sk-SK.json b/packages/lib/src/language/locales/sk-SK.json
@@ -151,6 +151,8 @@
     "ach.accountLocationField.title": "Smerovacie číslo ABA",
     "ach.accountLocationField.invalid": "Neplatné smerovacie číslo ABA",
     "ach.savedBankAccount": "Uložený bankový účet",
+    "ach.savings": "Sporiaci účet",
+    "ach.checking": "Kontrolný účet",
     "select.state": "Vyberte kraj",
     "select.stateOrProvince": "Vyberte kraj alebo okres",
     "select.provinceOrTerritory": "Vyberte okres alebo územie",