I am trying to convert the error message displayed in error container to alert box. To do so, I have created a mixin for
set-payment-information-extended.js
on path Magento_Checkoutjsactionset-payment-information-extended.js
the function i need to override from original payment-information-extended.js is
return storage.post(
serviceUrl, JSON.stringify(payload), true, 'application/json', headers
).fail(
function (response) {
errorProcessor.process(response, messageContainer);
}
).always(
function () {
fullScreenLoader.stopLoader();
_.each(hooks.afterRequestListeners, function (listener) {
listener();
});
}
);
Here, inside fail I would like to set an alert box using Magento_Ui/js/modal/alert
As the storage.post is a an ajax request, I need to modify only the fail case. I am not sure how to do it in mixin. While I try to call the return function using
define([
'jquery',
'Magento_Ui/js/modal/alert'
], function ($, wrapper) {
'use strict';
return function (response){
}
});
It gives error set-payment-information
is not a function. Can someone guide me how to modify the ajax response and show error message in alert box instead of message container if response is fail?
The whole code for file set-payment-information-extended.js
can be found in vendor/module-checkout/view/frontend/web/js/action/
I am adding the whole code below for reference:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* @api
*/
define([
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/url-builder',
'mage/storage',
'Magento_Checkout/js/model/error-processor',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/action/get-totals',
'Magento_Checkout/js/model/full-screen-loader',
'underscore',
'Magento_Checkout/js/model/payment/set-payment-hooks'
], function (quote, urlBuilder, storage, errorProcessor, customer, getTotalsAction, fullScreenLoader, _, hooks) {
'use strict';
/**
* Filter template data.
*
* @param {Object|Array} data
*/
var filterTemplateData = function (data) {
return _.each(data, function (value, key, list) {
if (_.isArray(value) || _.isObject(value)) {
list[key] = filterTemplateData(value);
}
if (key === '__disableTmpl') {
delete list[key];
}
});
};
return function (messageContainer, paymentData, skipBilling) {
var serviceUrl,
payload,
headers = {};
paymentData = filterTemplateData(paymentData);
skipBilling = skipBilling || false;
payload = {
cartId: quote.getQuoteId(),
paymentMethod: paymentData
};
/**
* Checkout for guest and registered customer.
*/
if (!customer.isLoggedIn()) {
serviceUrl = urlBuilder.createUrl('/guest-carts/:cartId/set-payment-information', {
cartId: quote.getQuoteId()
});
payload.email = quote.guestEmail;
} else {
serviceUrl = urlBuilder.createUrl('/carts/mine/set-payment-information', {});
}
if (skipBilling === false) {
payload.billingAddress = quote.billingAddress();
}
fullScreenLoader.startLoader();
_.each(hooks.requestModifiers, function (modifier) {
modifier(headers, payload);
});
return storage.post(
serviceUrl, JSON.stringify(payload), true, 'application/json', headers
).fail(
function (response) {
errorProcessor.process(response, messageContainer);
}
).always(
function () {
fullScreenLoader.stopLoader();
_.each(hooks.afterRequestListeners, function (listener) {
listener();
});
}
);
};
});