Bugfix/13911 order edit duplicate tabs

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Improved the performance of the `craft\commerce\elements\db\VariantQuery::hasProduct()` and `craft\commerce\elements\db\ProductQuery::hasVariant()` query params. ([#3325](https://github.com/craftcms/commerce/pull/3325))
 - Order statuses with long names no longer line wrap on the Orders index page. ([#3335](https://github.com/craftcms/commerce/issues/3335))
 - Fixed duplicate validate errors that occurred when submitting a zero quantity to the cart. ([3334](https://github.com/craftcms/commerce/issues/3334))
+- Fixed a bug where tab selection was inconsistent on the Edit Order page. 
 
 ## 4.3.2 - 2023-10-31
 

src/web/assets/commerceui/src/js/order/apps/OrderActions.vue

@@ -51,7 +51,7 @@
         },
 
         methods: {
-            ...mapActions(['edit']),
+            ...mapActions(['edit', 'handleTabs']),
 
             cancel() {
                 window.location.reload();
@@ -69,6 +69,12 @@
                 }
             });
 
+            // re-init the tabs after hiding the non-static ones
+            // see: https://github.com/craftcms/cms/issues/13911 for more details
+            Craft.cp.initTabs();
+            // and handle tabs dropdown
+            this.handleTabs();
+
             // For custom tabs, if the selected tab is dynamic, find corresponding static tab and select it instead.
             const $selectedTabLink = window.document.querySelector(
                 '#tabs a.custom-tab.sel'

src/web/assets/commerceui/src/js/order/store/index.js

@@ -262,6 +262,37 @@ export default new Vuex.Store({
       let $transactionsTabContent =
         window.document.querySelector('#transactionsTab');
       $transactionsTabContent.classList.add('hidden');
+
+      // for the dropdown tab menu
+      const tabManager = Craft.cp.tabManager;
+      const tabsDropdownMenu = tabManager.$menuBtn.data('menubtn').menu;
+      const transactionsOption = tabsDropdownMenu.$container.find(
+        '[data-id="order-transactions"]'
+      );
+
+      // this will disable clicking on the transactions option in the dropdown tab menu
+      if (transactionsOption.length > 0) {
+        $(transactionsOption)
+          .disable()
+          .attr('disabled', 'disabled')
+          .css('pointer-events', 'none');
+      }
+
+      // and this is a fallback for selecting the transactions tab differently
+      let $prevSelectedTab = null;
+      let $selectedTab = tabManager.$selectedTab[0];
+
+      tabManager.on('selectTab', function (ev) {
+        $prevSelectedTab = $selectedTab;
+        $selectedTab = $(ev.$tab[0]);
+      });
+
+      tabsDropdownMenu.on('optionselect', function (ev) {
+        let $selectedOption = $(ev.selectedOption);
+        if ($selectedOption.data('id') === 'order-transactions') {
+          $prevSelectedTab.trigger('click');
+        }
+      });
     },
 
     edit({commit, state, dispatch}) {
@@ -330,6 +361,39 @@ export default new Vuex.Store({
 
       // Update `editing` state
       commit('updateEditing', true);
+
+      // handle duplicate content (fields) tabs
+      dispatch('handleTabs');
+    },
+
+    handleTabs({state}) {
+      const tabManagerMenuBtn = Craft.cp.tabManager.$menuBtn.data('menubtn');
+      const tabsDropdownMenu = tabManagerMenuBtn.menu;
+      if (tabsDropdownMenu !== undefined) {
+        const optionSelector =
+          '[id^="' + tabsDropdownMenu.menuId + '-option-"]';
+
+        const staticOptions = tabsDropdownMenu.$container.find(
+          optionSelector + '[data-id^="static-fields-"]'
+        );
+        const fieldsOptions = tabsDropdownMenu.$container.find(
+          optionSelector + '[data-id^="fields-"]'
+        );
+
+        if (state.editing) {
+          staticOptions.disable();
+          staticOptions.parent().addClass('hidden');
+
+          fieldsOptions.enable();
+          fieldsOptions.parent().removeClass('hidden');
+        } else {
+          staticOptions.enable();
+          staticOptions.parent().removeClass('hidden');
+
+          fieldsOptions.disable();
+          fieldsOptions.parent().addClass('hidden');
+        }
+      }
     },
 
     getOrder({state, commit}) {