How to overwrite a javascript component method?

[kassner]

Hi,

I'm looking for a way to overwrite a javascript method in Magento_Checkout/js/payment/default, I'm able to extend it with my own My_Module/js/payment/default and use it without problem, but I need to change every define that is calling it directly by Magento_Checkout.

Is there a way to make requirejs understand that I want to change the file it should lookup? Back in Magento 1 the concept was different, but it was possible to overwrite a JS class method using prototypes, this new structure does not allow it or I'm missing something?

Devdocs say about extending a component (which works when changing the define function) or overwriting a widget, but that one does not work with components.

Thanks!

[kumbas111]

You can try 'mixins' feature, all you need is to create requireJS module with extended method like this:

default_mixin.js:

define(function () {
    'use strict';

    var mixin = {

        methodToExtend: function () {
            //...
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../default returns.
        return target.extend(mixin); // new result that all other modules receive 
    };
});

requirejs-config.js:

config: {
    mixins: {
        'My_Module/js/payment/default': {  // Target module
            'My_Module/js/payment/default_mixin': true  // Extender module
        }
    }
}

[kassner]

@kumbas111 Thanks! That's exactly what I needed.

Just to document here, if you need to overwrite a function instead a class method (I used to overwrite Magento_Checkout/js/action/place-order).

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/place-order': {
                'My_Module/js/action/place-order': true
            }
        }
    }
};

place-order.js

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

    return function (placeOrderAction) {
        return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, redirectOnSuccess) {
            // my own code here
            return originalAction(paymentData, redirectOnSuccess);
        });
    };
});

[AntonEvers]

As seen in Magento_CheckoutAgreements/js/model/place-order-mixin

[shiva805]

But not finding information how to call parent component method from extended method.