Skip to content

Commit e9f1ef4

Browse files
candemiralpkhushboo-singhvi
candemiralp
and
khushboo-singhvi
authored
[EPC-9645] Update logic to show modal (#2933)
Co-authored-by: Khushboo <khushboo.singhvi@adyen.com>
1 parent 19360a3 commit e9f1ef4

File tree

4 files changed

+81
-28
lines changed

4 files changed

+81
-28
lines changed

‎view/frontend/web/js/model/adyen-payment-modal.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ define(
1717
'use strict';
1818

1919
return {
20-
showModal: function(adyenPaymentService, fullScreenLoader, messageContainer, orderId, modalLabel, callback=(ko.observable(true))) {
20+
showModal: function(
21+
adyenPaymentService,
22+
fullScreenLoader,
23+
messageContainer,
24+
orderId,
25+
modalLabel,
26+
callback=(ko.observable(true)),
27+
openDefault = true
28+
) {
2129
let popupModal = $('#' + modalLabel).modal({
2230
// disable user to hide popup
2331
clickableOverlay: false,
@@ -32,7 +40,10 @@ define(
3240
modalClass: modalLabel
3341
});
3442

35-
popupModal.modal('openModal');
43+
if (openDefault) {
44+
popupModal.modal('openModal');
45+
}
46+
3647
return popupModal;
3748
},
3849
/**

‎view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -257,22 +257,34 @@ define(
257257
let self = this;
258258
let popupModal;
259259

260-
fullScreenLoader.stopLoader();
261-
262260
if (action.type === 'threeDS2' || action.type === 'await') {
263261
popupModal = self.showModal();
264262
}
265263

266264
try {
267-
self.checkoutComponent.createFromAction(
268-
action).mount('#' + this.modalLabel);
265+
self.checkoutComponent.createFromAction(action, {
266+
onActionHandled: function (event) {
267+
if (event.componentType === "3DS2Challenge") {
268+
fullScreenLoader.stopLoader();
269+
popupModal.modal('openModal');
270+
}
271+
}
272+
}).mount('#' + this.modalLabel);
269273
} catch (e) {
270274
console.log(e);
271275
self.closeModal(popupModal);
272276
}
273277
},
274278
showModal: function() {
275-
let actionModal = AdyenPaymentModal.showModal(adyenPaymentService, fullScreenLoader, this.messageContainer, this.orderId, this.modalLabel, this.isPlaceOrderActionAllowed);
279+
let actionModal = AdyenPaymentModal.showModal(
280+
adyenPaymentService,
281+
fullScreenLoader,
282+
this.messageContainer,
283+
this.orderId,
284+
this.modalLabel,
285+
this.isPlaceOrderActionAllowed,
286+
false
287+
);
276288
$("." + this.modalLabel + " .action-close").hide();
277289

278290
return actionModal;
@@ -384,11 +396,9 @@ define(
384396
let request = result.data;
385397
AdyenPaymentModal.hideModalLabel(this.modalLabel);
386398
fullScreenLoader.startLoader();
387-
let popupModal = self.showModal();
388399

389400
adyenPaymentService.paymentDetails(request, self.orderId).
390401
done(function(responseJSON) {
391-
fullScreenLoader.stopLoader();
392402
self.handleAdyenResult(responseJSON, self.orderId);
393403
}).
394404
fail(function(response) {

‎view/frontend/web/js/view/payment/method-renderer/adyen-cc-vault-method.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -130,14 +130,11 @@ define([
130130
handleOnAdditionalDetails: function (result) {
131131
let self = this;
132132
let request = result.data;
133-
134-
fullScreenLoader.stopLoader();
135-
136-
let popupModal = self.showModal();
133+
adyenPaymentModal.hideModalLabel(this.modalLabel);
134+
fullScreenLoader.startLoader();
137135

138136
adyenPaymentService.paymentDetails(request, self.orderId).done(function (responseJSON) {
139-
self.handleAdyenResult(responseJSON,
140-
self.orderId);
137+
self.handleAdyenResult(responseJSON, self.orderId);
141138
}).fail(function (response) {
142139
self.closeModal(popupModal);
143140
errorProcessor.process(response, self.messageContainer);
@@ -286,23 +283,36 @@ define([
286283
}
287284
try {
288285
// Determine threeDS2 modal size, based on screen width
289-
const threeDSConfiguration = {
290-
challengeWindowSize: screen.width < 460 ? '01' : '02'
286+
const actionComponentConfiguration = {
287+
challengeWindowSize: screen.width < 460 ? '01' : '02',
288+
onActionHandled: function (event) {
289+
if (event.componentType === "3DS2Challenge") {
290+
fullScreenLoader.stopLoader();
291+
popupModal.modal('openModal');
292+
}
293+
}
291294
}
292295

293-
this.checkoutComponent.createFromAction(action, threeDSConfiguration).mount(
296+
this.checkoutComponent.createFromAction(action, actionComponentConfiguration).mount(
294297
'#' + this.modalLabel + 'Content'
295298
);
296-
297-
fullScreenLoader.stopLoader();
298299
} catch (e) {
299300
console.log(e);
300301
self.closeModal(popupModal);
301302
}
302303
},
303304

304305
showModal: function() {
305-
let actionModal = adyenPaymentModal.showModal(adyenPaymentService, fullScreenLoader, this.messageContainer, this.orderId, this.modalLabel, this.isPlaceOrderActionAllowed)
306+
let actionModal = adyenPaymentModal.showModal(
307+
adyenPaymentService,
308+
fullScreenLoader,
309+
this.messageContainer,
310+
this.orderId,
311+
this.modalLabel,
312+
this.isPlaceOrderActionAllowed,
313+
false
314+
);
315+
306316
$("." + this.modalLabel + " .action-close").hide();
307317

308318
return actionModal;

‎view/frontend/web/js/view/payment/method-renderer/adyen-pm-method.js‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,8 @@ define(
233233

234234
handleOnAdditionalDetails: function(state, component) {
235235
const self = this;
236+
adyenPaymentModal.hideModalLabel(this.modalLabel);
237+
fullScreenLoader.startLoader();
236238
// call endpoint with state.data if available
237239
let request = {};
238240
if (!!state.data) {
@@ -374,9 +376,7 @@ define(
374376

375377
if (!!response.isFinal) {
376378
// Status is final redirect to the success page
377-
$.mage.redirect(
378-
window.checkoutConfig.payment.adyen.successPage
379-
);
379+
$.mage.redirect(window.checkoutConfig.payment.adyen.successPage);
380380
} else {
381381
// render component
382382
self.orderId = orderId;
@@ -387,17 +387,39 @@ define(
387387
renderActionComponent: function(resultCode, action, component) {
388388
let self = this;
389389
let actionNode = document.getElementById(this.modalLabel + 'Content');
390-
fullScreenLoader.stopLoader();
391390

392391
if (resultCode !== 'RedirectShopper') {
393-
self.popupModal = adyenPaymentModal.showModal(adyenPaymentService, fullScreenLoader, this.messageContainer, this.orderId, this.modalLabel, this.isPlaceOrderActionAllowed)
392+
let isModalVisible = true;
393+
394+
if (action.type === 'threeDS2') {
395+
isModalVisible = false;
396+
} else {
397+
fullScreenLoader.stopLoader();
398+
}
399+
400+
self.popupModal = adyenPaymentModal.showModal(
401+
adyenPaymentService,
402+
fullScreenLoader,
403+
this.messageContainer,
404+
this.orderId,
405+
this.modalLabel,
406+
this.isPlaceOrderActionAllowed,
407+
isModalVisible
408+
);
409+
394410
$("." + this.modalLabel + " .action-close").hide();
395411
}
396412

397-
self.actionComponent = self.checkoutComponent.createFromAction(action).mount(actionNode);
413+
self.actionComponent = self.checkoutComponent.createFromAction(action, {
414+
onActionHandled: function (event) {
415+
if (event.componentType === "3DS2Challenge") {
416+
fullScreenLoader.stopLoader();
417+
self.popupModal.modal('openModal');
418+
}
419+
}
420+
}).mount(actionNode);
398421
},
399422

400-
401423
isButtonActive: function() {
402424
return paymentComponentStates().getIsPlaceOrderAllowed(this.getMethodCode());
403425
},

0 commit comments

Comments
 (0)