Magento 2 Remove "Add New Address Button" from checkout page if we have have 5 address on the checkout

Question

I want to show only 5 shipping address on this page, followed this below link Magento 2 - Checkout. Remove “New Address” button from billing/shipping address with module or theme.

/app/design/frontend/VendorName/ThemeName/Magento_Checkout/web/js/view/shipping.js

// this.isNewAddressAdded(hasNewAddress);
            if (addressList().length <= 5) {
                    this.isNewAddressAdded(true);
                }

I've added mixin this way /app/code/Vendor/Checkout/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'Vendor_Checkout/js/view/shipping': true
            },
        }
    }
};

Answer 1

You need to modify isNewAddressAdded() logic in shipping.js. The following code will help you.

if (addressList().length >= 5) {
    this.isNewAddressAdded(true);
}

Update:

if (addressList().length >= 5) {
            this.isNewAddressAdded(true);
        } else {
            this.isNewAddressAdded(hasNewAddress);
        }

[Update (2021-07-12)]

Add following code snippet on shipping.js before initialize method:

isVisibleAddNewAddress:  ko.observable(true),

Now in initialize method add the following code:

var addressCount = parseInt(addressList().length);
if (addressCount >= 5) {
    this.isVisibleAddNewAddress(false);
}

Now open shipping.html add the following code:

<if args="isVisibleAddNewAddress()">
    <button type="button"
            class="action action-show-popup"
            click="showFormPopUp"
            visible="!isNewAddressAdded()">
        <span translate="'New Address'" />
    </button>
</if>

Clear your browser js cache.