Klarna fix - Handling SDK action as standalone component (#3064)

* handling action for klarna standalone component

* testing that updateWithAction is called

* improved tests

.changeset/fresh-terms-love.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Klarna - Fix issue where Klarna as standalone component didn't initialize the Klarna Widget SDK accordingly

packages/lib/src/components/Klarna/KlarnaPayments.test.tsx

@@ -1,9 +1,15 @@
 import { render, screen, waitFor } from '@testing-library/preact';
 import KlarnaPayments from './KlarnaPayments';
 import Dropin from '../Dropin';
+import { PaymentAction } from '../../types/global-types';
 
 describe('KlarnaPayments', () => {
-    const coreProps = { name: 'Klarna', i18n: global.i18n, loadingContext: 'test', modules: { resources: global.resources } };
+    const coreProps = {
+        name: 'Klarna',
+        i18n: global.i18n,
+        loadingContext: 'test',
+        modules: { resources: global.resources, analytics: global.analytics }
+    };
     const renderKlarna = props => {
         const KlarnaPaymentsEle = new KlarnaPayments(global.core, {
             ...coreProps,
@@ -53,4 +59,64 @@ describe('KlarnaPayments', () => {
 
         expect(onAdditionalDetailsMock).toHaveBeenCalled();
     });
+
+    describe('when handling action', () => {
+        test('should use updateWithAction when action type is "sdk"', async () => {
+            const widgetAction: PaymentAction = {
+                paymentData: 'Ab02b4c0!...',
+                paymentMethodType: 'klarna_paynow',
+                type: 'sdk',
+                sdkData: {
+                    client_token: 'eyJhbGciOiJ...',
+                    payment_method_category: 'pay_over_time'
+                }
+            };
+
+            const klarna = new KlarnaPayments(global.core, {
+                ...coreProps,
+                type: 'klarna_paynow',
+                onSubmit(state, component, actions) {
+                    actions.resolve({
+                        resultCode: 'Pending',
+                        action: widgetAction
+                    });
+                }
+            });
+            const spy = jest.spyOn(klarna, 'updateWithAction');
+
+            render(klarna.render());
+            klarna.submit();
+
+            await waitFor(() => expect(spy).toHaveBeenCalledWith(widgetAction), { interval: 100 });
+        });
+
+        test('should NOT use updateWithAction when action type is NOT "sdk"', done => {
+            const action: PaymentAction = {
+                paymentMethodType: 'klarna_paynow',
+                type: 'redirect',
+                url: 'https://checkoutshopper-test.adyen.com/checkoutshopper/checkoutPaymentRedirect?redirectData=X3XtfGC9%21H4s...',
+                method: 'GET'
+            };
+
+            const klarna = new KlarnaPayments(global.core, {
+                ...coreProps,
+                type: 'klarna_paynow',
+                onSubmit(state, component, actions) {
+                    actions.resolve({
+                        resultCode: 'Pending',
+                        action
+                    });
+                }
+            });
+            const spy = jest.spyOn(klarna, 'updateWithAction');
+
+            render(klarna.render());
+            klarna.submit();
+
+            setTimeout(() => {
+                expect(spy).not.toHaveBeenCalled();
+                done();
+            }, 500);
+        });
+    });
 });

packages/lib/src/components/Klarna/KlarnaPayments.tsx

@@ -42,6 +42,14 @@ class KlarnaPayments extends UIElement<KlarnaConfiguration> {
         return <PayButton amount={this.props.amount} onClick={this.submit} {...props} />;
     };
 
+    public override handleAction(action: KlarnaAction, props = {}): UIElement | null {
+        if (action.type === 'sdk') {
+            this.updateWithAction(action);
+            return;
+        }
+        return super.handleAction(action, props);
+    }
+
     updateWithAction(action: KlarnaAction): void {
         if (action.paymentMethodType !== this.type) throw new Error('Invalid Action');
         this.componentRef.setAction(action);