Klarna B2B - Fixing logo on Drop-in (#2458)

* fix: getting icon using type() function instead of constructor type

* feat: changeset + removed duplicated methods

* fix: removed only frag on unit test

.changeset/khaki-fireants-scream.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Fixed Klarna B2B logo for Drop-in

packages/lib/src/components/Doku/Doku.tsx

@@ -27,10 +27,6 @@ export class DokuElement extends UIElement {
         };
     }
 
-    get icon() {
-        return this.resources.getImage()(this.props.type);
-    }
-
     render() {
         return (
             <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>

packages/lib/src/components/Econtext/Econtext.tsx

@@ -41,10 +41,6 @@ export class EcontextElement extends UIElement<EcontextElementProps> {
         };
     }
 
-    get icon() {
-        return this.resources.getImage()(this.props.type);
-    }
-
     render() {
         return (
             <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>

packages/lib/src/components/Redirect/Redirect.tsx

@@ -43,10 +43,6 @@ class RedirectElement extends UIElement {
         return true;
     }
 
-    get icon() {
-        return this.resources.getImage()(this.props.type);
-    }
-
     get browserInfo() {
         return collectBrowserInfo();
     }

packages/lib/src/components/SecuredFields/SecuredFields.tsx

@@ -85,10 +85,6 @@ export class SecuredFieldsElement extends UIElement {
         return !!this.state.isValid;
     }
 
-    get icon() {
-        return this.resources.getImage()(this.props.type);
-    }
-
     get browserInfo() {
         return collectBrowserInfo();
     }

packages/lib/src/components/UIElement.test.ts

@@ -2,11 +2,35 @@ import UIElement from './UIElement';
 import AdyenCheckout from '../index';
 import ThreeDS2DeviceFingerprint from './ThreeDS2/ThreeDS2DeviceFingerprint';
 import ThreeDS2Challenge from './ThreeDS2/ThreeDS2Challenge';
+import { mock } from 'jest-mock-extended';
+import { Resources } from '../core/Context/Resources';
 
 const submitMock = jest.fn();
 (global as any).HTMLFormElement.prototype.submit = () => submitMock;
 
 describe('UIElement', () => {
+    describe('icon()', () => {
+        test('should generate the icon URL by getting the tx variant from type() getter', () => {
+            const resources = mock<Resources>();
+            resources.getImage.mockReturnValue((icon: string) => `https://checkout-adyen.com/${icon}`);
+
+            const txVariant = 'klarna_b2b';
+
+            const uiElement = new UIElement({
+                type: txVariant,
+                modules: {
+                    resources
+                }
+            });
+
+            const typeSpy = jest.spyOn(uiElement, 'type', 'get');
+            const iconUrl = uiElement.icon;
+
+            expect(typeSpy).toHaveBeenCalledTimes(1);
+            expect(iconUrl).toBe(`https://checkout-adyen.com/${txVariant}`);
+        });
+    });
+
     describe('onComplete', () => {
         test('calls the passed onComplete function', () => {
             const onComplete = jest.fn();

packages/lib/src/components/UIElement.tsx

@@ -239,7 +239,7 @@ export class UIElement<P extends UIElementProps = any> extends BaseElement<P> im
      * Get the element icon URL for the current environment
      */
     get icon(): string {
-        return this.props.icon ?? this.resources.getImage()(this.constructor['type']);
+        return this.props.icon ?? this.resources.getImage()(this.type);
     }
 
     /**