[ECP-9518] Fix multipshipping alternative payment methods

Adyen · Oct 16, 2024 · 4079d69 · 4079d69
1 parent c2571bb
commit 4079d69
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 85 deletions.
diff --git a/view/frontend/web/js/view/payment/method-renderer/adyen-pm-method.js b/view/frontend/web/js/view/payment/method-renderer/adyen-pm-method.js
@@ -121,9 +121,9 @@ define(
              * This function is triggered via `afterRender` attribute of the html template
              * and creates checkout component for pre-selected payment method.
              */
-            renderPreSelected: function () {
+            renderPreSelected: async function () {
                 if (this.isChecked() === this.getCode()) {
-                    this.createCheckoutComponent();
+                    await this.createCheckoutComponent();
                 }
             },
 
@@ -464,6 +464,10 @@ define(
 
             checkBrowserCompatibility: function () {
                 return true;
+            },
+
+            getPaymentMethodComponent: function () {
+                return this.paymentComponent;
             }
         });
     },

diff --git a/view/frontend/web/js/view/payment/method-renderer/multishipping/adyen-pm-method.js b/view/frontend/web/js/view/payment/method-renderer/multishipping/adyen-pm-method.js
@@ -14,114 +14,59 @@ define([
     'ko',
     'Adyen_Payment/js/view/payment/method-renderer/adyen-pm-method',
     'Adyen_Payment/js/helper/configHelper',
-    'Adyen_Payment/js/model/adyen-payment-service'
+    'Adyen_Payment/js/model/adyen-payment-service',
+    'Magento_Checkout/js/model/full-screen-loader'
 ], function (
     $,
     ko,
     Component,
     configHelper,
-    adyenPaymentService
+    adyenPaymentService,
+    fullScreenLoader
 ) {
     'use strict';
 
     return Component.extend({
+        paymentMethodReady: ko.observable(false),
         defaults: {
             template: 'Adyen_Payment/payment/multishipping/pm-form'
         },
 
-        paymentMethodReady: ko.observable(false),
-
-        initialize: function() {
-            let self = this;
+        enablePaymentMethod: function (paymentMethodsResponse) {
             this._super();
-
-            this.isChecked = ko.observable(false);
-
-            let paymentMethodsObserver = adyenPaymentService.getPaymentMethods();
-            paymentMethodsObserver.subscribe(
-                function(paymentMethods) {
-                    self.paymentMethodReady(paymentMethods);
-                    self.renderCheckoutComponent();
-                }
-            );
-
-            this.paymentMethodReady(paymentMethodsObserver());
+            this.paymentMethodReady(paymentMethodsResponse);
         },
 
         selectPaymentMethod: function () {
-            let result = this._super();
-            this.isChecked(true);
-            this.renderCheckoutComponent();
-
-            if (!!this.paymentComponent && this.paymentComponent.isValid) {
-                $('#stateData').val(JSON.stringify(this.paymentComponent.data));
-            } else {
-                console.warn('Payment component is not valid or not available');
-            }
-
-            return result;
-        },
-
-        buildComponentConfiguration: function(paymentMethod, paymentMethodsExtraInfo) {
-            return configHelper.buildMultishippingComponentConfiguration(paymentMethod, paymentMethodsExtraInfo);
-        },
-
-        renderCheckoutComponent: function() {
-            let methodCode = this.getMethodCode();
-            let paymentMethod = this.paymentMethod();
-
-            if (!paymentMethod || !this.isChecked()) {
-                console.error('Payment method is undefined for ', methodCode);
-                return;
-            }
-
-            let configuration = this.buildComponentConfiguration(paymentMethod, this.paymentMethodsExtraInfo());
-
-            if (this.paymentComponent) {
-                this.paymentComponent.update(configuration);
-            } else {
-                this.mountPaymentMethodComponent(paymentMethod, configuration, methodCode);
-            }
-        },
-
-        mountPaymentMethodComponent: function(paymentMethod, configuration, methodCode) {
+            fullScreenLoader.startLoader();
             let self = this;
 
-            const containerId = '#' + paymentMethod.type + 'Container';
+            this.selectMultishippingPaymentMethod().then(function (status) {
+                if (status) {
+                    let paymentComponent = self.getPaymentMethodComponent();
 
-            if ($(containerId).length) {
-                if (this.paymentComponent && typeof this.paymentComponent.unmount === 'function') {
-                    this.paymentComponent.unmount();
+                    if (!!paymentComponent && paymentComponent.isValid) {
+                        $('#stateData').val(JSON.stringify(paymentComponent.data));
+                    } else {
+                        console.warn('Payment component is not valid or not available');
+                    }
+                } else {
+                    console.warn('Payment component could not be generated!');
                 }
 
-                const paymentMethodComponent = this.checkoutComponent.create(
-                    paymentMethod.type,
-                    configuration
-                );
+                fullScreenLoader.stopLoader();
+            });
 
+            return true;
+        },
 
-                paymentMethodComponent.mount(containerId);
-
-                this.paymentComponent = paymentMethodComponent;
-
-                if (typeof paymentMethodComponent.onChange === 'function') {
-                    paymentMethodComponent.onChange(function(state) {
-                        self.onPaymentMethodChange(state, methodCode);
-                    });
-                } else {
-                    console.warn('Unable to add onChange event listener to payment component', paymentMethodComponent);
-                }
-            } else {
-                console.warn('Container not found for', containerId);
-            }
+        selectMultishippingPaymentMethod: async function () {
+            await this.createCheckoutComponent();
+            return true;
         },
 
-        onPaymentMethodChange: function(state, methodCode) {
-            if (methodCode !== this.getMethodCode()) {
-                return;
-            }
-            this.isPlaceOrderAllowed(state.isValid);
-            $('#stateData').val(state.data ? JSON.stringify(state.data) : '');
+        buildComponentConfiguration: function(paymentMethod, paymentMethodsExtraInfo) {
+            return configHelper.buildMultishippingComponentConfiguration(paymentMethod, paymentMethodsExtraInfo);
         }
     });
 });
diff --git a/view/frontend/web/template/payment/multishipping/pm-form.html b/view/frontend/web/template/payment/multishipping/pm-form.html
@@ -1 +1 @@
-<div class="checkout-component-dock" data-bind="attr: {'id': getTxVariant() + 'Container'}" afterRender="renderCheckoutComponent()"></div>
+<div class="checkout-component-dock" data-bind="attr: {'id': getTxVariant() + 'Container'}"></div>