diff --git a/.changeset/fuzzy-eels-relate.md b/.changeset/fuzzy-eels-relate.md new file mode 100644 index 0000000000..0802921ca0 --- /dev/null +++ b/.changeset/fuzzy-eels-relate.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': minor +--- + +Use the label provided by the backend in stored blik payments diff --git a/packages/lib/src/components/Blik/Blik.test.tsx b/packages/lib/src/components/Blik/Blik.test.tsx new file mode 100644 index 0000000000..5854234d3b --- /dev/null +++ b/packages/lib/src/components/Blik/Blik.test.tsx @@ -0,0 +1,47 @@ +import { render, screen } from '@testing-library/preact'; +import AdyenCheckout from '../../index'; + +describe('Blik', () => { + const createDropin = async paymentMethodsResponse => { + const checkout = await AdyenCheckout({ + environment: 'test', + clientKey: 'test_123456', + analytics: { enabled: false }, + paymentMethodsResponse: paymentMethodsResponse + }); + return checkout.create('dropin'); + }; + + describe('in Dropin display correct payment method name', () => { + test('display only blik if it is not stored', async () => { + const blik = await createDropin({ paymentMethods: [{ type: 'blik', name: 'Blik' }] }); + render(blik.render()); + + const blikText = await screen.findByText('Blik'); + + expect(blikText).toBeInTheDocument(); + }); + + test('display blik payment method name and label', async () => { + const blik = await createDropin({ + storedPaymentMethods: [ + { + id: 'X8CN3VMB6XXZTX43', + label: 'mBank PMM', + name: 'Blik', + supportedRecurringProcessingModels: ['CardOnFile'], + supportedShopperInteractions: ['Ecommerce'], + type: 'blik' + } + ] + }); + render(blik.render()); + + const blikText = await screen.findByText('Blik'); + const storedPaymentMethodLabel = await screen.findByText('mBank PMM'); + + expect(blikText).toBeInTheDocument(); + expect(storedPaymentMethodLabel).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/lib/src/components/Blik/Blik.tsx b/packages/lib/src/components/Blik/Blik.tsx index 6fdb003680..12ac7aac51 100644 --- a/packages/lib/src/components/Blik/Blik.tsx +++ b/packages/lib/src/components/Blik/Blik.tsx @@ -37,6 +37,20 @@ class BlikElement extends UIElement { return !!this.state.isValid; } + get displayName() { + if (this.props.storedPaymentMethodId && this.props.label) { + return this.props.label; + } + return this.props.name; + } + + get additionalInfo() { + if (this.props.storedPaymentMethodId && this.props.label) { + return this.props.name; + } + return null; + } + /** * NOTE: for future reference: * this.props.onComplete (which is called from this.onComplete) equates to the merchant defined onAdditionalDetails callback diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx index fbce97a783..3689caeda0 100644 --- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx +++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx @@ -13,14 +13,16 @@ const PaymentMethodName = ({ displayName, additionalInfo, isSelected }) => ( {displayName} - - {additionalInfo} - + {additionalInfo && ( + + {additionalInfo} + + )} ); diff --git a/packages/lib/src/components/UIElement.tsx b/packages/lib/src/components/UIElement.tsx index 79b544d90b..5887c2d5c6 100644 --- a/packages/lib/src/components/UIElement.tsx +++ b/packages/lib/src/components/UIElement.tsx @@ -250,6 +250,13 @@ export class UIElement

extends BaseElement

im return this.props.name || this.constructor['type']; } + /** + * Used to display the second line of a payment method item + */ + get additionalInfo(): string { + return null; + } + /** * Get the element accessible name, used in the aria-label of the button that controls selected payment method */