[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>