8410: Custom Checkout Step and Shipping Step are Highlighted

Author: omiroshnichenko

app/code/Magento/Checkout/view/frontend/web/js/model/step-navigator.js

@@ -66,7 +66,7 @@ define([
          * @param {*} sortOrder
          */
         registerStep: function (code, alias, title, isVisible, navigate, sortOrder) {
-            var hash;
+            var hash, active;
 
             if ($.inArray(code, this.validCodes) !== -1) {
                 throw new DOMException('Step code [' + code + '] already registered in step navigator');
@@ -87,6 +87,12 @@ define([
                 navigate: navigate,
                 sortOrder: sortOrder
             });
+            active = this.getActiveItemIndex();
+            steps.each(function (elem, index) {
+                if (active !== index) {
+                    elem.isVisible(false);
+                }
+            });
             this.stepCodes.push(code);
             hash = window.location.hash.replace('#', '');
 
@@ -111,10 +117,14 @@ define([
         getActiveItemIndex: function () {
             var activeIndex = 0;
 
-            steps.sort(this.sortItems).forEach(function (element, index) {
+            steps.sort(this.sortItems).some(function (element, index) {
                 if (element.isVisible()) {
                     activeIndex = index;
+
+                    return true;
                 }
+
+                return false;
             });
 
             return activeIndex;

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

@@ -46,22 +46,8 @@ define([
 
         /** @inheritdoc */
         initialize: function () {
-            var self = this;
-
             this._super();
             checkoutDataResolver.resolvePaymentMethod();
-
-            //If some step is active this step will become inactive.
-            if (stepNavigator.steps()) {
-                stepNavigator.steps().some(function (element) {
-                    if (element.isVisible()) {
-                        self.isVisible(false);
-
-                        return true;
-                    }
-                });
-            }
-
             stepNavigator.registerStep(
                 'payment',
                 null,

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

@@ -82,17 +82,6 @@ define([
             this._super();
 
             if (!quote.isVirtual()) {
-                //If some step is active this step will become inactive.
-                if (stepNavigator.steps()) {
-                    stepNavigator.steps().some(function (element) {
-                        if (element.isVisible()) {
-                            self.visible(false);
-
-                            return true;
-                        }
-                    });
-                }
-
                 stepNavigator.registerStep(
                     'shipping',
                     '',

dev/tests/js/jasmine/tests/app/code/Magento/Checkout/frontend/js/view/shipping.test.js

@@ -42,7 +42,7 @@ define(['squire', 'ko', 'jquery', 'jquery/validate'], function (Squire, ko, $) {
             'Magento_Checkout/js/action/select-shipping-method': jasmine.createSpy(),
             'Magento_Checkout/js/model/shipping-rate-registry': jasmine.createSpy(),
             'Magento_Checkout/js/action/set-shipping-information': jasmine.createSpy(),
-            'Magento_Checkout/js/model/step-navigator': jasmine.createSpyObj('navigator', ['registerStep', 'steps']),
+            'Magento_Checkout/js/model/step-navigator': jasmine.createSpyObj('navigator', ['registerStep']),
             'Magento_Ui/js/modal/modal': jasmine.createSpy('modal').and.returnValue(modalStub),
             'Magento_Checkout/js/model/checkout-data-resolver': jasmine.createSpyObj(
                 'dataResolver',