Detect when a PM is cached and sent signal that it should reinitialise

Adyen · Nov 27, 2024 · 7f08208 · 7f08208
1 parent c0b6125
commit 7f08208
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git 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/...ib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx b/...ib/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
@@ -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
@@ -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?.(
             {