MAGETWO-37495: Wrong behaviour for save new shipping addres during checkout

Author: Ievgen Shakhsuvarov

app/code/Magento/Checkout/view/frontend/web/js/model/addresslist.js

@@ -22,16 +22,7 @@ define(['jquery'], function($) {
             return address;
         },
         getAddresses: function() {
-            if (addresses.indexOf(this.newAddress) == -1) {
-                this.add(this.newAddress);
-            }
-            return addresses;
-        },
-        newAddress: {
-            getAddressInline: function() {
-                return 'New Address';
-            },
-            customerAddressId: null
+            return addresses.slice(0);
         }
     };
 });

app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js

@@ -3,21 +3,20 @@
  * See COPYING.txt for license details.
  */
 /*jshint browser:true*/
-/*global define,alert*/
+/*global define*/
 define(
     [
         "jquery",
         'Magento_Ui/js/form/form',
         'ko',
         'Magento_Customer/js/model/customer',
         '../action/select-billing-address',
-        'Magento_Checkout/js/model/step-navigator',
+        '../model/step-navigator',
         '../model/quote',
         '../model/addresslist',
-        '../action/check-email-availability',
-        'mage/validation'
+        'mage/translate'
     ],
-    function ($, Component, ko, customer, selectBillingAddress, navigator, quote, addressList, checkEmailAvailability) {
+    function ($, Component, ko, customer, selectBillingAddress, navigator, quote, addressList, $t) {
         "use strict";
         var stepName = 'billingAddress';
         var newAddressSelected = ko.observable(false);
@@ -35,12 +34,23 @@ define(
                 return navigator.getStepClassAttributes(stepName);
             },
             stepNumber: navigator.getStepNumber(stepName),
-            billingAddresses: customer.getBillingAddressList(),
-            selectedBillingAddressId: addressList.getAddresses()[0].customerAddressId,
+            billingAddresses: function() {
+                var newAddress = {
+                        getAddressInline: function() {
+                            return $t('New address');
+                        },
+                        customerAddressId: null
+                    },
+                    addresses = addressList.getAddresses();
+                addresses.push(newAddress);
+                return addresses;
+            },
+            selectedBillingAddressId: ko.observable(
+                addressList.getAddresses().length ? addressList.getAddresses()[0].customerAddressId : null
+            ),
             isVisible: navigator.isStepVisible(stepName),
             useForShipping: "1",
             quoteIsVirtual: quote.isVirtual(),
-            isEmailCheckComplete: $.Deferred(),
             billingAddressesOptionsText: function(item) {
                 return item.getAddressInline();
             },
@@ -53,42 +63,32 @@ define(
                 return additionalData;
             },
             submitBillingAddress: function() {
-                if (this.selectedBillingAddressId) {
-                    var additionalData = this.checkUseForShipping(this.useForShipping);
+                var additionalData = this.checkUseForShipping(this.useForShipping);
+                if (this.selectedBillingAddressId()) {
                     selectBillingAddress(
-                        addressList.getAddressById(this.selectedBillingAddressId),
+                        addressList.getAddressById(this.selectedBillingAddressId()),
                         this.useForShipping,
                         additionalData
                     );
                 } else {
-                    var that = this;
                     this.validate();
-                    $.when(this.isEmailCheckComplete).done( function() {
-                        if (!that.source.get('params.invalid')) {
-                            var addressData = that.source.get('billingAddress');
-                            var additionalData = that.checkUseForShipping(that.useForShipping);
-                            /**
-                             * All the the input fields that are not a part of the address but need to be submitted
-                             * in the same request must have data-scope attribute set
-                             */
-                            var additionalFields = $('input[data-scope="additionalAddressData"]').serializeArray();
-                            additionalFields.forEach(function (field) {
-                                additionalData[field.name] = field.value;
-                            });
-                            if (quote.getCheckoutMethod()() && !customer.isLoggedIn()()) {
-                                addressData.email = that.source.get('customerDetails.email');
-                            }
-                            if($(billingFormSelector).validation() && $(billingFormSelector).validation('isValid')) {
-                                selectBillingAddress(addressData, that.useForShipping, additionalData);
-                            }
+                    if (!this.source.get('params.invalid')) {
+                        var addressData = this.source.get('billingAddress');
+                        /**
+                         * All the the input fields that are not a part of the address (e. g. CAPTCHA) but need to be
+                         * submitted in the same request must have data-scope attribute set
+                         */
+                        var additionalFields = $('input[data-scope="additionalAddressData"]').serializeArray();
+                        additionalFields.forEach(function (field) {
+                            additionalData[field.name] = field.value;
+                        });
+                        if (quote.getCheckoutMethod()() && !customer.isLoggedIn()()) {
+                            addressData.email = this.source.get('customerDetails.email');
+                        }
+                        if($(billingFormSelector).validation() && $(billingFormSelector).validation('isValid')) {
+                            selectBillingAddress(addressData, this.useForShipping, additionalData);
                         }
-                    }).fail( function() {
-                        alert(
-                            "There is already a registered customer using this email address. " +
-                            "Please log in using this email address or enter a different email address " +
-                            "to register your account."
-                        );
-                    });
+                    }
                 }
             },
             navigateToCurrentStep: function() {
@@ -103,11 +103,7 @@ define(
                 return newAddressSelected();
             },
             onAddressChange: function (value) {
-                if (value === null) {
-                    newAddressSelected(true);
-                } else {
-                    newAddressSelected(false);
-                }
+                value() === null ? newAddressSelected(true) : newAddressSelected(false);
             },
             validate: function() {
                 var fields = $(billingFormSelector).find('input, select');
@@ -116,7 +112,6 @@ define(
                 fields.trigger('change');
                 this.source.trigger('billingAddress.data.validate');
                 this.validateAdditionalAddressFields();
-                this.isEmailCheckComplete.resolve();
             },
             validateAdditionalAddressFields: function() {
                 $(billingFormSelector).validation();

app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address.js

@@ -12,7 +12,8 @@ define(
         'Magento_Customer/js/model/customer',
         '../model/quote',
         'Magento_Checkout/js/model/step-navigator',
-        '../model/addresslist'
+        '../model/addresslist',
+        'mage/translate'
     ],
     function($, Component, ko, selectShippingAddress, customer, quote, navigator, addressList) {
         'use strict';
@@ -21,14 +22,27 @@ define(
         return Component.extend({
             defaults: {
                 template: 'Magento_Checkout/shipping-address',
-                visible: true
+                visible: true,
+                formVisible: customer.getShippingAddressList().length === 0
             },
             stepClassAttributes: function() {
                 return navigator.getStepClassAttributes(stepName);
             },
             stepNumber: navigator.getStepNumber(stepName),
-            addresses: customer.getShippingAddressList(),
-            selectedAddressId: ko.observable(addressList.getAddresses()[0].customerAddressId),
+            addresses: function() {
+                var newAddress = {
+                        getAddressInline: function() {
+                            return $.mage.__('New address');
+                        },
+                        customerAddressId: null
+                    },
+                    addresses = addressList.getAddresses();
+                addresses.push(newAddress);
+                return addresses;
+            },
+            selectedAddressId: ko.observable(
+                addressList.getAddresses().length ? addressList.getAddresses()[0].customerAddressId : null
+            ),
             sameAsBilling: ko.observable(null),
             quoteHasBillingAddress: quote.getBillingAddress(),
             isVisible: navigator.isStepVisible(stepName),
@@ -94,10 +108,10 @@ define(
             },
             onAddressChange: function() {
                 var billingAddress = quote.getBillingAddress();
-                if (this.selectedAddressId() != billingAddress().customerAddressId) {
+                if (this.selectedAddressId() !== billingAddress().customerAddressId) {
                     this.sameAsBilling(false);
                 }
-                if (this.selectedAddressId() == null) {
+                if (this.selectedAddressId() === null) {
                     newAddressSelected(true);
                 } else {
                     newAddressSelected(false);

app/code/Magento/Checkout/view/frontend/web/template/billing-address.html

@@ -16,7 +16,7 @@ <h2 data-bind="text: $t('Billing Information')"></h2>
                 <label class="label" for="billing:address-select"><span data-bind="text: $t('Select a billing address from your address book or enter a new address.')"></span></label>
                 <div class="control">
                     <select name="billing_address_id" id="billing:address-select" data-bind="
-                        options: billingAddresses,
+                        options: billingAddresses(),
                         optionsText: billingAddressesOptionsText,
                         optionsValue: 'customerAddressId',
                         value: selectedBillingAddressId,

app/code/Magento/Checkout/view/frontend/web/template/shipping-address.html

@@ -22,7 +22,7 @@ <h2 data-bind="text: $t('Shipping Information')"></h2>
                 <label class="label" for="shipping:address-select"><span data-bind="text: $t('Select a shipping address from your address book or enter a new address.')"></span></label>
                 <div class="control">
                     <select name="shipping_address_id" id="shipping:address-select" data-bind="
-                    options: addresses,
+                    options: addresses(),
                     optionsText: function(item) { return item.getAddressInline(); },
                     optionsValue: 'customerAddressId',
                     value: selectedAddressId,
@@ -33,7 +33,7 @@ <h2 data-bind="text: $t('Shipping Information')"></h2>
             </div>
             <!-- /ko -->
             <fieldset id="shipping-new-address-form" class="fieldset address"
-                      data-bind="fadeVisible: isNewAddressSelected(), visible: visible">
+                      data-bind="fadeVisible: isNewAddressSelected(), visible: formVisible">
             <!-- ko foreach: getRegion('additional-fieldsets') -->
             <!-- ko template: getTemplate() --><!-- /ko -->
             <!--/ko-->