diff --git a/.changeset/fresh-terms-love.md b/.changeset/fresh-terms-love.md new file mode 100644 index 0000000000..4849b47d10 --- /dev/null +++ b/.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 diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx index d0e48b672a..c6640400ce 100644 --- a/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx +++ b/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); + }); + }); }); diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx index 653903c6ab..22d3486cd3 100644 --- a/packages/lib/src/components/Klarna/KlarnaPayments.tsx +++ b/packages/lib/src/components/Klarna/KlarnaPayments.tsx @@ -42,6 +42,14 @@ class KlarnaPayments extends UIElement { return ; }; + 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);