Merge branch 'main' into feature/using_checkoutanalytics

README.md

@@ -1,4 +1,4 @@
-![npm](https://img.shields.io/npm/v/@adyen/adyen-web.svg)
+[![npm](https://img.shields.io/npm/v/@adyen/adyen-web.svg)](https://www.npmjs.com/package/@adyen/adyen-web)
 
 ![Web](https://user-images.githubusercontent.com/7724351/198588741-f522c3ed-ff3c-4f70-b8cb-8ff9e6d41cfa.png)
 

packages/e2e-playwright/package.json

@@ -26,6 +26,6 @@
     "webpack-dev-server": "4.15.1"
   },
   "dependencies": {
-    "@adyen/adyen-web": "5.56.1"
+    "@adyen/adyen-web": "5.57.0"
   }
 }

packages/e2e/package.json

@@ -41,6 +41,6 @@
         "whatwg-fetch": "^3.6.2"
     },
     "dependencies": {
-        "@adyen/adyen-web": "5.56.1"
+        "@adyen/adyen-web": "5.57.0"
     }
 }

packages/lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @adyen/adyen-web
 
+## 5.57.0
+
+### Minor Changes
+
+-   Use the label provided by the backend in stored blik payments ([#2522](https://github.com/Adyen/adyen-web/pull/2522))
+
 ## 5.56.1
 
 ### Patch Changes

packages/lib/package.json

@@ -25,7 +25,7 @@
         "./dist/es/adyen.css": "./dist/es/adyen.css",
         "./package.json": "./package.json"
     },
-    "version": "5.56.1",
+    "version": "5.57.0",
     "license": "MIT",
     "homepage": "https://docs.adyen.com/checkout",
     "repository": "github:Adyen/adyen-web",
@@ -117,7 +117,7 @@
         "stylelint-config-standard-scss": "7.0.1",
         "tslib": "2.6.2",
         "typescript": "4.9.5",
-        "vite": "4.5.1",
+        "vite": "4.5.2",
         "vite-plugin-stylelint": "^4.3.0",
         "whatwg-fetch": "^3.6.2"
     },

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();
+        });
+    });
+});

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

packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx

@@ -13,14 +13,16 @@ const PaymentMethodName = ({ displayName, additionalInfo, isSelected }) => (
             {displayName}
         </span>
 
-        <span
-            className={classNames({
-                'adyen-checkout__payment-method__additional-info': true,
-                'adyen-checkout__payment-method__additional-info--selected': isSelected
-            })}
-        >
-            {additionalInfo}
-        </span>
+        {additionalInfo && (
+            <span
+                className={classNames({
+                    'adyen-checkout__payment-method__additional-info': true,
+                    'adyen-checkout__payment-method__additional-info--selected': isSelected
+                })}
+            >
+                {additionalInfo}
+            </span>
+        )}
     </span>
 );
 

packages/lib/src/components/Giftcard/Giftcard.test.tsx

@@ -1,8 +1,24 @@
 import Giftcard from './Giftcard';
