Debugging Magento Checkout- Property getType of Null, when messing around with Billing and Shipping Address

Question

I am doing some heavy customization on the checkout (pulling billing address to the first position, next to shipping address).

If have added a plugin to view/shipping.js:

define(
    [
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/checkout-data'
    ], function(
    quote,
    selectShippingAddress,
    checkoutData
    ){
    'use strict';
    return function(targetModule){

    var lastSelectedShippingAddress = null;

    return targetModule.extend({
        initObservable: function () {
            this._super()
                .observe({
                    isAddressSameAsBilling: true,
                    isAddressDetailsVisible: false // vs. isAddressFormVisible -- which one to use?
                });
            return this;
        },

        /**
         * @return {Boolean}
         */
        useBillingAddress: function () {
            debugger;
            if (this.isAddressSameAsBilling()) {
                selectShippingAddress(quote.billingAddress());
                this.isAddressDetailsVisible(false);
            } else {
                lastSelectedShippingAddress = quote.shippingAddress();
                quote.shippingAddress(null);
                this.isAddressDetailsVisible(true);
            }
            checkoutData.setSelectedShippingAddress(null);

            return true;
        },
    });
    };
});

And have bount useBillingAddress to a newly created checkox "Use billing address as shipping address".

Now when clicking this checkbox I get the following javascript error:

list.js:60 Uncaught TypeError: Cannot read property 'getType' of null
    at UiClass.createRendererComponent (list.js:60)
    at ko.subscription.callback (list.js:33)
    at Function.notifySubscribers (knockout.js:1103)
    at Function.observable.valueHasMutated (knockout.js:1300)
    at Object.observable [as shippingAddress] (knockout.js:1285)
    at UiClass.useBillingAddress (plugin.js:36)
    at HTMLInputElement.<anonymous> (knockout.js:3863)
    at HTMLInputElement.dispatch (jquery.js:5226)
    at HTMLInputElement.elemData.handle (jquery.js:4878)

But I am unable to track down how this error is caused using the javascript debugger.

I would be happy for any hints.

Answer 1

With list.js it means vendor/magento/module-checkout/view/frontend/web/js/view/shipping-information/list.js, the corresponding template is vendor/magento/module-checkout/view/frontend/web/template/shipping-information/list.html.

If I track this tempalte down, I find it is rendered in the sidebar under "Ship To". Making the template empty does help. List.js is still executed. I have to have look closer at list.js and set a breakpoint there.

    initialize: function () {
        this._super()
            .initChildren();

        var self = this;
        quote.shippingAddress.subscribe(function(address) {
            debugger;
            self.createRendererComponent(address);
        });
        return this;
    },

This receives address = null Which is kind of true. In our case we did not yet define the shipping address, it's blank.

   createRendererComponent: function (address) {
        if (address == null) return;

helps but reveals a new place where Magento core assumes, that shipping address has to be there yet.

This is vendor/magento/module-checkout/view/frontend/web/js/model/shipping-rate-service.js where I can add

    quote.shippingAddress.subscribe(function () {
        if (quote.shippingAddress() == null) {
            return;
        }

just have to find a clean way to do this via plugin.

Much easier alternative might be to create an empty shipping-dummy address.

What does not work:

/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/*global define*/
define(
    [
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/new-customer-address'
    ],
    function($, quote, newCustomerAddress) {
    'use strict';
    return function(shippingAddress) {
        // see vendor/magento/module-checkout/view/frontend/web/js/action/select-billing-address.js

        var address = newCustomerAddress;

        if (shippingAddress == null) {
            shippingAddress = $.extend({}, newCustomerAddress); // clone
        }

        if (quote.billingAddress() && shippingAddress.getCacheKey() == quote.billingAddress().getCacheKey()) {
            address = $.extend({}, shippingAddress);
            address.saveInAddressBook = null;
        } else {
            address = shippingAddress;
        }

        quote.shippingAddress(address);
    };
    }
);

Finally I was able to create the empty shipping address like this:

/*global define*/
define(
    [
        'jquery',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/new-customer-address'
    ],
    function($, quote, newCustomerAddress) {
        'use strict';
        return function(shippingAddress) {
            // see vendor/magento/module-checkout/view/frontend/web/js/action/select-billing-address.js

            var address = newCustomerAddress({});

            if (shippingAddress == null) {
                shippingAddress = newCustomerAddress({});
            }

            if (quote.billingAddress() && shippingAddress.getCacheKey() == quote.billingAddress().getCacheKey()) {
                address = $.extend({}, shippingAddress);
                address.saveInAddressBook = null;
            } else {
                address = shippingAddress;
            }

            quote.shippingAddress(address);
        };
    }
);