From 89d868de01ad73f1b8731b994b1ce4a27404f299 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 22 Jan 2024 17:37:13 +0100 Subject: [PATCH 01/11] feat(riverty): add new component --- .../lib/src/components/AfterPay/AfterPay.tsx | 8 +-- .../lib/src/components/AfterPay/utils.test.ts | 41 --------------- packages/lib/src/components/AfterPay/utils.ts | 13 ----- .../lib/src/components/Riverty/Riverty.tsx | 23 +++++++++ packages/lib/src/components/Riverty/config.ts | 45 ++++++++++++++++ packages/lib/src/components/Riverty/index.ts | 1 + packages/lib/src/components/index.ts | 2 + .../components/internal/Address/Address.tsx | 8 +-- .../Address/components/ReadOnlyAddress.tsx | 2 +- .../components/internal/Address/constants.ts | 5 +- .../ConsentCheckboxLabel.tsx | 2 +- .../ConsentCheckboxLabel/index.ts | 0 .../internal/OpenInvoice/OpenInvoice.tsx | 2 + .../components/internal/OpenInvoice/types.ts | 2 + packages/lib/src/language/locales/en-US.json | 2 + .../lib/src/utils/getConsentLinkUrl.test.ts | 51 +++++++++++++++++++ packages/lib/src/utils/getConsentUrl.ts | 17 +++++++ .../src/pages/OpenInvoices/OpenInvoices.html | 9 ++++ .../src/pages/OpenInvoices/OpenInvoices.js | 17 ++++++- 19 files changed, 182 insertions(+), 68 deletions(-) delete mode 100644 packages/lib/src/components/AfterPay/utils.test.ts delete mode 100644 packages/lib/src/components/AfterPay/utils.ts create mode 100644 packages/lib/src/components/Riverty/Riverty.tsx create mode 100644 packages/lib/src/components/Riverty/config.ts create mode 100644 packages/lib/src/components/Riverty/index.ts rename packages/lib/src/components/{AfterPay/components => internal}/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx (92%) rename packages/lib/src/components/{AfterPay/components => internal}/ConsentCheckboxLabel/index.ts (100%) create mode 100644 packages/lib/src/utils/getConsentLinkUrl.test.ts create mode 100644 packages/lib/src/utils/getConsentUrl.ts diff --git a/packages/lib/src/components/AfterPay/AfterPay.tsx b/packages/lib/src/components/AfterPay/AfterPay.tsx index be8bcfbc9d..a50f0a9d74 100644 --- a/packages/lib/src/components/AfterPay/AfterPay.tsx +++ b/packages/lib/src/components/AfterPay/AfterPay.tsx @@ -1,8 +1,8 @@ import { h } from 'preact'; import OpenInvoiceContainer from '../helpers/OpenInvoiceContainer'; -import ConsentCheckboxLabel from './components/ConsentCheckboxLabel'; -import { getConsentLinkUrl } from './utils'; -import { ALLOWED_COUNTRIES } from './config'; +import ConsentCheckboxLabel from '../internal/ConsentCheckboxLabel'; +import { ALLOWED_COUNTRIES, rivertyConsentUrlMap } from './config'; +import { getConsentUrl } from '../../utils/getConsentUrl'; export default class AfterPay extends OpenInvoiceContainer { public static type = 'afterpay_default'; @@ -11,7 +11,7 @@ export default class AfterPay extends OpenInvoiceContainer { return { ...super.formatProps(props), allowedCountries: props.countryCode ? [props.countryCode] : ALLOWED_COUNTRIES, - consentCheckboxLabel: + consentCheckboxLabel: }; } } diff --git a/packages/lib/src/components/AfterPay/utils.test.ts b/packages/lib/src/components/AfterPay/utils.test.ts deleted file mode 100644 index 698c569fe0..0000000000 --- a/packages/lib/src/components/AfterPay/utils.test.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { getConsentLinkUrl } from './utils'; -import { rivertyConsentUrlMap } from './config'; - -describe('getConsentLinkUrl', () => { - describe('the country code is NL', () => { - test('returns the english URL if the shopper locale is "en"', () => { - expect(getConsentLinkUrl('nl', 'en')).toBe(rivertyConsentUrlMap.nl.en); - }); - test('returns the NL URL if the shopper locale is "nl"', () => { - expect(getConsentLinkUrl('nl', 'nl')).toBe(rivertyConsentUrlMap.nl.nl); - }); - }); - describe('the country code is BE', () => { - test('returns the english URL if the shopper locale is "en"', () => { - expect(getConsentLinkUrl('be', 'en')).toBe(rivertyConsentUrlMap.be.en); - }); - test('returns the NL URL if the shopper locale is "nl"', () => { - expect(getConsentLinkUrl('be', 'nl')).toBe(rivertyConsentUrlMap.be.nl); - }); - test('returns the FR URL if the shopper locale is "fr"', () => { - expect(getConsentLinkUrl('be', 'fr')).toBe(rivertyConsentUrlMap.be.fr); - }); - }); - describe('no supported country code & locale', () => { - beforeEach(() => { - console.warn = jest.fn(); - }); - test('should give a warning if no country code is provided', () => { - getConsentLinkUrl(undefined, 'en'); - expect(console.warn).toBeCalled(); - }); - test('should give a warning if wrong country code is provided', () => { - getConsentLinkUrl('WRONG', 'en'); - expect(console.warn).toBeCalled(); - }); - test('should give a warning if wrong locale is provided', () => { - getConsentLinkUrl('nl', 'fr'); - expect(console.warn).toBeCalled(); - }); - }); -}); diff --git a/packages/lib/src/components/AfterPay/utils.ts b/packages/lib/src/components/AfterPay/utils.ts deleted file mode 100644 index 3b37dc86b5..0000000000 --- a/packages/lib/src/components/AfterPay/utils.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { rivertyConsentUrlMap } from './config'; - -function getConsentLinkUrl(countryCode: string, locale: string): string { - const languageCode = locale?.toLowerCase().slice(0, 2); - const consentLink = rivertyConsentUrlMap[countryCode?.toLowerCase()]?.[languageCode]; - if (!consentLink) { - console.warn(`Cannot find a consent url for the provided countryCode: ${countryCode} and locale: ${locale}`); - return; - } - return consentLink; -} - -export { getConsentLinkUrl }; diff --git a/packages/lib/src/components/Riverty/Riverty.tsx b/packages/lib/src/components/Riverty/Riverty.tsx new file mode 100644 index 0000000000..5db0ab8669 --- /dev/null +++ b/packages/lib/src/components/Riverty/Riverty.tsx @@ -0,0 +1,23 @@ +import { h } from 'preact'; +import OpenInvoiceContainer from '../helpers/OpenInvoiceContainer'; +import { allowedCountries, deliveryAddressSpecification, personalDetailsRequiredFields, termsAndConditionsUrlMap } from './config'; +import ConsentCheckboxLabel from '../internal/ConsentCheckboxLabel'; +import { getConsentUrl } from '../../utils/getConsentUrl'; + +export default class Riverty extends OpenInvoiceContainer { + public static type = 'riverty'; + + protected static defaultProps = { + personalDetailsRequiredFields, + allowedCountries, + deliveryAddressSpecification, + ...OpenInvoiceContainer.defaultProps + }; + + formatProps(props) { + return { + ...super.formatProps(props), + consentCheckboxLabel: + }; + } +} diff --git a/packages/lib/src/components/Riverty/config.ts b/packages/lib/src/components/Riverty/config.ts new file mode 100644 index 0000000000..8a411632d9 --- /dev/null +++ b/packages/lib/src/components/Riverty/config.ts @@ -0,0 +1,45 @@ +import { CITY, COUNTRY, FIRST_NAME, HOUSE_NUMBER_OR_NAME, LAST_NAME, POSTAL_CODE, STATE_OR_PROVINCE, STREET } from '../internal/Address/constants'; +import { AddressSpecifications } from '../internal/Address/types'; + +export const allowedCountries = ['AT', 'CH', 'DE']; +export const personalDetailsRequiredFields = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber']; +export const deliveryAddressSpecification: AddressSpecifications = { + default: { + labels: { + [FIRST_NAME]: 'deliveryAddress.firstName', + [LAST_NAME]: 'deliveryAddress.lastName' + }, + schema: [ + COUNTRY, + [ + [FIRST_NAME, 50], + [LAST_NAME, 50] + ], + [ + [STREET, 70], + [HOUSE_NUMBER_OR_NAME, 30] + ], + + [ + [POSTAL_CODE, 30], + [CITY, 70] + ], + STATE_OR_PROVINCE + ] + } +}; +export const termsAndConditionsUrlMap = { + at: { + en: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/at_en', + de: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/at_de' + }, + ch: { + en: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/ch_en', + de: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/ch_de', + fr: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/ch_fr' + }, + de: { + en: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/de_en', + de: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/de_de' + } +}; diff --git a/packages/lib/src/components/Riverty/index.ts b/packages/lib/src/components/Riverty/index.ts new file mode 100644 index 0000000000..eecc65bdca --- /dev/null +++ b/packages/lib/src/components/Riverty/index.ts @@ -0,0 +1 @@ +export { default } from './Riverty'; diff --git a/packages/lib/src/components/index.ts b/packages/lib/src/components/index.ts index 68b2dc4c1f..616fa4d389 100644 --- a/packages/lib/src/components/index.ts +++ b/packages/lib/src/components/index.ts @@ -63,6 +63,7 @@ import Duitnow from './DuitNow'; import ANCV from './ANCV'; import Trustly from './Trustly'; import PayMe from './PayMe'; +import Riverty from './Riverty'; /** * Maps each component with a Component element. @@ -113,6 +114,7 @@ const componentsMap = { facilypay_12x: FacilyPay12x, ratepay: RatePay, ratepay_directdebit: RatePayDirectDebit, + riverty: Riverty, /** Open Invoice */ /** Wallets */ diff --git a/packages/lib/src/components/internal/Address/Address.tsx b/packages/lib/src/components/internal/Address/Address.tsx index ea23d1861d..16e69659c2 100644 --- a/packages/lib/src/components/internal/Address/Address.tsx +++ b/packages/lib/src/components/internal/Address/Address.tsx @@ -14,7 +14,8 @@ import { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils'; import useCoreContext from '../../../core/Context/useCoreContext'; import { ComponentMethodsRef } from '../../types'; import AddressSearch from './components/AddressSearch'; - +// todo: make it more flexible, why address schema ties to country? +// todo: test deliveryAddressSpecification prop export default function Address(props: AddressProps) { const { i18n } = useCoreContext(); @@ -51,8 +52,7 @@ export default function Address(props: AddressProps) { const setSearchData = useCallback( (selectedAddress: AddressData) => { - const propsKeysToProcess = ADDRESS_SCHEMA; - propsKeysToProcess.forEach(propKey => { + ADDRESS_SCHEMA.forEach(propKey => { // Make sure the data provided by the merchant is always strings const providedValue = selectedAddress[propKey]; if (providedValue === null || providedValue === undefined) return; @@ -168,7 +168,7 @@ export default function Address(props: AddressProps) { ); const addressSchema = specifications.getAddressSchemaForCountry(data.country); - + console.log({ addressSchema }); return (
diff --git a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx index bf26a96cd1..2270ca7d5a 100644 --- a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx +++ b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx @@ -2,7 +2,7 @@ import { h } from 'preact'; import Fieldset from '../../FormFields/Fieldset'; import { ReadOnlyAddressProps } from '../types'; import { FALLBACK_VALUE } from '../constants'; - +// todo: add first name and last name? const ReadOnlyAddress = ({ data, label }: ReadOnlyAddressProps) => { const { street, houseNumberOrName, city, postalCode, stateOrProvince, country } = data; diff --git a/packages/lib/src/components/internal/Address/constants.ts b/packages/lib/src/components/internal/Address/constants.ts index b1c3019656..27347ea5a1 100644 --- a/packages/lib/src/components/internal/Address/constants.ts +++ b/packages/lib/src/components/internal/Address/constants.ts @@ -1,9 +1,8 @@ import { AddressSpecifications } from './types'; export const FALLBACK_VALUE = 'N/A'; -export const ADDRESS_SCHEMA = ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'] as const; -export const [STREET, HOUSE_NUMBER_OR_NAME, POSTAL_CODE, CITY, STATE_OR_PROVINCE, COUNTRY] = ADDRESS_SCHEMA; - +export const ADDRESS_SCHEMA = ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country', 'firstName', 'lastName'] as const; +export const [STREET, HOUSE_NUMBER_OR_NAME, POSTAL_CODE, CITY, STATE_OR_PROVINCE, COUNTRY, FIRST_NAME, LAST_NAME] = ADDRESS_SCHEMA; // prettier-ignore export const ADDRESS_SPECIFICATIONS: AddressSpecifications = { AU: { diff --git a/packages/lib/src/components/AfterPay/components/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx b/packages/lib/src/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx similarity index 92% rename from packages/lib/src/components/AfterPay/components/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx rename to packages/lib/src/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx index 70a29f84d8..44269a2edf 100644 --- a/packages/lib/src/components/AfterPay/components/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx +++ b/packages/lib/src/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx @@ -1,5 +1,5 @@ import { Fragment, h } from 'preact'; -import useCoreContext from '../../../../core/Context/useCoreContext'; +import useCoreContext from '../../../core/Context/useCoreContext'; interface ConsentCheckboxLabelProps { url: string; diff --git a/packages/lib/src/components/AfterPay/components/ConsentCheckboxLabel/index.ts b/packages/lib/src/components/internal/ConsentCheckboxLabel/index.ts similarity index 100% rename from packages/lib/src/components/AfterPay/components/ConsentCheckboxLabel/index.ts rename to packages/lib/src/components/internal/ConsentCheckboxLabel/index.ts diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx index 4c98dcae93..1d3f5419c5 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx +++ b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx @@ -299,6 +299,8 @@ export default function OpenInvoice(props: OpenInvoiceProps) {
void; showFormInstruction?: boolean; } diff --git a/packages/lib/src/language/locales/en-US.json b/packages/lib/src/language/locales/en-US.json index f19eb49ba9..8182622bb2 100644 --- a/packages/lib/src/language/locales/en-US.json +++ b/packages/lib/src/language/locales/en-US.json @@ -78,6 +78,8 @@ "houseNumberOrName": "House number", "separateDeliveryAddress": "Specify a separate delivery address", "deliveryAddress": "Delivery Address", + "deliveryAddress.firstName": "Recipient first name", + "deliveryAddress.lastName": "Recipient last name", "zipCode": "Zip code", "apartmentSuite": "Apartment / Suite", "provinceOrTerritory": "Province or Territory", diff --git a/packages/lib/src/utils/getConsentLinkUrl.test.ts b/packages/lib/src/utils/getConsentLinkUrl.test.ts new file mode 100644 index 0000000000..08c576f7e2 --- /dev/null +++ b/packages/lib/src/utils/getConsentLinkUrl.test.ts @@ -0,0 +1,51 @@ +import { getConsentUrl } from './getConsentUrl'; + +const rivertyConsentUrlMap = { + be: { + en: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/be_en', + fr: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/be_fr', + nl: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/be_nl' + }, + nl: { + en: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/nl_en', + nl: 'https://documents.riverty.com/terms_conditions/payment_methods/invoice/nl_nl' + } +}; +describe('getConsentLinkUrl', () => { + describe('the country code is NL', () => { + test('returns the english URL if the shopper locale is "en"', () => { + expect(getConsentUrl('nl', 'en', rivertyConsentUrlMap)).toBe(rivertyConsentUrlMap.nl.en); + }); + test('returns the NL URL if the shopper locale is "nl"', () => { + expect(getConsentUrl('nl', 'nl', rivertyConsentUrlMap)).toBe(rivertyConsentUrlMap.nl.nl); + }); + }); + describe('the country code is BE', () => { + test('returns the english URL if the shopper locale is "en"', () => { + expect(getConsentUrl('be', 'en', rivertyConsentUrlMap)).toBe(rivertyConsentUrlMap.be.en); + }); + test('returns the NL URL if the shopper locale is "nl"', () => { + expect(getConsentUrl('be', 'nl', rivertyConsentUrlMap)).toBe(rivertyConsentUrlMap.be.nl); + }); + test('returns the FR URL if the shopper locale is "fr"', () => { + expect(getConsentUrl('be', 'fr', rivertyConsentUrlMap)).toBe(rivertyConsentUrlMap.be.fr); + }); + }); + describe('no supported country code & locale', () => { + beforeEach(() => { + console.warn = jest.fn(); + }); + test('should give a warning if no country code is provided', () => { + getConsentUrl(undefined, 'en', rivertyConsentUrlMap); + expect(console.warn).toBeCalled(); + }); + test('should give a warning if wrong country code is provided', () => { + getConsentUrl('WRONG', 'en', rivertyConsentUrlMap); + expect(console.warn).toBeCalled(); + }); + test('should give a warning if wrong locale is provided', () => { + getConsentUrl('nl', 'fr', rivertyConsentUrlMap); + expect(console.warn).toBeCalled(); + }); + }); +}); diff --git a/packages/lib/src/utils/getConsentUrl.ts b/packages/lib/src/utils/getConsentUrl.ts new file mode 100644 index 0000000000..64e7d4859b --- /dev/null +++ b/packages/lib/src/utils/getConsentUrl.ts @@ -0,0 +1,17 @@ +type UrlMap = { + [countryCode: string]: { + [language: string]: string; + }; +}; + +function getConsentUrl(countryCode: string, locale: string, urlMap: UrlMap): string { + const languageCode = locale?.toLowerCase().slice(0, 2); + const consentLink = urlMap[countryCode?.toLowerCase()]?.[languageCode]; + if (!consentLink) { + console.warn(`Cannot find a consent url for the provided countryCode: ${countryCode} and locale: ${locale}`); + return; + } + return consentLink; +} + +export { getConsentUrl }; diff --git a/packages/playground/src/pages/OpenInvoices/OpenInvoices.html b/packages/playground/src/pages/OpenInvoices/OpenInvoices.html index b5d436d438..689553f62e 100644 --- a/packages/playground/src/pages/OpenInvoices/OpenInvoices.html +++ b/packages/playground/src/pages/OpenInvoices/OpenInvoices.html @@ -74,6 +74,15 @@

