From 7f0820898d1dbbd8b21909ce63ccf28be2820f0c Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Wed, 27 Nov 2024 14:31:04 +0100
Subject: [PATCH] Detect when a PM is cached and sent signal that it should
 reinitialise

---
 .../src/components/Dropin/components/DropinComponent.tsx | 9 +++++++++
 .../PaymentMethodItem/PaymentMethodItem.tsx              | 6 +++---
 packages/lib/src/components/Klarna/KlarnaPayments.tsx    | 4 ++++
 .../lib/src/components/internal/UIElement/UIElement.tsx  | 4 ++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
index b5b85e62d..7385d04ed 100644
--- a/packages/lib/src/components/Dropin/components/DropinComponent.tsx
+++ b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -58,10 +58,19 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
     };
 
     private setActivePaymentMethod = paymentMethod => {
+        // console.log('\n### DropinComponent::setActivePaymentMethod:: cachedPaymentMethods', this.state.cachedPaymentMethods);
         this.setState(prevState => ({
             activePaymentMethod: paymentMethod,
             cachedPaymentMethods: { ...prevState.cachedPaymentMethods, [paymentMethod._id]: true }
         }));
+
+        for (const [key] of Object.entries(this.state.cachedPaymentMethods)) {
+            if (key === paymentMethod._id) {
+                // console.log('### DropinComponent::setActivePaymentMethod:: payment method is cached=', key);
+                paymentMethod.onPaymentMethodActive();
+                break;
+            }
+        }
     };
 
     componentDidUpdate(prevProps, prevState) {
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx
index c784c50b7..73ba57693 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx
@@ -84,9 +84,9 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
         const showBrands = !paymentMethod.props.oneClick && paymentMethod.brands && paymentMethod.brands.length > 0;
 
         return (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-            <div key={paymentMethod._id} className={paymentMethodClassnames} onClick={this.handleOnListItemClick}>
-                <div className="adyen-checkout__payment-method__header">
+            <div key={paymentMethod._id} className={paymentMethodClassnames}>
+                {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions*/}
+                <div className="adyen-checkout__payment-method__header" onClick={this.handleOnListItemClick}>
                     <ExpandButton buttonId={buttonId} showRadioButton={showRadioButton} isSelected={isSelected} expandContentId={containerId}>
                         <PaymentMethodIcon
                             // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)
diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx
index d692a0829..fe7f8ce8a 100644
--- a/packages/lib/src/components/Klarna/KlarnaPayments.tsx
+++ b/packages/lib/src/components/Klarna/KlarnaPayments.tsx
@@ -51,6 +51,10 @@ class KlarnaPayments extends UIElement<KlarnConfiguration> {
         this.setElementStatus('ready');
     }
 
+    protected onPaymentMethodActive() {
+        // TODO do something to reinit the PM
+    }
+
     render() {
         return (
             <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
diff --git a/packages/lib/src/components/internal/UIElement/UIElement.tsx b/packages/lib/src/components/internal/UIElement/UIElement.tsx
index 7fbdeee91..e12b1771c 100644
--- a/packages/lib/src/components/internal/UIElement/UIElement.tsx
+++ b/packages/lib/src/components/internal/UIElement/UIElement.tsx
@@ -124,6 +124,10 @@ export abstract class UIElement<P extends UIElementProps = UIElementProps> exten
         return this;
     }
 
+    protected onPaymentMethodActive() {
+        return null;
+    }
+
     protected onChange(): void {
         this.props.onChange?.(
             {