+import { render, screen } from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+
 const flushPromises = () => new Promise(process.nextTick);
 
 describe('Giftcard', () => {
-    const baseProps = { amount: { value: 1000, currency: 'EUR' }, name: 'My Test Gift Card', type: 'giftcard', brand: 'genericgiftcard' };
+    const resources = global.resources;
+    const i18n = global.i18n;
+    const user = userEvent.setup();
+
+    const baseProps = {
+        modules: { resources },
+        amount: { value: 1000, currency: 'EUR' },
+        name: 'My Test Gift Card',
+        type: 'giftcard',
+        brand: 'genericgiftcard',
+        showPayButton: true,
+        i18n,
+        loadingContext: 'mock'
+    };
 
     describe('onBalanceCheck', () => {
         test('If onBalanceCheck is not provided, step is skipped and calls onSubmit', async () => {
@@ -24,4 +40,206 @@ describe('Giftcard', () => {
             expect(onBalanceCheck).not.toHaveBeenCalled();
         });
     });
+
+    describe('icon getters', () => {
+        test('should default to loading from resources', async () => {
+            const giftcard = new Giftcard({ ...baseProps });
+
+            expect(giftcard.icon).toBe('MOCK');
+        });
+
+        test('should use the prop .icon as 2. priority', async () => {
+            const giftcard = new Giftcard({ ...baseProps, icon: 'PROP_ICON_MOCK' });
+
+            expect(giftcard.icon).toBe('PROP_ICON_MOCK');
+        });
+
+        test('should use brandsConfiguration as 1. priority', async () => {
+            const giftcard = new Giftcard({
+                ...baseProps,
+                icon: 'PROP_ICON_MOCK',
+                brandsConfiguration: {
+                    genericgiftcard: { icon: 'genericgiftcard_MOCK' },
+                    givex: { icon: 'givex_MOCK' }
+                }
+            });
+
+            expect(giftcard.icon).toBe('genericgiftcard_MOCK');
+            expect(giftcard.icon).not.toBe('PROP_ICON_MOCK');
+        });
+    });
+
+    describe('displayName getters', () => {
+        test('should default to props.name', async () => {
+            const giftcard = new Giftcard({ ...baseProps });
+
+            expect(giftcard.displayName).toBe('My Test Gift Card');
+        });
+
+        test('should use brandsConfiguration as 1. priority', async () => {
+            const giftcard = new Giftcard({
+                ...baseProps,
+                brandsConfiguration: {
+                    genericgiftcard: { name: 'genericgiftcard brand name' },
+                    givex: { name: 'givex brand name' }
+                }
+            });
+
+            expect(giftcard.displayName).toBe('genericgiftcard brand name');
+            expect(giftcard.displayName).not.toBe('givex brand name');
+        });
+    });
+
+    describe('onBalanceCheck handling', () => {
+        test('onBalanceCheck should be called on pay button click', async () => {
+            const onBalanceCheck = jest.fn();
+
+            // mounting and clicking pay button
+            const giftcard = new Giftcard({
+                ...baseProps,
+                onBalanceCheck
+            });
+            render(giftcard.render());
+            // skip feeling in fields
+            giftcard.setState({ isValid: true });
+            const payButton = await screen.findByRole('button');
+            await user.click(payButton);
+
+            expect(onBalanceCheck).toHaveBeenCalled();
+        });
+
+        test('after balance check we should call onOrderRequest if not enough balance for checkout', async () => {
+            const onBalanceCheck = jest.fn(resolve =>
+                resolve({
+                    balance: { value: 500, currency: 'EUR' }
+                })
+            );
+            const onOrderRequest = jest.fn();
+
+            // mounting and clicking pay button
+            const giftcard = new Giftcard({
+                ...baseProps,
+                onBalanceCheck,
+                onOrderRequest
+            });
+            render(giftcard.render());
+            giftcard.setState({ isValid: true });
+            const payButton = await screen.findByRole('button');
+            await user.click(payButton);
+
+            // since the balance is not enough for a full we should create an order
+            expect(onOrderRequest).toHaveBeenCalled();
+        });
+
+        test('if there is enough balance for checkout we should require confirmation', async () => {
+            const onBalanceCheck = jest.fn(resolve =>
+                resolve({
+                    balance: { value: 2000, currency: 'EUR' }
+                })
+            );
+            const onRequiringConfirmation = jest.fn();
+
+            // mounting and clicking pay button
+            const giftcard = new Giftcard({
+                ...baseProps,
+                onBalanceCheck,
+                onRequiringConfirmation
+            });
+            render(giftcard.render());
+            giftcard.setState({ isValid: true });
+            const payButton = await screen.findByRole('button');
+            await user.click(payButton);
+
+            // since there is enough balance we should inform merchant
+            // to confirm using the giftcard funds
+            expect(onRequiringConfirmation).toHaveBeenCalled();
+        });
+
+        test('if theres 0 balance we should trigger and error', async () => {
+            const onBalanceCheck = jest.fn(resolve =>
+                resolve({
+                    balance: { value: 0, currency: 'EUR' }
+                })
+            );
+
+            // mounting and clicking pay button
+            const onError = jest.fn();
+            const giftcard = new Giftcard({
+                ...baseProps,
+                onBalanceCheck,
+                onError
+            });
+            render(giftcard.render());
+            giftcard.setState({ isValid: true });
+            const payButton = await screen.findByRole('button');
+            await user.click(payButton);
+
+            expect(onBalanceCheck).toHaveBeenCalled();
+            expect(onError).toHaveBeenCalled();
+        });
+    });
+
+    describe('onOrderRequest handling', () => {
+        test('after creating an order we should call submit / payments endpoint', async () => {
+            const onBalanceCheck = jest.fn(resolve =>
+                resolve({
+                    balance: { value: 500, currency: 'EUR' }
+                })
+            );
+            const onOrderRequest = jest.fn(resolve =>
+                resolve({
+                    orderData: 'mock',
+                    pspReference: 'mock'
+                })
+            );
+            const onSubmit = jest.fn();
+
+            // mounting and clicking pay button
+            const giftcard = new Giftcard({
+                ...baseProps,
+                onBalanceCheck,
+                onOrderRequest,
+                onSubmit
+            });
+            render(giftcard.render());
+            giftcard.setState({ isValid: true });
+            const payButton = await screen.findByRole('button');
+            await user.click(payButton);
+
+            expect(onSubmit).toHaveBeenCalled();
+        });
+
+        test('should not create new order if one already exists', async () => {
+            const onBalanceCheck = jest.fn(resolve =>
+                resolve({
+                    balance: { value: 500, currency: 'EUR' }
+                })
+            );
+            const onOrderRequest = jest.fn(resolve =>
+                resolve({
+                    orderData: 'mock',
+                    pspReference: 'mock'
+                })
+            );
+            const onSubmit = jest.fn();
+
+            // mounting and clicking pay button
+            const giftcard = new Giftcard({
+                ...baseProps,
+                order: {
+                    orderData: 'mock'
+                },
+                onBalanceCheck,
+                onOrderRequest,
+                onSubmit
+            });
+            render(giftcard.render());
+            giftcard.setState({ isValid: true });
+            const payButton = await screen.findByRole('button');
+            await user.click(payButton);
+
+            expect(onOrderRequest).not.toHaveBeenCalled();
+            expect(onSubmit).toHaveBeenCalled();
+        });
+    });
 });