Merge pull request #418 from magento-folks/checkout

[Folks] Enhanced Checkout Flow. Part III

Author: Akimov, Alexander(aakimov)

app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

@@ -4,8 +4,9 @@
  */
 define([
     'jquery',
+    'mage/translate',
     'jquery/ui'
-], function($) {
+], function($, $t) {
     "use strict";
 
     $.widget('mage.catalogAddToCart', {
@@ -16,7 +17,13 @@ define([
             bindSubmit: true,
             minicartSelector: '[data-block="minicart"]',
             messagesSelector: '[data-placeholder="messages"]',
-            productStatusSelector: '.stock.available'
+            productStatusSelector: '.stock.available',
+            addToCartButtonSelector: '.action.tocart',
+            addToCartButtonDisabledClass: 'disabled',
+            addToCartButtonTextWhileAdding: $t('Adding...'),
+            addToCartButtonTextAdded: $t('Added'),
+            addToCartButtonTextDefault: $t('Add to Cart')
+
         },
 
         _create: function() {
@@ -49,6 +56,9 @@ define([
 
         ajaxSubmit: function(form) {
             var self = this;
+            $(self.options.minicartSelector).trigger('contentLoading');
+            self.disableAddToCartButton(form);
+
             $.ajax({
                 url: form.attr('action'),
                 data: form.serialize(),
@@ -82,8 +92,30 @@ define([
                             .find('span')
                             .html(res.product.statusText);
                     }
+                    self.enableAddToCartButton(form);
                 }
             });
+        },
+
+        disableAddToCartButton: function(form) {
+            var addToCartButton = $(form).find(this.options.addToCartButtonSelector);
+            addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
+            addToCartButton.attr('title', this.options.addToCartButtonTextWhileAdding);
+            addToCartButton.find('span').text(this.options.addToCartButtonTextWhileAdding);
+        },
+
+        enableAddToCartButton: function(form) {
+            var self = this,
+                addToCartButton = $(form).find(this.options.addToCartButtonSelector);
+
+            addToCartButton.find('span').text(this.options.addToCartButtonTextAdded);
+            addToCartButton.attr('title', this.options.addToCartButtonTextAdded);
+
+            setTimeout(function() {
+                addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
+                addToCartButton.find('span').text(self.options.addToCartButtonTextDefault);
+                addToCartButton.attr('title', self.options.addToCartButtonTextDefault);
+            }, 1000);
         }
     });
 

app/code/Magento/Checkout/Model/ShippingInformationManagement.php

@@ -94,7 +94,6 @@ public function __construct(
 
     /**
      * {@inheritDoc}
-     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      * @SuppressWarnings(PHPMD.NPathComplexity)
      */
     public function saveAddressInformation(
@@ -107,15 +106,7 @@ public function saveAddressInformation(
 
         /** @var \Magento\Quote\Model\Quote $quote */
         $quote = $this->quoteRepository->getActive($cartId);
-        if ($quote->isVirtual()) {
-            throw new NoSuchEntityException(
-                __('Cart contains virtual product(s) only. Shipping address is not applicable.')
-            );
-        }
-
-        if (0 == $quote->getItemsCount()) {
-            throw new InputException(__('Shipping method is not applicable for empty cart'));
-        }
+        $this->validateQuote($quote);
 
         $saveInAddressBook = $address->getSaveInAddressBook() ? 1 : 0;
         $sameAsBilling = $address->getSameAsBilling() ? 1 : 0;
@@ -139,6 +130,7 @@ public function saveAddressInformation(
         $address->setShippingMethod($carrierCode . '_' . $methodCode);
 
         try {
+            /** TODO: refactor this code. Eliminate save operation */
             $address->save();
             $address->collectTotals();
         } catch (\Exception $e) {
@@ -175,4 +167,25 @@ public function saveAddressInformation(
         $paymentDetails->setTotals($this->cartTotalsRepository->get($cartId));
         return $paymentDetails;
     }
+
+    /**
+     * Validate quote
+     *
+     * @param \Magento\Quote\Model\Quote $quote
+     * @throws InputException
+     * @throws NoSuchEntityException
+     * @return void
+     */
+    protected function validateQuote(\Magento\Quote\Model\Quote $quote)
+    {
+        if ($quote->isVirtual()) {
+            throw new NoSuchEntityException(
+                __('Cart contains virtual product(s) only. Shipping address is not applicable.')
+            );
+        }
+
+        if (0 == $quote->getItemsCount()) {
+            throw new InputException(__('Shipping method is not applicable for empty cart'));
+        }
+    }
 }

app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml

@@ -9,12 +9,12 @@
 /** @var $block \Magento\Checkout\Block\Cart\Sidebar */
 ?>
 
-<div data-block="minicart" class="minicart-wrapper" >
+<div data-block="minicart" class="minicart-wrapper">
     <a class="action showcart" href="<?php echo $block->getShoppingCartUrl(); ?>"
        data-bind="scope: 'minicart_content'">
         <span class="text"><?php echo __('My Cart'); ?></span>
         <span class="counter qty empty"
-              data-bind="css: { empty: cart().summary_count == 0 }">
+              data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">
             <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
             <span class="counter-label">
             <!-- ko if: cart().summary_count -->

app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js

@@ -13,7 +13,7 @@ define([
     'use strict';
 
     var sidebarInitialized = false;
-
+    var addToCartCalls = 0;
     url.setBaseUrl(window.checkout.baseUrl);
 
     function initSidebar() {
@@ -60,12 +60,20 @@ define([
     return Component.extend({
         shoppingCartUrl: window.checkout.shoppingCartUrl,
         initialize: function () {
+            var self = this;
             this._super();
             this.cart = customerData.get('cart');
             this.cart.subscribe(function () {
+                addToCartCalls--;
+                this.isLoading(addToCartCalls > 0);
                 sidebarInitialized = false;
+            }, this);
+            $('[data-block="minicart"]').on('contentLoading', function(event) {
+                addToCartCalls++;
+                self.isLoading(true);
             });
         },
+        isLoading: ko.observable(false),
         initSidebar: ko.observable(initSidebar),
         closeSidebar: function() {
             var minicart = $('[data-block="minicart"]');

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

@@ -45,7 +45,10 @@ define(
             /**
              * Place order.
              */
-            placeOrder: function () {
+            placeOrder: function (data, event) {
+                if (event) {
+                    event.preventDefault();
+                }
                 var self = this,
                     placeOrder,
                     emailValidationResult = customer.isLoggedIn(),
@@ -61,7 +64,9 @@ define(
                     $.when(placeOrder).fail(function(){
                         self.isPlaceOrderActionAllowed(true);
                     });
+                    return true;
                 }
+                return false;
             },
 
             selectPaymentMethod: function() {

app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method.js

@@ -36,7 +36,7 @@ define(
 
             },
             validate: function () {
-                var form = '#purchaseorder';
+                var form = 'form[data-role=purchaseorder-form]';
                 return $(form).validation() && $(form).validation('isValid');
             }
         });

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

@@ -5,7 +5,7 @@
  */
 -->
 <div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
-    <form id="purchaseorder-form" class="form form-purchase-order">
+    <form id="purchaseorder-form" class="form form-purchase-order" data-role="purchaseorder-form">
 
         <div class="payment-method-title field choice">
             <input type="radio"

app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html

@@ -31,10 +31,12 @@
                 <!--/ko-->
             </ul>
             <input type="hidden"
-                   name="payment[cc_number]"
+                   name="payment[cc_type]"
                    class="input-text"
                    value=""
-                   data-bind="attr: {id: getCode() + '_cc_type'}, value: creditCardType">
+                   data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},
+                   value: creditCardType
+                   ">
         </div>
     </div>
     <div class="field number required">

app/code/Magento/Paypal/view/frontend/web/js/view/payment/method-renderer/iframe-methods.js

@@ -28,8 +28,14 @@ define(
              * Places order in pending payment status.
              */
             placePendingPaymentOrder: function () {
-                this.placeOrder(false);
-                this.isInAction(true);
+                if (this.placeOrder()) {
+                    this.isInAction(true);
+                    // capture all click events
+                    document.addEventListener('click', function(event) {
+                        event.stopImmediatePropagation();
+                        event.preventDefault();
+                    }, true);
+                }
             }
         });
     }