Atome

+ +
+
+

Riverty

+
+
+
+
+
diff --git a/packages/playground/src/pages/OpenInvoices/OpenInvoices.js b/packages/playground/src/pages/OpenInvoices/OpenInvoices.js index 9c5fb08c59..ff2fe9bf1a 100644 --- a/packages/playground/src/pages/OpenInvoices/OpenInvoices.js +++ b/packages/playground/src/pages/OpenInvoices/OpenInvoices.js @@ -15,7 +15,8 @@ const showComps = { afterpayb2b: true, facilypay_3x: true, affirm: true, - atome: true + atome: true, + riverty: true }; getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsData => { @@ -31,6 +32,20 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsData => { amount // Optional. Used to display the amount in the Pay Button. }); + // RIVERTY + if (showComps.riverty) { + window.riverty = checkout + .create('riverty', { + countryCode: 'DE', // 'DE' / 'AT' / 'CH' + visibility: { + personalDetails: 'editable', // editable [default] / readOnly / hidden + billingAddress: 'editable', + deliveryAddress: 'editable' + } + }) + .mount('.riverty-field'); + } + // RATEPAY if (showComps.ratepay) { window.ratepay = checkout From e17807c42f74a32c3b03e7de114ab1687023f552 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Wed, 24 Jan 2024 14:44:02 +0100 Subject: [PATCH 02/11] test: added test and some refactor --- .../src/components/Riverty/Riverty.test.tsx | 81 +++++++++++++++++++ .../lib/src/components/Riverty/Riverty.tsx | 1 + packages/lib/src/components/Riverty/config.ts | 5 +- .../components/internal/Address/Address.tsx | 3 +- .../Address/components/ReadOnlyAddress.tsx | 18 ++++- 5 files changed, 99 insertions(+), 9 deletions(-) create mode 100644 packages/lib/src/components/Riverty/Riverty.test.tsx diff --git a/packages/lib/src/components/Riverty/Riverty.test.tsx b/packages/lib/src/components/Riverty/Riverty.test.tsx new file mode 100644 index 0000000000..ba8ccad7fc --- /dev/null +++ b/packages/lib/src/components/Riverty/Riverty.test.tsx @@ -0,0 +1,81 @@ +import { h } from 'preact'; +import Riverty from './Riverty'; +import { render, screen } from '@testing-library/preact'; +import { Resources } from '../../core/Context/Resources'; +import { SRPanel } from '../../core/Errors/SRPanel'; +import Language from '../../language'; +import getDataset from '../../core/Services/get-dataset'; + +jest.mock('../../core/Services/get-dataset'); +const countriesMock = [ + { + id: 'DE', + name: 'Germany' + } +]; + +(getDataset as jest.Mock).mockImplementation(jest.fn(() => Promise.resolve(countriesMock))); + +describe('Riverty', () => { + const props = { + i18n: new Language(), + loadingContext: 'test', + countryCode: 'DE', + modules: { + resources: new Resources('test'), + srPanel: new SRPanel({}) + } + }; + + describe('personal details', () => { + test('should show required fields', async () => { + // @ts-ignore ignore + render(); + const firstName = await screen.findByLabelText('First name', { selector: 'input' }); + const lastName = await screen.findByLabelText('Last name', { selector: 'input' }); + const dateOfBirth = await screen.findByLabelText('Date of birth', { selector: 'input' }); + const email = await screen.findByLabelText('Email address', { selector: 'input' }); + const telephone = await screen.findByLabelText('Telephone number', { selector: 'input' }); + const male = screen.queryByLabelText('Male'); + const female = screen.queryByLabelText('Female'); + + expect(firstName).not.toBeNull(); + expect(lastName).not.toBeNull(); + expect(dateOfBirth).not.toBeNull(); + expect(email).not.toBeNull(); + expect(telephone).not.toBeNull(); + expect(male).toBeNull(); + expect(female).toBeNull(); + }); + }); + + describe('delivery address', () => { + test('should show required fields', async () => { + const withDeliveryAddressData = { + ...props, + data: { + deliveryAddress: { + firstName: 'First', + lastName: 'Last' + } + } + }; + // @ts-ignore ignore + render(); + const firstName = await screen.findByLabelText('Recipient first name', { selector: 'input' }); + const lastName = await screen.findByLabelText('Recipient last name', { selector: 'input' }); + const country = await screen.findAllByLabelText('Country'); + const street = await screen.findAllByLabelText('Street'); + const houseNumber = await screen.findAllByLabelText('House number'); + const postalCode = await screen.findAllByLabelText('Postal code'); + const city = await screen.findAllByLabelText('City'); + expect(firstName).not.toBeNull(); + expect(lastName).not.toBeNull(); + expect(country.length).toBe(2); + expect(street.length).toBe(2); + expect(houseNumber.length).toBe(2); + expect(postalCode.length).toBe(2); + expect(city.length).toBe(2); + }); + }); +}); diff --git a/packages/lib/src/components/Riverty/Riverty.tsx b/packages/lib/src/components/Riverty/Riverty.tsx index 5db0ab8669..bd5f9b5f8a 100644 --- a/packages/lib/src/components/Riverty/Riverty.tsx +++ b/packages/lib/src/components/Riverty/Riverty.tsx @@ -17,6 +17,7 @@ export default class Riverty extends OpenInvoiceContainer { formatProps(props) { return { ...super.formatProps(props), + allowedCountries: props.countryCode ? [props.countryCode] : allowedCountries, consentCheckboxLabel: }; } diff --git a/packages/lib/src/components/Riverty/config.ts b/packages/lib/src/components/Riverty/config.ts index 8a411632d9..cf41d8733f 100644 --- a/packages/lib/src/components/Riverty/config.ts +++ b/packages/lib/src/components/Riverty/config.ts @@ -1,4 +1,4 @@ -import { CITY, COUNTRY, FIRST_NAME, HOUSE_NUMBER_OR_NAME, LAST_NAME, POSTAL_CODE, STATE_OR_PROVINCE, STREET } from '../internal/Address/constants'; +import { CITY, COUNTRY, FIRST_NAME, HOUSE_NUMBER_OR_NAME, LAST_NAME, POSTAL_CODE, STREET } from '../internal/Address/constants'; import { AddressSpecifications } from '../internal/Address/types'; export const allowedCountries = ['AT', 'CH', 'DE']; @@ -23,8 +23,7 @@ export const deliveryAddressSpecification: AddressSpecifications = { [ [POSTAL_CODE, 30], [CITY, 70] - ], - STATE_OR_PROVINCE + ] ] } }; diff --git a/packages/lib/src/components/internal/Address/Address.tsx b/packages/lib/src/components/internal/Address/Address.tsx index 16e69659c2..8cc647ae3b 100644 --- a/packages/lib/src/components/internal/Address/Address.tsx +++ b/packages/lib/src/components/internal/Address/Address.tsx @@ -14,8 +14,7 @@ import { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils'; import useCoreContext from '../../../core/Context/useCoreContext'; import { ComponentMethodsRef } from '../../types'; import AddressSearch from './components/AddressSearch'; -// todo: make it more flexible, why address schema ties to country? -// todo: test deliveryAddressSpecification prop + export default function Address(props: AddressProps) { const { i18n } = useCoreContext(); diff --git a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx index 2270ca7d5a..6349bdbddf 100644 --- a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx +++ b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx @@ -1,13 +1,23 @@ -import { h } from 'preact'; +import { Fragment, h } from 'preact'; import Fieldset from '../../FormFields/Fieldset'; import { ReadOnlyAddressProps } from '../types'; import { FALLBACK_VALUE } from '../constants'; -// todo: add first name and last name? -const ReadOnlyAddress = ({ data, label }: ReadOnlyAddressProps) => { - const { street, houseNumberOrName, city, postalCode, stateOrProvince, country } = data; +const ReadOnlyAddress = ({ data, label }: ReadOnlyAddressProps) => { + const { street, houseNumberOrName, city, postalCode, stateOrProvince, country, firstName, lastName } = data; + const hasName = firstName || lastName; + const FullName = ({ firstName, lastName }) => { + return ( + + {firstName && `${firstName} `} + {lastName && `${lastName}`} +
+ + ); + }; return (
+ {hasName && } {!!street && street} {houseNumberOrName && `, ${houseNumberOrName},`}
From 17c8d55c671e01b1e14e8f0f8ed8bee67b38d2da Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 29 Jan 2024 15:47:23 +0100 Subject: [PATCH 03/11] refactor: added translations --- packages/lib/src/language/locales/ar.json | 2 ++ packages/lib/src/language/locales/cs-CZ.json | 2 ++ packages/lib/src/language/locales/da-DK.json | 2 ++ packages/lib/src/language/locales/de-DE.json | 2 ++ packages/lib/src/language/locales/el-GR.json | 2 ++ packages/lib/src/language/locales/es-ES.json | 2 ++ packages/lib/src/language/locales/fi-FI.json | 2 ++ packages/lib/src/language/locales/fr-FR.json | 2 ++ packages/lib/src/language/locales/hr-HR.json | 2 ++ packages/lib/src/language/locales/hu-HU.json | 2 ++ packages/lib/src/language/locales/it-IT.json | 2 ++ packages/lib/src/language/locales/ja-JP.json | 2 ++ packages/lib/src/language/locales/ko-KR.json | 2 ++ packages/lib/src/language/locales/nl-NL.json | 2 ++ packages/lib/src/language/locales/no-NO.json | 2 ++ packages/lib/src/language/locales/pl-PL.json | 2 ++ packages/lib/src/language/locales/pt-BR.json | 2 ++ packages/lib/src/language/locales/pt-PT.json | 2 ++ packages/lib/src/language/locales/ro-RO.json | 2 ++ packages/lib/src/language/locales/ru-RU.json | 2 ++ packages/lib/src/language/locales/sk-SK.json | 2 ++ packages/lib/src/language/locales/sl-SI.json | 2 ++ packages/lib/src/language/locales/sv-SE.json | 2 ++ packages/lib/src/language/locales/zh-CN.json | 2 ++ packages/lib/src/language/locales/zh-TW.json | 2 ++ 25 files changed, 50 insertions(+) diff --git a/packages/lib/src/language/locales/ar.json b/packages/lib/src/language/locales/ar.json index 94308a1ef3..01b1830126 100644 --- a/packages/lib/src/language/locales/ar.json +++ b/packages/lib/src/language/locales/ar.json @@ -78,6 +78,8 @@ "houseNumberOrName": "رقم المنزل", "separateDeliveryAddress": "حدد عنوان تسليم منفصل", "deliveryAddress": "عنوان التسليم", + "deliveryAddress.firstName": "الاسم الأول للمستلم", + "deliveryAddress.lastName": "الاسم الأخير للمستلم", "zipCode": "الرمز البريدي", "apartmentSuite": "الشقة / الجناح", "provinceOrTerritory": "المقاطعة أو الإقليم", diff --git a/packages/lib/src/language/locales/cs-CZ.json b/packages/lib/src/language/locales/cs-CZ.json index 30f3d76f18..fc03579d54 100644 --- a/packages/lib/src/language/locales/cs-CZ.json +++ b/packages/lib/src/language/locales/cs-CZ.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Číslo popisné", "separateDeliveryAddress": "Zadat dodací adresu odlišnou od fakturační", "deliveryAddress": "Dodací adresa", + "deliveryAddress.firstName": "Jméno příjemce", + "deliveryAddress.lastName": "Příjmení příjemce", "zipCode": "PSČ", "apartmentSuite": "Byt", "provinceOrTerritory": "Provincie nebo teritorium", diff --git a/packages/lib/src/language/locales/da-DK.json b/packages/lib/src/language/locales/da-DK.json index f82742c862..b91ec8bfc6 100644 --- a/packages/lib/src/language/locales/da-DK.json +++ b/packages/lib/src/language/locales/da-DK.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Husnummer", "separateDeliveryAddress": "Angiv en separat leveringsadresse", "deliveryAddress": "Leveringsadresse", + "deliveryAddress.firstName": "Modtagers fornavn", + "deliveryAddress.lastName": "Modtagers efternavn", "zipCode": "Postnummer", "apartmentSuite": "Lejlighed/suite", "provinceOrTerritory": "Provins eller territorium", diff --git a/packages/lib/src/language/locales/de-DE.json b/packages/lib/src/language/locales/de-DE.json index 7e02ba2c3b..6d811cdb95 100644 --- a/packages/lib/src/language/locales/de-DE.json +++ b/packages/lib/src/language/locales/de-DE.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Hausnummer", "separateDeliveryAddress": "Abweichende Lieferadresse angeben", "deliveryAddress": "Lieferadresse", + "deliveryAddress.firstName": "Vorname des Empfängers", + "deliveryAddress.lastName": "Nachname des Empfängers", "zipCode": "PLZ", "apartmentSuite": "Wohnung/Geschoss", "provinceOrTerritory": "Provinz oder Territorium", diff --git a/packages/lib/src/language/locales/el-GR.json b/packages/lib/src/language/locales/el-GR.json index b037ac4feb..66bc6d6107 100644 --- a/packages/lib/src/language/locales/el-GR.json +++ b/packages/lib/src/language/locales/el-GR.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Αριθμός οικίας", "separateDeliveryAddress": "Καθορίστε μια ξεχωριστή διεύθυνση παράδοσης", "deliveryAddress": "Διεύθυνση παράδοσης", + "deliveryAddress.firstName": "Όνομα παραλήπτη", + "deliveryAddress.lastName": "Επώνυμο παραλήπτη", "zipCode": "Ταχυδρομικός κώδικας", "apartmentSuite": "Διαμέρισμα/Γραφείο", "provinceOrTerritory": "Επαρχία ή περιφέρεια", diff --git a/packages/lib/src/language/locales/es-ES.json b/packages/lib/src/language/locales/es-ES.json index 15a7f02bf4..1139b8699e 100644 --- a/packages/lib/src/language/locales/es-ES.json +++ b/packages/lib/src/language/locales/es-ES.json @@ -76,6 +76,8 @@ "houseNumberOrName": "Número de vivienda", "separateDeliveryAddress": "Especificar otra dirección de envío", "deliveryAddress": "Dirección de envío", + "deliveryAddress.firstName": "Nombre del destinatario", + "deliveryAddress.lastName": "Apellidos del destinatario", "zipCode": "Código postal", "apartmentSuite": "Apartamento/suite", "provinceOrTerritory": "Provincia o territorio", diff --git a/packages/lib/src/language/locales/fi-FI.json b/packages/lib/src/language/locales/fi-FI.json index 4013d7d23e..ed6a44f2c8 100644 --- a/packages/lib/src/language/locales/fi-FI.json +++ b/packages/lib/src/language/locales/fi-FI.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Talon numero", "separateDeliveryAddress": "Määritä erillinen toimitusosoite", "deliveryAddress": "Toimitusosoite", + "deliveryAddress.firstName": "Vastaanottajan etunimi", + "deliveryAddress.lastName": "Vastaanottajan sukunimi", "zipCode": "Postinumero", "apartmentSuite": "Huoneisto / sviitti", "provinceOrTerritory": "Maakunta tai alue", diff --git a/packages/lib/src/language/locales/fr-FR.json b/packages/lib/src/language/locales/fr-FR.json index 5bce171eb5..bd5e31c8b5 100644 --- a/packages/lib/src/language/locales/fr-FR.json +++ b/packages/lib/src/language/locales/fr-FR.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Numéro de rue", "separateDeliveryAddress": "Indiquer une adresse de livraison distincte", "deliveryAddress": "Adresse de livraison", + "deliveryAddress.firstName": "Prénom du destinataire", + "deliveryAddress.lastName": "Nom du destinataire", "zipCode": "Code postal", "apartmentSuite": "Appartement", "provinceOrTerritory": "Province ou territoire", diff --git a/packages/lib/src/language/locales/hr-HR.json b/packages/lib/src/language/locales/hr-HR.json index 365fd61a89..e2cf27d5b1 100644 --- a/packages/lib/src/language/locales/hr-HR.json +++ b/packages/lib/src/language/locales/hr-HR.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Kućni broj", "separateDeliveryAddress": "Navedite zasebnu adresu za dostavu", "deliveryAddress": "Adresa za dostavu", + "deliveryAddress.firstName": "Ime primatelja", + "deliveryAddress.lastName": "Prezime primatelja", "zipCode": "Poštanski broj", "apartmentSuite": "Stan/apartman", "provinceOrTerritory": "Pokrajina ili teritorij", diff --git a/packages/lib/src/language/locales/hu-HU.json b/packages/lib/src/language/locales/hu-HU.json index 5ed9a4338b..e3d5b60280 100644 --- a/packages/lib/src/language/locales/hu-HU.json +++ b/packages/lib/src/language/locales/hu-HU.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Házszám", "separateDeliveryAddress": "Eltérő szállítási cím megadása", "deliveryAddress": "Szállítási cím", + "deliveryAddress.firstName": "Címzett keresztneve", + "deliveryAddress.lastName": "Címzett vezetékneve", "zipCode": "Irányítószám", "apartmentSuite": "Lakás/ajtószám", "provinceOrTerritory": "Tartomány vagy terület", diff --git a/packages/lib/src/language/locales/it-IT.json b/packages/lib/src/language/locales/it-IT.json index 247900aff8..f70969c1d9 100644 --- a/packages/lib/src/language/locales/it-IT.json +++ b/packages/lib/src/language/locales/it-IT.json @@ -76,6 +76,8 @@ "houseNumberOrName": "Numero civico", "separateDeliveryAddress": "Specifica un indirizzo di consegna alternativo", "deliveryAddress": "Indirizzo di consegna", + "deliveryAddress.firstName": "Nome del destinatario", + "deliveryAddress.lastName": "Cognome del destinatario", "zipCode": "CAP", "apartmentSuite": "Appartamento/suite", "provinceOrTerritory": "Provincia o territorio", diff --git a/packages/lib/src/language/locales/ja-JP.json b/packages/lib/src/language/locales/ja-JP.json index f51b2d240e..e44952ca72 100644 --- a/packages/lib/src/language/locales/ja-JP.json +++ b/packages/lib/src/language/locales/ja-JP.json @@ -78,6 +78,8 @@ "houseNumberOrName": "部屋番号", "separateDeliveryAddress": "別の配送先住所を指定してください", "deliveryAddress": "配送先住所", + "deliveryAddress.firstName": "受信者の名", + "deliveryAddress.lastName": "受信者の姓", "zipCode": "郵便番号", "apartmentSuite": "アパート名/部屋名", "provinceOrTerritory": "州または準州", diff --git a/packages/lib/src/language/locales/ko-KR.json b/packages/lib/src/language/locales/ko-KR.json index f28fbc29a8..f660fa00a3 100644 --- a/packages/lib/src/language/locales/ko-KR.json +++ b/packages/lib/src/language/locales/ko-KR.json @@ -78,6 +78,8 @@ "houseNumberOrName": "집 전화번호", "separateDeliveryAddress": "배송 주소 별도 지정", "deliveryAddress": "배송 주소", + "deliveryAddress.firstName": "받는 사람 이름", + "deliveryAddress.lastName": "받는 사람 성", "zipCode": "우편번호", "apartmentSuite": "아파트/건물", "provinceOrTerritory": "도", diff --git a/packages/lib/src/language/locales/nl-NL.json b/packages/lib/src/language/locales/nl-NL.json index 9716f9bc3c..a029917ddd 100644 --- a/packages/lib/src/language/locales/nl-NL.json +++ b/packages/lib/src/language/locales/nl-NL.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Huisnummer", "separateDeliveryAddress": "Een afwijkend bezorgadres opgeven", "deliveryAddress": "Bezorgadres", + "deliveryAddress.firstName": "Voornaam ontvanger", + "deliveryAddress.lastName": "Achternaam ontvanger", "zipCode": "Postcode", "apartmentSuite": "Appartement/Suite", "provinceOrTerritory": "Provincie of territorium", diff --git a/packages/lib/src/language/locales/no-NO.json b/packages/lib/src/language/locales/no-NO.json index 1323616b82..8ee7e3b2cc 100644 --- a/packages/lib/src/language/locales/no-NO.json +++ b/packages/lib/src/language/locales/no-NO.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Husnummer", "separateDeliveryAddress": "Spesifiser en separat leveringsadresse", "deliveryAddress": "Leveringsadresse", + "deliveryAddress.firstName": "Mottakerens fornavn", + "deliveryAddress.lastName": "Mottakerens etternavn", "zipCode": "Postnummer", "apartmentSuite": "Leilighet/suite", "provinceOrTerritory": "Provins eller territorium", diff --git a/packages/lib/src/language/locales/pl-PL.json b/packages/lib/src/language/locales/pl-PL.json index 9851e5da04..2acb016b79 100644 --- a/packages/lib/src/language/locales/pl-PL.json +++ b/packages/lib/src/language/locales/pl-PL.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Numer domu i mieszkania", "separateDeliveryAddress": "Podaj osobny adres dostawy", "deliveryAddress": "Adres dostawy", + "deliveryAddress.firstName": "Imię odbiorcy", + "deliveryAddress.lastName": "Nazwisko odbiorcy", "zipCode": "Kod pocztowy", "apartmentSuite": "Numer domu/mieszkania", "provinceOrTerritory": "Region lub terytorium", diff --git a/packages/lib/src/language/locales/pt-BR.json b/packages/lib/src/language/locales/pt-BR.json index 25d5c56b3a..e88079ecea 100644 --- a/packages/lib/src/language/locales/pt-BR.json +++ b/packages/lib/src/language/locales/pt-BR.json @@ -76,6 +76,8 @@ "houseNumberOrName": "Número da casa", "separateDeliveryAddress": "Especificar um endereço de entrega separado", "deliveryAddress": "Endereço de entrega", + "deliveryAddress.firstName": "Nome do destinatário", + "deliveryAddress.lastName": "Sobrenome do destinatário", "zipCode": "Código postal", "apartmentSuite": "Apartamento/Conjunto", "provinceOrTerritory": "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 index 25b697b93c..bd372194aa 100644 --- a/packages/lib/src/language/locales/pt-PT.json +++ b/packages/lib/src/language/locales/pt-PT.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Número de porta", "separateDeliveryAddress": "Especifique uma morada de entrega separada", "deliveryAddress": "Morada de entrega", + "deliveryAddress.firstName": "Nome próprio do destinatário", + "deliveryAddress.lastName": "Apelido do destinatário", "zipCode": "Código postal", "apartmentSuite": "Apartamento/Suite", "provinceOrTerritory": "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 index e654a94b01..d19a09f1cd 100644 --- a/packages/lib/src/language/locales/ro-RO.json +++ b/packages/lib/src/language/locales/ro-RO.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Număr", "separateDeliveryAddress": "Specificați o adresă de livrare separată", "deliveryAddress": "Adresă de livrare", + "deliveryAddress.firstName": "Prenumele destinatarului", + "deliveryAddress.lastName": "Numele de familie al destinatarului", "zipCode": "Cod poștal", "apartmentSuite": "Apartament", "provinceOrTerritory": "Provincie sau teritoriu", diff --git a/packages/lib/src/language/locales/ru-RU.json b/packages/lib/src/language/locales/ru-RU.json index 89e2262233..9337b85091 100644 --- a/packages/lib/src/language/locales/ru-RU.json +++ b/packages/lib/src/language/locales/ru-RU.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Номер дома", "separateDeliveryAddress": "Укажите отдельный адрес доставки", "deliveryAddress": "Адрес доставки", + "deliveryAddress.firstName": "Имя получателя", + "deliveryAddress.lastName": "Фамилия получателя", "zipCode": "Почтовый индекс", "apartmentSuite": "Квартира / помещение", "provinceOrTerritory": "Провинция или территория", diff --git a/packages/lib/src/language/locales/sk-SK.json b/packages/lib/src/language/locales/sk-SK.json index 539d685dd5..18042855ff 100644 --- a/packages/lib/src/language/locales/sk-SK.json +++ b/packages/lib/src/language/locales/sk-SK.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Číslo domu", "separateDeliveryAddress": "Zadajte samostatnú dodaciu adresu", "deliveryAddress": "Dodacia adresa", + "deliveryAddress.firstName": "Krstné meno príjemcu", + "deliveryAddress.lastName": "Priezvisko príjemcu", "zipCode": "PSČ", "apartmentSuite": "Byt/apartmán", "provinceOrTerritory": "Okres alebo územie", diff --git a/packages/lib/src/language/locales/sl-SI.json b/packages/lib/src/language/locales/sl-SI.json index 80e96ca75c..c71699ab2c 100644 --- a/packages/lib/src/language/locales/sl-SI.json +++ b/packages/lib/src/language/locales/sl-SI.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Hišna številka", "separateDeliveryAddress": "Navedite ločen naslov za dostavo", "deliveryAddress": "Naslov za dostavo", + "deliveryAddress.firstName": "Ime prejemnika", + "deliveryAddress.lastName": "Priimek prejemnika", "zipCode": "Poštna številka", "apartmentSuite": "Št. apartmaja/stanovanja", "provinceOrTerritory": "Območje ali ozemlje", diff --git a/packages/lib/src/language/locales/sv-SE.json b/packages/lib/src/language/locales/sv-SE.json index 4d93807366..cf4788a86d 100644 --- a/packages/lib/src/language/locales/sv-SE.json +++ b/packages/lib/src/language/locales/sv-SE.json @@ -78,6 +78,8 @@ "houseNumberOrName": "Husnummer", "separateDeliveryAddress": "Ange en separat leveransadress", "deliveryAddress": "Leveransadress", + "deliveryAddress.firstName": "Mottagarens förnamn", + "deliveryAddress.lastName": "Mottagarens efternamn", "zipCode": "Postnummer", "apartmentSuite": "Lägenhetsnummer", "provinceOrTerritory": "Provins eller territorium", diff --git a/packages/lib/src/language/locales/zh-CN.json b/packages/lib/src/language/locales/zh-CN.json index b7df1bf2f5..074f4c0c56 100644 --- a/packages/lib/src/language/locales/zh-CN.json +++ b/packages/lib/src/language/locales/zh-CN.json @@ -78,6 +78,8 @@ "houseNumberOrName": "门牌号", "separateDeliveryAddress": "指定一个单独的寄送地址", "deliveryAddress": "寄送地址", + "deliveryAddress.firstName": "收件人名字", + "deliveryAddress.lastName": "收件人姓氏", "zipCode": "邮政编码", "apartmentSuite": "公寓 / 套房", "provinceOrTerritory": "省或地区", diff --git a/packages/lib/src/language/locales/zh-TW.json b/packages/lib/src/language/locales/zh-TW.json index 5c8dcf50b0..8c830e13fa 100644 --- a/packages/lib/src/language/locales/zh-TW.json +++ b/packages/lib/src/language/locales/zh-TW.json @@ -78,6 +78,8 @@ "houseNumberOrName": "門牌號", "separateDeliveryAddress": "指定另一個派送地址", "deliveryAddress": "派送地址", + "deliveryAddress.firstName": "收件者名字", + "deliveryAddress.lastName": "收件者姓氏", "zipCode": "郵遞區號", "apartmentSuite": "公寓／套房", "provinceOrTerritory": "省或地區", From 3fb47741f1a53f0d1e5b2593a130e948c12c7ae3 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 29 Jan 2024 15:48:30 +0100 Subject: [PATCH 04/11] refactor: clean up --- packages/lib/src/components/internal/Address/Address.tsx | 1 - packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/lib/src/components/internal/Address/Address.tsx b/packages/lib/src/components/internal/Address/Address.tsx index 8cc647ae3b..94d58adb28 100644 --- a/packages/lib/src/components/internal/Address/Address.tsx +++ b/packages/lib/src/components/internal/Address/Address.tsx @@ -167,7 +167,6 @@ export default function Address(props: AddressProps) { ); const addressSchema = specifications.getAddressSchemaForCountry(data.country); - console.log({ addressSchema }); return (
diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx index 1d3f5419c5..4acb4c21e4 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx +++ b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx @@ -234,7 +234,6 @@ export default function OpenInvoice(props: OpenInvoiceProps) { setValid(prevValid => ({ ...prevValid, consentCheckbox: checked })); setErrors(prevErrors => ({ ...prevErrors, consentCheckbox: !checked })); }; - return (
{props.showFormInstruction && } From 697a0ad069e74a398a3adc9c1288d7737fe83cf9 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 29 Jan 2024 17:53:12 +0100 Subject: [PATCH 05/11] refactor: add more tests --- packages/lib/src/components/Riverty/Riverty.test.tsx | 9 +++++++++ packages/lib/src/components/internal/Address/Address.tsx | 4 +++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/components/Riverty/Riverty.test.tsx b/packages/lib/src/components/Riverty/Riverty.test.tsx index ba8ccad7fc..8bcac589cb 100644 --- a/packages/lib/src/components/Riverty/Riverty.test.tsx +++ b/packages/lib/src/components/Riverty/Riverty.test.tsx @@ -5,6 +5,7 @@ import { Resources } from '../../core/Context/Resources'; import { SRPanel } from '../../core/Errors/SRPanel'; import Language from '../../language'; import getDataset from '../../core/Services/get-dataset'; +import { termsAndConditionsUrlMap } from './config'; jest.mock('../../core/Services/get-dataset'); const countriesMock = [ @@ -78,4 +79,12 @@ describe('Riverty', () => { expect(city.length).toBe(2); }); }); + + describe('delivery address', () => { + test('should show required fields', async () => { + render(new Riverty(props).render()); + const tcLink = await screen.findByRole('link', { name: 'payment conditions' }); + expect(tcLink).toHaveAttribute('href', termsAndConditionsUrlMap[props.countryCode.toLowerCase()].en); + }); + }); }); diff --git a/packages/lib/src/components/internal/Address/Address.tsx b/packages/lib/src/components/internal/Address/Address.tsx index 94d58adb28..ea23d1861d 100644 --- a/packages/lib/src/components/internal/Address/Address.tsx +++ b/packages/lib/src/components/internal/Address/Address.tsx @@ -51,7 +51,8 @@ export default function Address(props: AddressProps) { const setSearchData = useCallback( (selectedAddress: AddressData) => { - ADDRESS_SCHEMA.forEach(propKey => { + const propsKeysToProcess = ADDRESS_SCHEMA; + propsKeysToProcess.forEach(propKey => { // Make sure the data provided by the merchant is always strings const providedValue = selectedAddress[propKey]; if (providedValue === null || providedValue === undefined) return; @@ -167,6 +168,7 @@ export default function Address(props: AddressProps) { ); const addressSchema = specifications.getAddressSchemaForCountry(data.country); + return (
From aa1f60ba050b25a66e23662edf48330cf382d210 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Tue, 30 Jan 2024 14:31:40 +0100 Subject: [PATCH 06/11] refactor: added more tests --- .../src/components/Riverty/Riverty.test.tsx | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/lib/src/components/Riverty/Riverty.test.tsx b/packages/lib/src/components/Riverty/Riverty.test.tsx index 8bcac589cb..c73dba2209 100644 --- a/packages/lib/src/components/Riverty/Riverty.test.tsx +++ b/packages/lib/src/components/Riverty/Riverty.test.tsx @@ -6,6 +6,7 @@ import { SRPanel } from '../../core/Errors/SRPanel'; import Language from '../../language'; import getDataset from '../../core/Services/get-dataset'; import { termsAndConditionsUrlMap } from './config'; +import { OpenInvoiceContainerProps } from '../helpers/OpenInvoiceContainer/OpenInvoiceContainer'; jest.mock('../../core/Services/get-dataset'); const countriesMock = [ @@ -18,7 +19,7 @@ const countriesMock = [ (getDataset as jest.Mock).mockImplementation(jest.fn(() => Promise.resolve(countriesMock))); describe('Riverty', () => { - const props = { + const props: OpenInvoiceContainerProps = { i18n: new Language(), loadingContext: 'test', countryCode: 'DE', @@ -78,10 +79,34 @@ describe('Riverty', () => { expect(postalCode.length).toBe(2); expect(city.length).toBe(2); }); + + test('should show the correct read-only fields', async () => { + const withReadOnlyDeliveryAddressData: OpenInvoiceContainerProps = { + ...props, + visibility: { + deliveryAddress: 'readOnly' + }, + data: { + deliveryAddress: { + firstName: 'dummy first name', + lastName: 'dummy last name', + street: 'dummy street', + houseNumberOrName: 'dummy houseNumberOrName', + city: 'dummy city' + } + } + }; + + render(new Riverty(withReadOnlyDeliveryAddressData).render()); + for (const value of Object.values(withReadOnlyDeliveryAddressData.data.deliveryAddress)) { + const element = await screen.findByText(new RegExp(value), { exact: false }); + expect(element).toBeInTheDocument(); + } + }); }); - describe('delivery address', () => { - test('should show required fields', async () => { + describe('terms and conditions', () => { + test('should show the correct t&c urls', async () => { render(new Riverty(props).render()); const tcLink = await screen.findByRole('link', { name: 'payment conditions' }); expect(tcLink).toHaveAttribute('href', termsAndConditionsUrlMap[props.countryCode.toLowerCase()].en); From b88bd73c19dad2ce92c9c7fbdcca12f71d71560d Mon Sep 17 00:00:00 2001 From: Yu Long Date: Tue, 30 Jan 2024 14:54:46 +0100 Subject: [PATCH 07/11] refactor: fix some code smells --- .../src/components/Riverty/Riverty.test.tsx | 9 +++++---- .../lib/src/components/Riverty/Riverty.tsx | 2 +- packages/lib/src/components/Riverty/config.ts | 3 ++- .../Address/components/ReadOnlyAddress.tsx | 20 ++++++++++--------- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/lib/src/components/Riverty/Riverty.test.tsx b/packages/lib/src/components/Riverty/Riverty.test.tsx index c73dba2209..ac60f94fb0 100644 --- a/packages/lib/src/components/Riverty/Riverty.test.tsx +++ b/packages/lib/src/components/Riverty/Riverty.test.tsx @@ -38,16 +38,17 @@ describe('Riverty', () => { const dateOfBirth = await screen.findByLabelText('Date of birth', { selector: 'input' }); const email = await screen.findByLabelText('Email address', { selector: 'input' }); const telephone = await screen.findByLabelText('Telephone number', { selector: 'input' }); - const male = screen.queryByLabelText('Male'); - const female = screen.queryByLabelText('Female'); + //const male = screen.queryByLabelText('Male'); + //const female = screen.queryByLabelText('Female'); expect(firstName).not.toBeNull(); expect(lastName).not.toBeNull(); expect(dateOfBirth).not.toBeNull(); expect(email).not.toBeNull(); expect(telephone).not.toBeNull(); - expect(male).toBeNull(); - expect(female).toBeNull(); + //todo: add the test back after the playground testing + //expect(male).toBeNull(); + //expect(female).toBeNull(); }); }); diff --git a/packages/lib/src/components/Riverty/Riverty.tsx b/packages/lib/src/components/Riverty/Riverty.tsx index bd5f9b5f8a..5923c104d5 100644 --- a/packages/lib/src/components/Riverty/Riverty.tsx +++ b/packages/lib/src/components/Riverty/Riverty.tsx @@ -5,7 +5,7 @@ import ConsentCheckboxLabel from '../internal/ConsentCheckboxLabel'; import { getConsentUrl } from '../../utils/getConsentUrl'; export default class Riverty extends OpenInvoiceContainer { - public static type = 'riverty'; + public static readonly type = 'riverty'; protected static defaultProps = { personalDetailsRequiredFields, diff --git a/packages/lib/src/components/Riverty/config.ts b/packages/lib/src/components/Riverty/config.ts index cf41d8733f..32fa9a94fa 100644 --- a/packages/lib/src/components/Riverty/config.ts +++ b/packages/lib/src/components/Riverty/config.ts @@ -2,7 +2,8 @@ import { CITY, COUNTRY, FIRST_NAME, HOUSE_NUMBER_OR_NAME, LAST_NAME, POSTAL_CODE import { AddressSpecifications } from '../internal/Address/types'; export const allowedCountries = ['AT', 'CH', 'DE']; -export const personalDetailsRequiredFields = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber']; +// todo: remove the gender after the playground testing +export const personalDetailsRequiredFields = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber', 'gender']; export const deliveryAddressSpecification: AddressSpecifications = { default: { labels: { diff --git a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx index 6349bdbddf..e41784b722 100644 --- a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx +++ b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx @@ -3,18 +3,20 @@ import Fieldset from '../../FormFields/Fieldset'; import { ReadOnlyAddressProps } from '../types'; import { FALLBACK_VALUE } from '../constants'; +const FullName = ({ firstName, lastName }) => { + return ( + + {firstName && `${firstName} `} + {lastName && `${lastName}`} +
+ + ); +}; + const ReadOnlyAddress = ({ data, label }: ReadOnlyAddressProps) => { const { street, houseNumberOrName, city, postalCode, stateOrProvince, country, firstName, lastName } = data; const hasName = firstName || lastName; - const FullName = ({ firstName, lastName }) => { - return ( - - {firstName && `${firstName} `} - {lastName && `${lastName}`} -
- - ); - }; + return (
{hasName && } From c960ffbaf0311894b2a9d5b731ee8fb7411a78de Mon Sep 17 00:00:00 2001 From: Yu Long Date: Fri, 9 Feb 2024 15:25:33 +0100 Subject: [PATCH 08/11] refactor: remove the gender field --- packages/lib/src/components/Riverty/Riverty.test.tsx | 9 ++++----- packages/lib/src/components/Riverty/config.ts | 3 +-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/lib/src/components/Riverty/Riverty.test.tsx b/packages/lib/src/components/Riverty/Riverty.test.tsx index ac60f94fb0..c73dba2209 100644 --- a/packages/lib/src/components/Riverty/Riverty.test.tsx +++ b/packages/lib/src/components/Riverty/Riverty.test.tsx @@ -38,17 +38,16 @@ describe('Riverty', () => { const dateOfBirth = await screen.findByLabelText('Date of birth', { selector: 'input' }); const email = await screen.findByLabelText('Email address', { selector: 'input' }); const telephone = await screen.findByLabelText('Telephone number', { selector: 'input' }); - //const male = screen.queryByLabelText('Male'); - //const female = screen.queryByLabelText('Female'); + const male = screen.queryByLabelText('Male'); + const female = screen.queryByLabelText('Female'); expect(firstName).not.toBeNull(); expect(lastName).not.toBeNull(); expect(dateOfBirth).not.toBeNull(); expect(email).not.toBeNull(); expect(telephone).not.toBeNull(); - //todo: add the test back after the playground testing - //expect(male).toBeNull(); - //expect(female).toBeNull(); + expect(male).toBeNull(); + expect(female).toBeNull(); }); }); diff --git a/packages/lib/src/components/Riverty/config.ts b/packages/lib/src/components/Riverty/config.ts index 32fa9a94fa..cf41d8733f 100644 --- a/packages/lib/src/components/Riverty/config.ts +++ b/packages/lib/src/components/Riverty/config.ts @@ -2,8 +2,7 @@ import { CITY, COUNTRY, FIRST_NAME, HOUSE_NUMBER_OR_NAME, LAST_NAME, POSTAL_CODE import { AddressSpecifications } from '../internal/Address/types'; export const allowedCountries = ['AT', 'CH', 'DE']; -// todo: remove the gender after the playground testing -export const personalDetailsRequiredFields = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber', 'gender']; +export const personalDetailsRequiredFields = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber']; export const deliveryAddressSpecification: AddressSpecifications = { default: { labels: { From 46a2cd1df93920d36fa944f581fc97e190c106d3 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Fri, 9 Feb 2024 15:46:06 +0100 Subject: [PATCH 09/11] chore: add changeset --- .changeset/healthy-bulldogs-smash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/healthy-bulldogs-smash.md diff --git a/.changeset/healthy-bulldogs-smash.md b/.changeset/healthy-bulldogs-smash.md new file mode 100644 index 0000000000..442f30891f --- /dev/null +++ b/.changeset/healthy-bulldogs-smash.md @@ -0,0 +1,5 @@ +--- +"@adyen/adyen-web": minor +--- + +Add the support for new Riverty component. It will replace the old AfterPay component in the future, currently only supports AT, CH and DE countries. From 8808ed3fd57d8578d40c245da771dade39edcca4 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 12 Feb 2024 17:49:01 +0100 Subject: [PATCH 10/11] refactor: allow different countries for delivery and billing address --- packages/lib/src/components/Riverty/Riverty.tsx | 4 ++-- .../lib/src/components/internal/OpenInvoice/OpenInvoice.tsx | 4 ++-- packages/lib/src/components/internal/OpenInvoice/types.ts | 6 ++++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/components/Riverty/Riverty.tsx b/packages/lib/src/components/Riverty/Riverty.tsx index 5923c104d5..39872aca9b 100644 --- a/packages/lib/src/components/Riverty/Riverty.tsx +++ b/packages/lib/src/components/Riverty/Riverty.tsx @@ -9,7 +9,6 @@ export default class Riverty extends OpenInvoiceContainer { protected static defaultProps = { personalDetailsRequiredFields, - allowedCountries, deliveryAddressSpecification, ...OpenInvoiceContainer.defaultProps }; @@ -17,7 +16,8 @@ export default class Riverty extends OpenInvoiceContainer { formatProps(props) { return { ...super.formatProps(props), - allowedCountries: props.countryCode ? [props.countryCode] : allowedCountries, + billingAddressSpecification: { ...props.billingAddressSpecification, allowedCountries }, + deliveryAddressSpecification: { ...props.deliveryAddressSpecification, allowedCountries: [] }, // Allow all the countries consentCheckboxLabel: }; } diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx index 4acb4c21e4..3320a564c8 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx +++ b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx @@ -270,7 +270,7 @@ export default function OpenInvoice(props: OpenInvoiceProps) { {activeFieldsets.billingAddress && (
void; showFormInstruction?: boolean; } From 34a891faa3328113e22617bb45ae6de9bed879e9 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Thu, 15 Feb 2024 17:06:34 +0100 Subject: [PATCH 11/11] refactor: refine allowedDeliveryCountries --- .../lib/src/components/Riverty/Riverty.tsx | 18 ++++++++++++++---- packages/lib/src/components/Riverty/config.ts | 3 ++- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/components/Riverty/Riverty.tsx b/packages/lib/src/components/Riverty/Riverty.tsx index 39872aca9b..f0ffcb0472 100644 --- a/packages/lib/src/components/Riverty/Riverty.tsx +++ b/packages/lib/src/components/Riverty/Riverty.tsx @@ -1,8 +1,15 @@ import { h } from 'preact'; import OpenInvoiceContainer from '../helpers/OpenInvoiceContainer'; -import { allowedCountries, deliveryAddressSpecification, personalDetailsRequiredFields, termsAndConditionsUrlMap } from './config'; +import { + allowedBillingCountries, + allowedDeliveryCountries, + deliveryAddressSpecification, + personalDetailsRequiredFields, + termsAndConditionsUrlMap +} from './config'; import ConsentCheckboxLabel from '../internal/ConsentCheckboxLabel'; import { getConsentUrl } from '../../utils/getConsentUrl'; +import { OpenInvoiceContainerProps } from '../helpers/OpenInvoiceContainer/OpenInvoiceContainer'; export default class Riverty extends OpenInvoiceContainer { public static readonly type = 'riverty'; @@ -13,11 +20,14 @@ export default class Riverty extends OpenInvoiceContainer { ...OpenInvoiceContainer.defaultProps }; - formatProps(props) { + formatProps(props: OpenInvoiceContainerProps) { return { ...super.formatProps(props), - billingAddressSpecification: { ...props.billingAddressSpecification, allowedCountries }, - deliveryAddressSpecification: { ...props.deliveryAddressSpecification, allowedCountries: [] }, // Allow all the countries + billingAddressSpecification: { + ...props.billingAddressSpecification, + allowedCountries: props.countryCode ? [props.countryCode] : allowedBillingCountries + }, + deliveryAddressSpecification: { ...props.deliveryAddressSpecification, allowedCountries: allowedDeliveryCountries }, consentCheckboxLabel: }; } diff --git a/packages/lib/src/components/Riverty/config.ts b/packages/lib/src/components/Riverty/config.ts index cf41d8733f..2bf104f4dd 100644 --- a/packages/lib/src/components/Riverty/config.ts +++ b/packages/lib/src/components/Riverty/config.ts @@ -1,7 +1,8 @@ import { CITY, COUNTRY, FIRST_NAME, HOUSE_NUMBER_OR_NAME, LAST_NAME, POSTAL_CODE, STREET } from '../internal/Address/constants'; import { AddressSpecifications } from '../internal/Address/types'; -export const allowedCountries = ['AT', 'CH', 'DE']; +export const allowedBillingCountries = ['AT', 'CH', 'DE']; +export const allowedDeliveryCountries = ['NO', 'SE', 'FI', 'DK', 'DE', 'AT', 'CH', 'NL', 'BE']; export const personalDetailsRequiredFields = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber']; export const deliveryAddressSpecification: AddressSpecifications = { default: {