Set Default Billing Address as Billing Address via knockout on checkout page

Question

The Checkout page is currently loading Shipping address as billing and shipping address. I want to load default billing address on checkbox click and set it to order before save. I dont know how to do it.

I tried and found a way to get default billing address through

var defaultBillingAddressese = addressList().filter(function (address) {
 return address.getType() == 'customer-address' && address.isDefaultBilling();
 });

This line of code returns default billing address now i want to set it to order in billing-address.js.

app/design/frontend/Capitol/luma-child/Magento_Checkout/web/template

 <!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="checkout-billing-address">
 <div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
 <input type="checkbox" name="billing-address-same-as-shippings"
 data-bind="click: updateAddress, attr: {id: 'billing-address-same-as-shippings'}" style="visibility: hidden"/>
 <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}" style="visibility: hidden"><span
 data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
 </div>
 <!-- ko template: 'Magento_Checkout/billing-address/details' --><!-- /ko -->
 <fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">
 <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
 <!-- ko template: 'Magento_Checkout/billing-address/form' --><!-- /ko -->
 <div class="actions-toolbar">
 <div class="primary">
 <button class="action action-update" type="button" data-bind="click: updateAddress">
 <span data-bind="i18n: 'Update'"></span>
 </button>
 <button class="action action-cancel" type="button" data-bind="click: cancelAddressEdit">
 <span data-bind="i18n: 'Cancel'"></span>
 </button>
 </div>
 </div>
 </fieldset>
</div>

billing-address.js

updateAddress: function () {
var defaultBillingAddress = addressList().filter(function (address) {
 return address.getType() == 'customer-address' && address.isDefaultBilling();
 });
 },

• Vinz: Do you use a custom theme/module ? Have you already tried to develop the feature ? If yes, please and your full code.
• enayu: I'll update my question

Answer 1

You could do the following:

overwrite a default js file checkout-data-resolver.js add extra lines to the applyBillingAddress function to check if default billing address exists and if true to use it.

 var config = {
map: {
 '*': {
 'Magento_Checkout/js/model/checkout-data-resolver': 
 'Vendor_Module/js/model/checkout-data-resolver' 
 }
}
};

in new checkout-data-resolver.js file find applyBillingAddress. Insert following cod after var shippingAddress; and before if (quote.billingAddress())

 ....
var isBillingAddressInitialized;
isBillingAddressInitialized = addressList.some(function (addressFromList) {
 if (addressFromList.isDefaultBilling()) {
 selectBillingAddress(addressFromList);
 return true;
 }
 return false;
 });
if(isBillingAddressInitialized){
 return;
 } 
....

Reference

• Ejaz: checkout-data-resolver mixin was what I was looking for. This answer helped me. Thanks.