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 index f41260e93..aceecc1b9 100755 --- 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 index ba35383a7..9f936cae2 100644 --- 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 index 1c65d60ac..5546d3d83 100644 --- a/view/frontend/web/template/payment/multishipping/pm-form.html +++ b/view/frontend/web/template/payment/multishipping/pm-form.html @@ -1 +1 @@ -
+