Fix open Contact tab from "customers only" message

app/assets/javascripts/templates/partials/hub_details.html.haml

@@ -14,7 +14,7 @@
             {{'hubs_delivery' | t}}
     .row
       .columns.small-12
-        %a.cta-hub{"ng-href" => "{{::enterprise.path}}#/shop", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}",
+        %a.cta-hub{"ng-href" => "{{::enterprise.path}}#/shop_panel", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}",
         "ng-class" => "{primary: enterprise.active, secondary: !enterprise.active}",
         "ng-click" => "$close()",
         "ofn-change-hub" => "enterprise"}

app/assets/javascripts/templates/partials/producer_details.html.haml

@@ -12,7 +12,7 @@
     .row
       .columns.small-12
         %a.cta-hub{"ng-repeat" => "hub in enterprise.hubs | filter:{id: '!'+enterprise.id} | orderBy:'-active'",
-        "ng-href" => "{{::hub.path}}#/shop", "ofn-empties-cart" => "hub",
+        "ng-href" => "{{::hub.path}}#/shop_panel", "ofn-empties-cart" => "hub",
         "ng-class" => "::{primary: hub.active, secondary: !hub.active}",
         "ng-click" => "$close()",
         "ofn-change-hub" => "hub"}

app/helpers/shared_helper.rb

@@ -20,6 +20,6 @@ def admin_user?
   end
 
   def current_shop_products_path
-    "#{main_app.enterprise_shop_path(current_distributor)}#/shop"
+    "#{main_app.enterprise_shop_path(current_distributor)}#/shop_panel"
   end
 end

app/views/admin/shared/_side_menu.html.haml

@@ -2,12 +2,12 @@
   - if @enterprise
     - enterprise_side_menu_items(@enterprise).each do |item|
     - next if !item[:show] || (item[:name] == 'vouchers' && !feature?(:vouchers, spree_current_user, @enterprise))
