ENGCOM-3540: [Backport] #13157 - Last Ordered Items block - bad js code #19357

 - Merge Pull Request #19357 from gelanivishal/magento2:2.2-develop-PR-port-19039
 - Merged commits:
   1. 7559e3e
   2. 58550b9
   3. f1bb98e

Author: magento-engcom-team

app/code/Magento/Sales/view/frontend/templates/reorder/sidebar.phtml

@@ -26,14 +26,18 @@
             <ol id="cart-sidebar-reorder" class="product-items product-items-names"
                 data-bind="foreach: lastOrderedItems().items">
                 <li class="product-item">
-                    <div class="field item choice no-display" data-bind="css: {'no-display': !is_saleable}">
+                    <div class="field item choice">
                         <label class="label" data-bind="attr: {'for': 'reorder-item-' + id}">
                             <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                         </label>
                         <div class="control">
                             <input type="checkbox" name="order_items[]"
-                                   data-bind="attr: {id: 'reorder-item-' + id, value: id}"
-                                   title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>"
+                                   data-bind="attr: {
+                                        id: 'reorder-item-' + id,
+                                        value: id,
+                                        title: is_saleable ? '<?= /* @escapeNotVerified */ __('Add to Cart') ?>' : '<?= /* @escapeNotVerified */ __('Product is not salable.') ?>'
+                                   },
+                                   disable: !is_saleable"
                                    class="checkbox" data-validate='{"validate-one-checkbox-required-by-name": true}'/>
                         </div>
                     </div>
@@ -46,8 +50,8 @@
             </ol>
             <div id="cart-sidebar-reorder-advice-container"></div>
             <div class="actions-toolbar">
-                <div class="primary no-display"
-                     data-bind="css: {'no-display': !lastOrderedItems().isShowAddToCart}">
+                <div class="primary"
+                     data-bind="visible: isShowAddToCart">
                     <button type="submit" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>" class="action tocart primary">
                         <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                     </button>

app/code/Magento/Sales/view/frontend/web/js/view/last-ordered-items.js

@@ -5,27 +5,43 @@
 
 define([
     'uiComponent',
-    'Magento_Customer/js/customer-data'
-], function (Component, customerData) {
+    'Magento_Customer/js/customer-data',
+    'underscore'
+], function (Component, customerData, _) {
     'use strict';
 
     return Component.extend({
+        defaults: {
+            isShowAddToCart: false
+        },
+
         /** @inheritdoc */
         initialize: function () {
-            var isShowAddToCart = false,
-                item;
-
             this._super();
             this.lastOrderedItems = customerData.get('last-ordered-items');
+            this.lastOrderedItems.subscribe(this.checkSalableItems.bind(this));
+            this.checkSalableItems();
+
+            return this;
+        },
+
+        /** @inheritdoc */
+        initObservable: function () {
+            this._super()
+                .observe('isShowAddToCart');
+
+            return this;
+        },
 
-            for (item in this.lastOrderedItems.items) {
-                if (item['is_saleable']) {
-                    isShowAddToCart = true;
-                    break;
-                }
-            }
+        /**
+         * Check if items is_saleable and change add to cart button visibility.
+         */
+        checkSalableItems: function () {
+            var isShowAddToCart = _.some(this.lastOrderedItems().items, {
+                'is_saleable': true
+            });
 
-            this.lastOrderedItems.isShowAddToCart = isShowAddToCart;
+            this.isShowAddToCart(isShowAddToCart);
         }
     });
 });