Feature: Use backend label for stored Blik (#2522)

* feat: use label for stored blik * add: changeset * fix: warning on the additional info return
Adyen · Jan 22, 2024 · 20edfbc · 20edfbc
1 parent 3f5f435
commit 20edfbc
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 8 deletions.
diff --git a/.changeset/fuzzy-eels-relate.md 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
@@ -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
@@ -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
@@ -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>
 );
 

diff --git a/packages/lib/src/components/UIElement.tsx b/packages/lib/src/components/UIElement.tsx
@@ -250,6 +250,13 @@ export class UIElement<P extends UIElementProps = any> extends BaseElement<P> 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
      */