-      %a.menu_item{ href: item[:href] || "##{item[:name]}_panel", id: item[:name], data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" }, class: item[:selected] }
+      %a.menu_item{ href: item[:href] || "##{item[:name]}_panel", data: { action: "tabs-and-panels#activate", "tabs-and-panels-target": "tab", test: "link_for_#{item[:name]}" }, class: item[:selected] }
         %i{ class: item[:icon_class] }
         %span= t(".enterprise.#{item[:name] }")
   - else
     - enterprise_group_side_menu_items.each do |item|
-      %a.menu_item{ href: "##{item[:name]}_panel", class: item[:selected], id: item[:name], data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" } }
+      %a.menu_item{ href: "##{item[:name]}_panel", class: item[:selected], data: { action: "tabs-and-panels#activate", "tabs-and-panels-target": "tab", test: "link_for_#{item[:name]}" } }
         %i{ class: item[:icon_class] }
         %span= t(".enterprise_group.#{item[:name] }")
 

app/views/shop/messages/_customer_required.html.haml

@@ -8,6 +8,6 @@
         %p
           = t('.require_login_link_html', login: ('<a data-action="click->login-modal#call">' + t('.login') + '</a>').html_safe)
         %p
-          = t('.require_login_2_html', contact: link_to(t('.contact'), '#contact'), enterprise: current_distributor.name)
+          = t('.require_login_2_html', contact: link_to(t('.contact'), '#contact_panel', data: { action: "tabs-and-panels#activate" }), enterprise: current_distributor.name)
       - else
-        = t('.require_customer_html', contact: link_to(t('.contact'), '#contact'), enterprise: current_distributor.name)
+        = t('.require_customer_html', contact: link_to(t('.contact'), '#contact_panel', data: { action: "tabs-and-panels#activate" }), enterprise: current_distributor.name)

app/views/shopping_shared/_tabs.html.haml

@@ -1,12 +1,12 @@
 - if (@order&.distributor || current_distributor) == current_distributor
 
-  #shop-tabs{"data-controller": "tabs-and-panels shop-tabs", "data-tabs-and-panels-class-name-value": "selected"}
+  #shop-tabs{"data-controller": "tabs-and-panels", "data-action": "orderCycleSelected@window->tabs-and-panels#activateDefaultPanel", "data-tabs-and-panels-class-name-value": "selected"}
     .tab-buttons
       .flex.row
         .columns.small-12.large-8
           - shop_tabs.each do |tab|
             .page
-              %a{ id: tab[:name], href: "##{tab[:name]}_panel", data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" }, class: ("selected" if tab[:default]) }=tab[:title]
+              %a{ href: "##{tab[:name]}_panel", data: { action: "tabs-and-panels#activate", "tabs-and-panels-target": "tab" }, class: ("selected" if tab[:default]) }=tab[:title]
         .columns.large-4.show-for-large-up
           = render partial: "shopping_shared/order_cycles"
     - shop_tabs.each do |tab|

app/views/spree/orders/form/_update_buttons.html.haml

@@ -6,7 +6,7 @@
           = t(:order_back_to_cart)
       - else
         .columns.small-12.medium-6
-          = link_to "#{main_app.enterprise_shop_path(@order.distributor)}#/shop", class: "button expand" do
+          = link_to "#{main_app.enterprise_shop_path(@order.distributor)}#/shop_panel", class: "button expand" do
             = t(:order_back_to_store)
         .columns.small-12.medium-6
           - if @order.distributor.website.present?

app/webpacker/controllers/tabs_and_panels_controller.js

@@ -5,93 +5,46 @@ export default class extends Controller {
   static values = { className: String };
 
   connect() {
-    // hide all active panel
-    this.panelTargets.forEach((panel) => {
-      panel.style.display = "none";
-    });
-
-    // only display the default panel
-    this.defaultTarget.style.display = "block";
-
-    // Display panel specified in url anchor
-    const anchors = window.location.toString().split("#");
-    let anchor = anchors.length > 1 ? anchors.pop() : "";
-
-    if (anchor != "") {
-      // Conveniently AngularJs rewrite "example.com#panel" to "example.com#/panel" :(
-      // strip the starting / if any
-      if (anchor[0] == "/") {
-        anchor = anchor.slice(1);
-      }
-      // Add _panel to the anchor to match the panel id if needed
-      if (!anchor.includes("_panel")) {
-        anchor = `${anchor}_panel`;
-      }
-      this.updateActivePanel(anchor);
-
-      // tab
-      const tab_id = anchor.split("_panel").shift();
-      this.updateActiveTab(tab_id);
-    }
-
-    window.addEventListener("tabs-and-panels:click", (event) => {
-      this.simulateClick(event.detail.tab, event.detail.panel);
-    });
+    this._activateFromWindowLocationOrDefaultPanelTarget();
 
     window.addEventListener("popstate", (event) => {
-      const newPanelId = event.target.location.hash.replace("#/", "");
-      const currentPanelId = this.currentActivePanel.id;
-
-      if (newPanelId !== currentPanelId) {
-        const newTabId = newPanelId.split("_panel").shift();
-        this.simulateClick(newTabId, newPanelId);
-      }
+      this._activateFromWindowLocationOrDefaultPanelTarget();
     });
   }
 
-  simulateClick(tab, panel) {
-    this.updateActivePanel(panel);
-    this.updateActiveTab(tab);
-  }
-
-  changeActivePanel(event) {
-    this.updateActivePanel(`${event.currentTarget.id}_panel`);
-  }
-
-  updateActivePanel(panel_id) {
-    const newActivePanel = this.panelTargets.find((panel) => panel.id == panel_id);
-
-    if (newActivePanel === undefined) {
-      // No panel found
-      return;
+  _activateFromWindowLocationOrDefaultPanelTarget() {
+    // Conveniently AngularJs rewrite "example.com#panel" to "example.com#/panel"
+    const hashWithoutSlash = window.location.hash.replace("/", "");
+    const tabWithSameHash = this.tabTargets.find((tab) => tab.hash == hashWithoutSlash);
+    if (hashWithoutSlash != "" && tabWithSameHash) {
+      this._activateByHash(tabWithSameHash.hash);
+    } else {
+      this._activateByHash(`#${this.defaultTarget.id}`);
     }
-
-    this.currentActivePanel.style.display = "none";
-    newActivePanel.style.display = "block";
   }
 
-  changeActiveTab(event) {
-    this.currentActiveTab.classList.remove(`${this.classNameValue}`);
-    event.currentTarget.classList.add(`${this.classNameValue}`);
-  }
-
-  updateActiveTab(tab_id) {
-    const newActiveTab = this.tabTargets.find((tab) => tab.id == tab_id);
-
-    if (newActiveTab === undefined) {
-      // No tab found
-      return;
-    }
-
-    this.currentActiveTab.classList.remove(`${this.classNameValue}`);
-    newActiveTab.classList.add(`${this.classNameValue}`);
+  activate(event) {
+    this._activateByHash(event.currentTarget.hash);
   }
 
-  get currentActiveTab() {
-    return this.tabTargets.find((tab) => tab.classList.contains("selected"));
+  activateDefaultPanel() {
+    this._activateByHash(`#${this.defaultTarget.id}`);
   }
 
-  get currentActivePanel() {
-    return this.panelTargets.find((panel) => panel.id == `${this.currentActiveTab.id}_panel`);
+  _activateByHash(hash) {
+    this.tabTargets.forEach((tab) => {
+      if (tab.hash == hash) {
+        tab.classList.add(this.classNameValue);
+      } else {
+        tab.classList.remove(this.classNameValue);
+      }
+    });
+    this.panelTargets.forEach((panel) => {
+      if (panel.id == hash.replace("#", "")) {
+        panel.style.display = "block";
+      } else {
+        panel.style.display = "none";
+      }
+    });
   }
 }