fixed tests. changeset. added additionaldetails type

Adyen · Dec 6, 2024 · 4198784 · 4198784
1 parent 2066f71
commit 4198784
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 48 deletions.
diff --git a/.changeset/wet-forks-invite.md b/.changeset/wet-forks-invite.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Klarna - Fixed issue where PayLater/PayOverTime payments were not authorized accordingly depending on how the shopper interacted with the Drop-in/Component
diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx
@@ -22,40 +22,35 @@ describe('KlarnaPayments', () => {
         expect(screen.queryByRole('button', { name: 'Continue to Pay By Bank' })).toBeFalsy();
     });
 
-    test.skip('should call setStatus if elementRef is a drop-in', async () => {
-        const KlarnaPaymentsEle = new KlarnaPayments(global.core, {
-            ...coreProps,
-            ...{ paymentData: '', paymentMethodType: '', sdkData: undefined, useKlarnaWidget: false, showPayButton: false }
+    test('should call setStatus if elementRef is a drop-in', async () => {
+        const klarna = new KlarnaPayments(global.core, {
+            ...coreProps
         });
-        KlarnaPaymentsEle.elementRef = new Dropin(global.core);
-        render(KlarnaPaymentsEle.render());
-        const spy = jest.spyOn(KlarnaPaymentsEle.elementRef, 'setStatus');
-        // @ts-ignore to test
-        await waitFor(() => KlarnaPaymentsEle.componentRef);
+        klarna.elementRef = new Dropin(global.core);
+        render(klarna.render());
+
+        const spy = jest.spyOn(klarna.elementRef, 'setStatus');
+        await waitFor(() => klarna.componentRef);
+
         // @ts-ignore to test
-        KlarnaPaymentsEle.componentRef.props.onLoaded();
+        klarna.onLoaded();
+
         expect(spy).toHaveBeenCalled();
     });
 
-    test.skip('should call handleAdditionalDetails onComplete', async () => {
+    test('should call handleAdditionalDetails onComplete', async () => {
         const onAdditionalDetailsMock = jest.fn(() => {});
-
-        const KlarnaPaymentsEle = new KlarnaPayments(global.core, {
+        const klarna = new KlarnaPayments(global.core, {
             ...coreProps,
-            ...{
-                paymentData: '',
-                paymentMethodType: '',
-                sdkData: undefined,
-                useKlarnaWidget: false,
-                showPayButton: false,
-                onAdditionalDetails: onAdditionalDetailsMock
-            }
+            onAdditionalDetails: onAdditionalDetailsMock
         });
-        render(KlarnaPaymentsEle.render());
-        // @ts-ignore to test
-        await waitFor(() => KlarnaPaymentsEle.componentRef);
+
+        render(klarna.render());
+        await waitFor(() => klarna.componentRef);
+
         // @ts-ignore to test
-        KlarnaPaymentsEle.componentRef.props.onComplete();
+        klarna.onComplete();
+
         expect(onAdditionalDetailsMock).toHaveBeenCalled();
     });
 });
diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx
@@ -4,7 +4,7 @@ import { CoreProvider } from '../../core/Context/CoreProvider';
 import PayButton from '../internal/PayButton';
 import { KlarnaContainer } from './components/KlarnaContainer/KlarnaContainer';
 import { TxVariants } from '../tx-variants';
-import type { KlarnaAction, KlarnaComponentRef, KlarnaConfiguration } from './types';
+import type { KlarnaAction, KlarnaAdditionalDetailsData, KlarnaComponentRef, KlarnaConfiguration } from './types';
 import type { ICore } from '../../core/types';
 
 class KlarnaPayments extends UIElement<KlarnaConfiguration> {
@@ -47,7 +47,7 @@ class KlarnaPayments extends UIElement<KlarnaConfiguration> {
         this.componentRef.setAction(action);
     }
 
-    onLoaded() {
+    private onLoaded() {
         // When action/widget is loaded, set the 'drop-in' back to ready
         this.setElementStatus('ready');
     }
@@ -56,14 +56,18 @@ class KlarnaPayments extends UIElement<KlarnaConfiguration> {
         this.componentRef.reinitializeWidget();
     }
 
+    protected onComplete(details: KlarnaAdditionalDetailsData): void {
+        this.handleAdditionalDetails(details);
+    }
+
     render() {
         return (
             <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
                 <KlarnaContainer
                     {...this.props}
                     setComponentRef={this.setComponentRef}
                     displayName={this.displayName}
-                    onComplete={state => this.handleAdditionalDetails(state)}
+                    onComplete={this.onComplete}
                     onError={this.props.onError}
                     payButton={this.payButton}
                     onLoaded={this.onLoaded}

diff --git a/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx b/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx
@@ -3,14 +3,14 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { KlarnaWidget } from '../KlarnaWidget/KlarnaWidget';
 import type { ComponentMethodsRef, PayButtonFunctionProps, UIElementStatus } from '../../../internal/UIElement/types';
 import type { ActionHandledReturnObject } from '../../../../types/global-types';
-import type { AdyenCheckoutError, KlarnaAction, KlarnaComponentRef } from '../../../../types';
+import type { AdyenCheckoutError, KlarnaAction, KlarnaAdditionalDetailsData, KlarnaComponentRef } from '../../../../types';
 
 interface KlarnaContainerProps {
     setComponentRef: (ref: ComponentMethodsRef) => void;
     displayName: string;
     showPayButton: boolean;
     type: string;
-    onComplete(state: any): void;
+    onComplete(state: KlarnaAdditionalDetailsData): void;
     onError(error: AdyenCheckoutError): void;
     payButton(props?: PayButtonFunctionProps): h.JSX.Element;
     onLoaded(): void;

diff --git a/packages/lib/src/components/Klarna/types.ts b/packages/lib/src/components/Klarna/types.ts
@@ -1,5 +1,6 @@
 import { type ComponentMethodsRef, UIElementProps } from '../internal/UIElement/types';
 import { PaymentAction } from '../../types/global-types';
+import { AdditionalDetailsData } from '../../core/types';
 
 declare global {
     interface Window {
@@ -38,7 +39,7 @@ export interface KlarnaWidgetProps extends KlarnaPaymentsShared {
 
     widgetInitializationTime: number;
 
-    onComplete: (detailsData) => void;
+    onComplete: (detailsData: KlarnaAdditionalDetailsData) => void;
     onError: (error) => void;
 }
 
@@ -65,3 +66,12 @@ export interface KlarnaAction extends PaymentAction {
         payment_method_category: string;
     };
 }
+
+export interface KlarnaAdditionalDetailsData extends AdditionalDetailsData {
+    data: {
+        paymentData: string;
+        details: {
+            authorization_token?: string;
+        };
+    };
+}
diff --git a/packages/lib/storybook/stories/dropin/Dropin.stories.tsx b/packages/lib/storybook/stories/dropin/Dropin.stories.tsx
@@ -46,23 +46,7 @@ export const Auto: DropinStory = {
 
         return (
             <Checkout checkoutConfig={checkoutConfig}>
-                {checkout => (
-                    <ComponentContainer
-                        element={
-                            new DropinComponent(checkout, {
-                                ...componentConfiguration,
-                                paymentMethodsConfiguration: {
-                                    klarna: {
-                                        useKlarnaWidget: true
-                                    },
-                                    klarna_account: {
-                                        useKlarnaWidget: true
-                                    }
-                                }
-                            })
-                        }
-                    />
-                )}
+                {checkout => <ComponentContainer element={new DropinComponent(checkout, componentConfiguration)} />}
             </Checkout>
         );
     }