Add Active Class to Selected Shipping Method

Question

How can I add an "active" class to the tr surrounding the shipping method when the row is clicked on?

My goal is to have border wrap around the selected shipping method.

Answer 1

1. Register mixin

app/code/Acme/StackExchange/view/frontend/requirejs-config.js

let config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/select-shipping-method': {
                'Acme_StackExchange/js/action/select-shipping-method-mixin': true
            }
        }
    }
};

2. Create mixin

app/code/Acme/StackExchange/view/frontend/web/js/action/select-shipping-method-mixin.js

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

    return function (selectShippingMethod) {
        return wrapper.wrap(selectShippingMethod, function (_super, shippingMethod) {
            _super(shippingMethod);

            let selector = '#checkout-shipping-method-load .table-checkout-shipping-method tbody tr';
            // remove class from shipping methods
            $(selector).removeClass('active');
            if (shippingMethod) {
                // lookup shipping method by code and set class
                $(selector).each(function (i, e) {
                    console.log($(e).find('input:radio').val());
                    if (shippingMethod.carrier_code + '_' + shippingMethod.method_code == $(e).find('input:radio').val()) {
                        $(e).addClass('active');
                    }
                });
            }

        });
    };
});