MAGETWO-39446: "Place Order" button should be disabled until billing address is set

Author: Stanislav Idolov

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

@@ -18,7 +18,8 @@ define(
     function (ko, Component, customer, addressList, quote, createBillingAddress, selectBillingAddress, $t) {
         "use strict";
 
-        var newAddressOption = {
+        var lastSelectedBillingAddress = null,
+            newAddressOption = {
             getAddressInline: function() {
                 return $t('New Address');
             },
@@ -71,6 +72,8 @@ define(
                     selectBillingAddress(quote.shippingAddress());
                     this.isAddressDetailsVisible(true);
                 } else {
+                    lastSelectedBillingAddress = quote.billingAddress();
+                    quote.billingAddress(null);
                     this.isAddressDetailsVisible(false);
                 }
                 return true;
@@ -97,10 +100,13 @@ define(
             },
 
             editAddress: function () {
+                lastSelectedBillingAddress = quote.billingAddress();
+                quote.billingAddress(null);
                 this.isAddressDetailsVisible(false);
             },
 
             cancelAddressEdit: function () {
+                this.restoreBillingAddress();
                 if (quote.billingAddress()) {
                     // restore 'Same As Shipping' checkbox state
                     this.isAddressSameAsShipping(
@@ -110,6 +116,12 @@ define(
                 }
             },
 
+            restoreBillingAddress: function() {
+                if (lastSelectedBillingAddress != null) {
+                    selectBillingAddress(lastSelectedBillingAddress);
+                }
+            },
+
             onAddressChange: function (address) {
                 this.isAddressFormVisible(address == newAddressOption);
             }

app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js

@@ -17,13 +17,19 @@ define(
         'use strict';
         return Component.extend({
             redirectAfterPlaceOrder: true,
+            isPlaceOrderActionAllowed: ko.observable(true),
             /**
              * Initialize view.
              *
              * @returns {Component} Chainable.
              */
             initialize: function () {
                 this._super().initChildren();
+
+                quote.billingAddress.subscribe(function(address) {
+                    this.isPlaceOrderActionAllowed((address !== null));
+                }, this);
+
                 return this;
             },
 

app/code/Magento/OfflinePayments/view/frontend/web/template/payment/banktransfer.html

@@ -29,7 +29,12 @@
             <div class="primary">
                 <button class="action primary checkout"
                         type="submit"
-                        data-bind="click: placeOrder, attr: {'title': $t('Place Order')}, enable: (getCode() == isChecked())"
+                        data-bind="
+                        click: placeOrder,
+                        attr: {'title': $t('Place Order')},
+                        enable: (getCode() == isChecked()),
+                        css: {disabled: !isPlaceOrderActionAllowed()}
+                        "
                         disabled>
                     <span data-bind="text: $t('Place Order')"></span>
                 </button>

app/code/Magento/OfflinePayments/view/frontend/web/template/payment/cashondelivery.html

@@ -29,7 +29,12 @@
             <div class="primary">
                 <button class="action primary checkout"
                         type="submit"
-                        data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (getCode() == isChecked())"
+                        data-bind="
+                        click: placeOrder,
+                        attr: {title: $t('Place Order')},
+                        enable: (getCode() == isChecked()),
+                        css: {disabled: !isPlaceOrderActionAllowed()}
+                        "
                         disabled>
                     <span data-bind="text: $t('Place Order')"></span>
                 </button>

app/code/Magento/OfflinePayments/view/frontend/web/template/payment/checkmo.html

@@ -41,7 +41,12 @@
             <div class="primary">
                 <button class="action primary checkout"
                         type="submit"
-                        data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (getCode() == isChecked())"
+                        data-bind="
+                        click: placeOrder,
+                        attr: {title: $t('Place Order')},
+                        css: {disabled: !isPlaceOrderActionAllowed()},
+                        enable: (getCode() == isChecked())
+                        "
                         disabled>
                     <span data-bind="text: $t('Place Order')"></span>
                 </button>

app/code/Magento/OfflinePayments/view/frontend/web/template/payment/purchaseorder-form.html

@@ -49,7 +49,12 @@
                     <div class="primary">
                         <button class="action primary checkout"
                                 type="submit"
-                                data-bind="click: placeOrder, attr: {title: $t('Place Order')}, enable: (getCode() == isChecked())"
+                                data-bind="
+                                click: placeOrder,
+                                attr: {title: $t('Place Order')},
+                                enable: (getCode() == isChecked()),
+                                css: {disabled: !isPlaceOrderActionAllowed()}
+                                "
                                 data-role="review-save">
                             <span data-bind="text: $t('Place Order')"></span>
                         </button>

app/code/Magento/Payment/view/frontend/web/template/payment/free.html

@@ -27,7 +27,11 @@
             <div class="primary">
                 <button class="action primary checkout"
                         type="submit"
-                        data-bind="click: placeOrder, attr: {title: $t('Place Order')}">
+                        data-bind="
+                        click: placeOrder,
+                        attr: {title: $t('Place Order')},
+                        css: {disabled: !isPlaceOrderActionAllowed()}
+                        ">
                     <span data-bind="text: $t('Place Order')"></span>
                 </button>
             </div>

app/code/Magento/Payment/view/frontend/web/template/payment/iframe.html

@@ -30,7 +30,9 @@
     <div class="primary">
         <button data-role="review-save" type="submit"
                 data-bind="attr: {title: $t('Place order')}"
-                class="button action primary checkout"><span data-bind="text: $t('Place order')"></span></button>
+                class="button action primary checkout">
+            <span data-bind="text: $t('Place order')"></span>
+        </button>
         <button type="submit" id="originalPlaceOrder" class="hidden"
                 data-bind="click: originalPlaceOrder($parents[1])"></button>
     </div>