0

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_Checkout\js\action\set-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();
                });
            }
        );
    };
});

1 Answer 1

0

This is challenging because the code that you are trying to override is within one very long function. The only mixin option I see would require re-implementing the entire function, which means maintaining compatibility for a bunch of functionality that is only peripherally related to your goal.

Another option is to use a mixin to override Magento_Checkout/js/model/error-processor, which is much shorter and more focused. You may need to parse the incoming response and messageContainer if you want to selectively display an alert instead of allowing the default behavior.

The mixin code would be something like:

define([
    'mage/utils/wrapper'
], function (wrapper) {
    'use strict';

    return function (errorProcessor) {
        errorProcessor.process = wrapper.wrapSuper(errorProcessor.process, function (response, messageContainer) {
            
            /*
               Your custom code, which might want to exit before the subsequent call to this._super()
            */

            this._super(response, messageContainer);
        });

        return errorProcessor;
    };
});

The registration would be somethign like:

'config': {
    'mixins': {
        'Magento_Checkout/js/model/error-processor': {
            'Your_Extension/js/model/error-processor-mixin': true
        },
    }
},
2
  • I need to work on response only for storage.post and not entire function. I don't think rewriting entire function is needed.
    – Dexter
    Commented Oct 18, 2021 at 7:50
  • I don't think there is a way to alter how storage.post is handled without copy/pasting the entire function that surrounds it into a mixin.
    – jiheison
    Commented Oct 18, 2021 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.