magento2 checkout: how to update billing address programmatically

Question

I would like to force update of the billing address as user is typing his firstname and lastname in the checkout. For example when it changes or on keyup.

I'm using a custom checkout module that only triggers this update when the postcode is changed or the country is changed.

I was thinking of creating a mixin for set-shipping-information and monitor the elements so I can trigger this action but I honestly can't find any guide on how to approach this.

I tried writing my mixin like this

define([
'jquery',
'mage/utils/wrapper',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/select-billing-address',
], function ($, wrapper, quote, selectBillingAddress, ) {
'use strict';

return function (setShippingInformationAction) {


    $(document).on('change',"[name='firstname']",function(){
        console.log('firstname changed');
        //code to update billing address 
    });


    return wrapper.wrap(setShippingInformationAction, function (originalAction) {
        return originalAction(); // it is returning the flow to original action
    });
};
});

Answer 1

I just found the solution to my own issue. In case it helps someone else in order to update the billing address you need to utilize the component

'Magento_Checkout/js/model/checkout-data-resolver',

Then you can use the following functions to force an update to both shipping address and the billing address.

resolveShippingAddress()
resolveBillingAddress() 

to update the values on the addresses.

I'll post here my full example with some debugging commands that helped me better understand what's happening as well in the console.log

define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/checkout-data-resolver',
], function ($, wrapper, quote, checkoutDataResolver ) {
    'use strict';

    return function (setShippingInformationAction) {

        var checkIsAddressSameAsShipping= function(){
          var $checkbox = $('billing-address-same-as-shipping');
            return !!$("input[name='billing-address-same-as-shipping']:first").is(':checked');
        };


        $(document).on('change',"[name='firstname']",function(){
            console.log('firstname changed');
            if(checkIsAddressSameAsShipping()){
                console.log({shipping: quote.shippingAddress()});
                console.log({billing: quote.billingAddress()});
                console.log({checkout: checkoutDataResolver});

                checkoutDataResolver.resolveShippingAddress();
                checkoutDataResolver.applyShippingAddress(checkoutDataResolver.resolveEstimationAddress());
                checkoutDataResolver.resolveBillingAddress();
                checkoutDataResolver.applyBillingAddress();
                console.log({shipping2: quote.shippingAddress()});
                console.log({billing2: quote.billingAddress()});
            }
        });


        return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            return originalAction(); // it is returning the flow to original action
        });
    };
});

I would still like to know if there's a recommended way to do it though from someone more experienced.