diff --git a/view/frontend/web/js/model/adyen-payment-modal.js b/view/frontend/web/js/model/adyen-payment-modal.js index b19380b245..3ffd5d291b 100644 --- a/view/frontend/web/js/model/adyen-payment-modal.js +++ b/view/frontend/web/js/model/adyen-payment-modal.js @@ -17,7 +17,15 @@ define( 'use strict'; return { - showModal: function(adyenPaymentService, fullScreenLoader, messageContainer, orderId, modalLabel, callback=(ko.observable(true))) { + showModal: function( + adyenPaymentService, + fullScreenLoader, + messageContainer, + orderId, + modalLabel, + callback=(ko.observable(true)), + openDefault = true + ) { let popupModal = $('#' + modalLabel).modal({ // disable user to hide popup clickableOverlay: false, @@ -32,7 +40,10 @@ define( modalClass: modalLabel }); - popupModal.modal('openModal'); + if (openDefault) { + popupModal.modal('openModal'); + } + return popupModal; }, /** diff --git a/view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js b/view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js index 95c996c4ad..46806d6723 100755 --- a/view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js +++ b/view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js @@ -257,22 +257,34 @@ define( let self = this; let popupModal; - fullScreenLoader.stopLoader(); - if (action.type === 'threeDS2' || action.type === 'await') { popupModal = self.showModal(); } try { - self.checkoutComponent.createFromAction( - action).mount('#' + this.modalLabel); + self.checkoutComponent.createFromAction(action, { + onActionHandled: function (event) { + if (event.componentType === "3DS2Challenge") { + fullScreenLoader.stopLoader(); + popupModal.modal('openModal'); + } + } + }).mount('#' + this.modalLabel); } catch (e) { console.log(e); self.closeModal(popupModal); } }, showModal: function() { - let actionModal = AdyenPaymentModal.showModal(adyenPaymentService, fullScreenLoader, this.messageContainer, this.orderId, this.modalLabel, this.isPlaceOrderActionAllowed); + let actionModal = AdyenPaymentModal.showModal( + adyenPaymentService, + fullScreenLoader, + this.messageContainer, + this.orderId, + this.modalLabel, + this.isPlaceOrderActionAllowed, + false + ); $("." + this.modalLabel + " .action-close").hide(); return actionModal; @@ -384,11 +396,9 @@ define( let request = result.data; AdyenPaymentModal.hideModalLabel(this.modalLabel); fullScreenLoader.startLoader(); - let popupModal = self.showModal(); adyenPaymentService.paymentDetails(request, self.orderId). done(function(responseJSON) { - fullScreenLoader.stopLoader(); self.handleAdyenResult(responseJSON, self.orderId); }). fail(function(response) { diff --git a/view/frontend/web/js/view/payment/method-renderer/adyen-cc-vault-method.js b/view/frontend/web/js/view/payment/method-renderer/adyen-cc-vault-method.js index 45a44078e1..158600be42 100644 --- a/view/frontend/web/js/view/payment/method-renderer/adyen-cc-vault-method.js +++ b/view/frontend/web/js/view/payment/method-renderer/adyen-cc-vault-method.js @@ -130,14 +130,11 @@ define([ handleOnAdditionalDetails: function (result) { let self = this; let request = result.data; - - fullScreenLoader.stopLoader(); - - let popupModal = self.showModal(); + adyenPaymentModal.hideModalLabel(this.modalLabel); + fullScreenLoader.startLoader(); adyenPaymentService.paymentDetails(request, self.orderId).done(function (responseJSON) { - self.handleAdyenResult(responseJSON, - self.orderId); + self.handleAdyenResult(responseJSON, self.orderId); }).fail(function (response) { self.closeModal(popupModal); errorProcessor.process(response, self.messageContainer); @@ -286,15 +283,19 @@ define([ } try { // Determine threeDS2 modal size, based on screen width - const threeDSConfiguration = { - challengeWindowSize: screen.width < 460 ? '01' : '02' + const actionComponentConfiguration = { + challengeWindowSize: screen.width < 460 ? '01' : '02', + onActionHandled: function (event) { + if (event.componentType === "3DS2Challenge") { + fullScreenLoader.stopLoader(); + popupModal.modal('openModal'); + } + } } - this.checkoutComponent.createFromAction(action, threeDSConfiguration).mount( + this.checkoutComponent.createFromAction(action, actionComponentConfiguration).mount( '#' + this.modalLabel + 'Content' ); - - fullScreenLoader.stopLoader(); } catch (e) { console.log(e); self.closeModal(popupModal); @@ -302,7 +303,16 @@ define([ }, showModal: function() { - let actionModal = adyenPaymentModal.showModal(adyenPaymentService, fullScreenLoader, this.messageContainer, this.orderId, this.modalLabel, this.isPlaceOrderActionAllowed) + let actionModal = adyenPaymentModal.showModal( + adyenPaymentService, + fullScreenLoader, + this.messageContainer, + this.orderId, + this.modalLabel, + this.isPlaceOrderActionAllowed, + false + ); + $("." + this.modalLabel + " .action-close").hide(); return actionModal; 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 2d8717ae81..5c002e0a15 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 @@ -233,6 +233,8 @@ define( handleOnAdditionalDetails: function(state, component) { const self = this; + adyenPaymentModal.hideModalLabel(this.modalLabel); + fullScreenLoader.startLoader(); // call endpoint with state.data if available let request = {}; if (!!state.data) { @@ -374,9 +376,7 @@ define( if (!!response.isFinal) { // Status is final redirect to the success page - $.mage.redirect( - window.checkoutConfig.payment.adyen.successPage - ); + $.mage.redirect(window.checkoutConfig.payment.adyen.successPage); } else { // render component self.orderId = orderId; @@ -387,17 +387,39 @@ define( renderActionComponent: function(resultCode, action, component) { let self = this; let actionNode = document.getElementById(this.modalLabel + 'Content'); - fullScreenLoader.stopLoader(); if (resultCode !== 'RedirectShopper') { - self.popupModal = adyenPaymentModal.showModal(adyenPaymentService, fullScreenLoader, this.messageContainer, this.orderId, this.modalLabel, this.isPlaceOrderActionAllowed) + let isModalVisible = true; + + if (action.type === 'threeDS2') { + isModalVisible = false; + } else { + fullScreenLoader.stopLoader(); + } + + self.popupModal = adyenPaymentModal.showModal( + adyenPaymentService, + fullScreenLoader, + this.messageContainer, + this.orderId, + this.modalLabel, + this.isPlaceOrderActionAllowed, + isModalVisible + ); + $("." + this.modalLabel + " .action-close").hide(); } - self.actionComponent = self.checkoutComponent.createFromAction(action).mount(actionNode); + self.actionComponent = self.checkoutComponent.createFromAction(action, { + onActionHandled: function (event) { + if (event.componentType === "3DS2Challenge") { + fullScreenLoader.stopLoader(); + self.popupModal.modal('openModal'); + } + } + }).mount(actionNode); }, - isButtonActive: function() { return paymentComponentStates().getIsPlaceOrderAllowed(this.getMethodCode()); },