spree_backend 4.4.0 → 4.5.0

data/app/views/spree/admin/shared/_content_header.html.erb

@@ -1,15 +1,15 @@
-<div id="contentHeader" class="row mb-0 pb-0">
+<div id="contentHeader" class="row mb-0 pb-0 mt-4">
   <% if content_for?(:page_title) || content_for?(:page_actions) %>
     <div class="content-header col <%= "with-page-tabs" if content_for?(:page_tabs) %> page-header">
-      <div id="contentHeaderRow" class="row align-items-center  <%= if content_for?(:page_tabs) then "border-bottom pb-2" else "border-bottom pb-2 mb-3" end %>">
+      <div id="contentHeaderRow" class="row align-items-center  <%= if content_for?(:page_tabs) then "pb-3" else "pb-3 mb-3" end %>">
 
         <% if content_for?(:page_title) %>
-          <h1 class="contextual-title px-0 mb-0 col">
+          <h2 class="px-0 mb-0 col">
             <%= yield :page_title %>
             <% if content_for?(:page_title_small) %>
               <small><%= yield :page_title_small %></small>
             <% end %>
-          </h1>
+          </h2>
         <% end %>
 
         <% if content_for?(:page_actions) %>
@@ -18,11 +18,11 @@
           </div>
         <% end %>
 
-        <% if content_for?(:page_actions) || content_for?(:sidebar) %>
+        <% if content_for?(:page_actions) %>
           <div class="d-flex d-lg-none justify-content-end m-0 p-0">
             <button type="button"
                     id="contextual-menu-toggle"
-                    class="btn btn-outline-secondary shadow-none">
+                    class="btn btn-light">
                     <span class="d-none d-sm-inline">
                       <%= Spree.t('more') %>
                     </span>
@@ -33,8 +33,8 @@
       </div>
 
       <% if content_for?(:page_tabs) %>
-        <div class="row my-2 pb-1 pt-1 align-items-center" data-nav-x-wrapper>
-          <div data-nav-x-container>
+        <div class="row my-2 mb-3 pb-1 pt-1 align-items-center" data-nav-x-wrapper>
+          <div data-nav-x-container class="w-100">
             <ul id="spreePageTabs" class="nav nav-pills flex-nowrap" data-nav-x-content>
               <%= yield :page_tabs %>
             </ul>

data/app/views/spree/admin/shared/_head.html.erb

@@ -20,6 +20,7 @@
   <%== "var OAUTH_TOKEN = '#{admin_oauth_token}';" if defined?(admin_oauth_token) %>
   <%== "var ADDRESS_FIELDS = #{Spree::Address::ADDRESS_FIELDS}" %>
 </script>
+
 <%= render 'spree/admin/shared/paths' %>
 <%= javascript_include_tag "spree-dashboard", defer: true, data: { turbo_track: "reload" } %>
 <%= javascript_include_tag 'spree/backend/all', data: { turbo_track: "reload" } %>

data/app/views/spree/admin/shared/_header.html.erb

@@ -1,5 +1,5 @@
 <header class="header logged-in">
-  <nav class="navbar fixed-top navbar-dark flex-nowrap">
+  <nav class="navbar fixed-top navbar-dark flex-nowrap bg-primary p-0">
     <div class="col p-0 d-lg-none">
       <button
         id="sidebar-open"

data/app/views/spree/admin/shared/_main_menu.html.erb

@@ -1,8 +1,6 @@
-<nav>
+<nav class="pb-3 pt-lg-3 px-1">
   <div class="text-right d-lg-none pl-3 py-2 border-bottom d-flex align-items-center">
-    <div class="d-flex flex-grow-1 text-primary">
-      <%= svg_icon name: "spree-logo.svg", width: '70', height: '30' %>
-    </div>
+    <div class="d-flex flex-grow-1 text-primary"></div>
     <button
       id="sidebar-close"
       class="btn btn-link d-flex"
@@ -13,69 +11,83 @@
     </button>
   </div>
 
+  <ul class="nav nav-sidebar" id="sidebarDashboard">
+    <%= tab Spree.t('admin.home'), url: spree.admin_dashboard_path, match_path: '/dashboard', icon: 'house-door-fill.svg' %>
+  </ul>
+
   <% if can? :admin, Spree::Order %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarOrder">
-      <%= tab *Spree::BackendConfiguration::ORDER_TABS, url: admin_orders_path, icon: 'list.svg' %>
+    <ul class="nav nav-sidebar" id="sidebarOrder">
+      <%= main_menu_tree Spree.t(:orders), icon: "inbox-fill.svg", sub_menu: "orders", url: "#sidebar-orders" %>
     </ul>
   <% end %>
 
   <% if can?(:admin, Spree::ReturnAuthorization) || can?(:admin, Spree::CustomerReturn) %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarReturn">
-      <%= main_menu_tree Spree.t(:returns), icon: "returns.svg", sub_menu: "returns", url: "#sidebar-returns" %>
+    <ul class="nav nav-sidebar" id="sidebarReturn">
+      <%= main_menu_tree Spree.t(:returns), icon: "reply-fill.svg", sub_menu: "returns", url: "#sidebar-returns" %>
     </ul>
   <% end %>
 
   <% if can? :admin, Spree::Product %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarProduct">
-      <%= main_menu_tree Spree.t(:products), icon: "products.svg", sub_menu: "product", url: "#sidebar-product" %>
+    <ul class="nav nav-sidebar" id="sidebarProduct">
+      <%= main_menu_tree Spree.t(:products), icon: "tags-fill.svg", sub_menu: "product", url: "#sidebar-product" %>
     </ul>
   <% end %>
 
   <% if can?(:admin, Spree::StockLocation) || can?(:admin, Spree::StockTransfer) %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarStock">
-      <%= main_menu_tree Spree.t(:stock), icon: "box.svg", sub_menu: "stock", url: "#sidebar-stock" %>
+    <ul class="nav nav-sidebar" id="sidebarStock">
+      <%= main_menu_tree Spree.t(:stock), icon: "box-seam.svg", sub_menu: "stock", url: "#sidebar-stock" %>
     </ul>
   <% end %>
 
   <% if can? :admin, Spree::Admin::ReportsController %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarReport">
-      <%= tab *Spree::BackendConfiguration::REPORT_TABS, icon: 'report.svg' %>
+    <ul class="nav nav-sidebar" id="sidebarReport">
+      <%= tab *Spree::Backend::Configuration::REPORT_TABS, icon: 'pie-chart-fill.svg' %>
     </ul>
   <% end %>
 
   <% if can? :admin, Spree::Promotion %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarPromotion">
-      <%= main_menu_tree Spree.t(:promotions), icon: "promotion.svg", sub_menu: "promotion", url: "#sidebar-promotions" %>
+    <ul class="nav nav-sidebar" id="sidebarPromotion">
+      <%= main_menu_tree Spree.t(:promotions), icon: "percent.svg", sub_menu: "promotion", url: "#sidebar-promotions" %>
+    </ul>
+  <% end %>
+
+  <% if defined?(Spree::Vendor) && can?(:manage, Spree::Vendor) && can?(:index, Spree::Vendor) %>
+    <ul class="nav nav-sidebar" id="sidebarOrganizations">
+      <%= main_menu_tree Spree.t(:organizations), icon: "building.svg", sub_menu: "organizations", url: "#sidebar-organizations" %>
     </ul>
   <% end %>
 
   <% if Spree.user_class && can?(:admin, Spree.user_class) %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarUser">
-      <%= tab *Spree::BackendConfiguration::USER_TABS, url: spree.admin_users_path, icon: 'users.svg' %>
+    <ul class="nav nav-sidebar" id="sidebarUser">
+      <%= tab *Spree::Backend::Configuration::USER_TABS, url: spree.admin_users_path, icon: 'people-fill.svg' %>
     </ul>
   <% end %>
 
   <% if can? :admin, Spree::Menu %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarMenu">
-      <%= main_menu_tree Spree.t('admin.tab.content'), icon: "window-sidebar.svg", sub_menu: "content", url: "#sidebar-content" %>
+    <ul class="nav nav-sidebar" id="sidebarMenu">
+      <%= main_menu_tree Spree.t('admin.tab.content'), icon: "card-heading.svg", sub_menu: "content", url: "#sidebar-content" %>
     </ul>
   <% end %>
 
-  <% if can? :admin, Spree::Webhooks::Subscriber %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarIntegrations">
-      <%= main_menu_tree Spree.t('admin.tab.integrations'), icon: "enter.svg", sub_menu: "integrations", url: "#sidebar-integrations" %>
+  <% if can?(:admin, Spree::Webhooks::Subscriber) || can?(:admin, Spree::PaymentMethod) %>
+    <ul class="nav nav-sidebar" id="sidebarIntegrations">
+      <%= main_menu_tree Spree.t('admin.tab.integrations'), icon: "stack.svg", sub_menu: "integrations", url: "#sidebar-integrations" %>
     </ul>
   <% end %>
 
   <% if can? :admin, Spree::OauthApplication %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarApps">
-      <%= main_menu_tree Spree.t('admin.tab.apps'), icon: "extensions.svg", sub_menu: "apps", url: "#sidebar-apps" %>
+    <ul class="nav nav-sidebar" id="sidebarApps">
+      <%= main_menu_tree Spree.t('admin.tab.apps'), icon: "terminal-fill.svg", sub_menu: "apps", url: "#sidebar-apps" %>
     </ul>
   <% end %>
 
   <% if can? :admin, current_store %>
-    <ul class="nav nav-sidebar border-bottom" id="sidebarConfiguration">
-      <%= main_menu_tree Spree.t(:configurations), icon: "settings.svg", sub_menu: "configuration", url: "#sidebar-configuration" %>
+    <ul class="nav nav-sidebar" id="sidebarConfiguration">
+      <%= main_menu_tree Spree.t('admin.settings'), icon: "gear-fill.svg", sub_menu: "configuration", url: "#sidebar-configuration" %>
+    </ul>
+  <% elsif defined?(current_spree_vendor) && current_spree_vendor.present? %>
+    <ul class="nav nav-sidebar" id="sidebarConfiguration">
+      <%= main_menu_tree Spree.t('admin.settings'), icon: "gear-fill.svg", sub_menu: "vendor_configuration", url: "#sidebar-configuration" %>
     </ul>
   <% end %>
 </nav>

data/app/views/spree/admin/shared/_order_summary.html.erb

@@ -1,132 +1,124 @@
-<div class="card mb-3">
-  <div class="card-header">
-    <h3 class="card-title mb-0 h5"><%= Spree.t(:summary) %></h3>
-  </div>
-  <div class="table-responsive">
-  <table class="table table-condensed table-bordered" id="order_tab_summary" data-hook>
-    <tbody class="additional-info">
-      <tr>
-        <td id="order_status" width="35%" data-hook>
-          <strong><%= Spree.t(:status) %>:</strong>
-        </td>
-        <td>
-          <span class="state badge badge-<%= @order.state %> text-uppercase">
-            <%= Spree.t(@order.state, scope: :order_state) %>
+<% content_for(:sidebar) do %>
+  <div class="card mb-3" id="order_tab_summary">
+    <div class="card-header">
+      <h3 class="card-title mb-0 h6"><%= Spree.t(:summary) %></h3>
+    </div>
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <small><%= Spree.t(:status) %></small>
+        <span class="state badge badge-pill badge-<%= @order.state %> badge-pill text-capitalize" id="order_status">
+          <%= Spree.t(@order.state, scope: :order_state) %>
+        </span>
+      </li>
+
+      <% if @order.shipment_state.present? %>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small><%= Spree.t(:shipment) %></small>
+          <span class="state badge badge-pill badge-<%= @order.shipment_state %> badge-pill text-capitalize" id="shipment_status">
+            <%= Spree.t(@order.shipment_state, scope: :shipment_states, default: [:missing, "none"]) %>
+          </span>
+        </li>
+      <% end %>
+
+      <% if @order.payment_state.present? %>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small><%= Spree.t(:payment) %></small>
+          <span class="state badge badge-pill badge-<%= @order.payment_state %> badge-pill text-capitalize" id="payment_status">
+            <%= Spree.t(@order.payment_state, scope: :payment_states, default: [:missing, "none"]) %>
+          </span>
+        </li>
+      <% end %>
+
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <small data-hook='admin_order_tab_channel_title'><%= Spree.t(:channel) %></small>
+        <span class="state badge badge-pill text-capitalize" id='order_channel'>
+          <%= @order.channel %>
+        </span>
+      </li>
+
+      <% if @order.completed? %>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small data-hook='admin_order_tab_date_completed_title'><%= Spree.t(:date_completed) %></small>
+          <span class="text-right small font-weight-bold" id='date_complete'>
+            <%= pretty_time(@order.completed_at) %>
+          </span>
+        </li>
+      <% end %>
+
+      <% if @order.approved? %>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small><%= Spree.t(:approved_at) %></small>
+          <span class="text-right small font-weight-bold">
+            <%= pretty_time(@order.approved_at) %>
+          </span>
+        </li>
+        <% if @order.approver.present? %>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            <small><%= Spree.t(:approver) %></small>
+            <span class="text-right small font-weight-bold">
+              <%= link_to @order.approver.email, spree.admin_users_path(@order.approver) %>
+            </span>
+          </li>
+        <% end %>
+      <% end %>
+
+      <% if @order.canceled? && @order.canceled_at %>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small><%= Spree.t(:canceled_at) %></small>
+          <span class="text-right small font-weight-bold">
+            <%= pretty_time(@order.canceled_at) %>
           </span>
-        </td>
-      </tr>
-      <tr>
-        <td data-hook='admin_order_tab_channel_title'>
-          <strong><%= Spree.t(:channel) %>:</strong>
-        </td>
-        <td id='order_channel'><%= @order.channel %></td>
-      </tr>
-      <tr>
-        <td data-hook='admin_order_tab_subtotal_title'>
-          <strong><%= Spree.t(:subtotal) %>:</strong>
-        </td>
-        <td id='item_total'>
+        </li>
+        <% if @order.canceler.present? %>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            <small><%= Spree.t(:canceler) %></small>
+            <span class="text-right small font-weight-bold">
+              <%= link_to @order.canceler.email, spree.admin_users_path(@order.canceler) %>
+            </span>
+          </li>
+        <% end %>
+      <% end %>
+
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <small data-hook='admin_order_tab_subtotal_title'><%= Spree.t(:subtotal) %></small>
+        <span class="state badge badge-pill text-capitalize" id='item_total'>
           <%= @order.display_item_total.to_html %>
-        </td>
-      </tr>
+        </span>
+      </li>
 
       <% if @order.checkout_steps.include?("delivery") && @order.ship_total > 0 %>
-        <tr>
-          <td data-hook='admin_order_tab_ship_total_title'>
-            <strong><%= Spree.t(:ship_total) %>:</strong>
-          </td>
-          <td id='ship_total'>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small data-hook='admin_order_tab_ship_total_title'><%= Spree.t(:ship_total) %></small>
+          <span class="state badge badge-pill text-capitalize" id='ship_total'>
             <%= @order.display_ship_total.to_html %>
-          </td>
-        </tr>
+          </span>
+        </li>
       <% end %>
 
       <% if @order.included_tax_total != 0 %>
-        <tr>
-          <td data-hook='admin_order_tab_included_tax_title'>
-            <strong><%= Spree.t(:tax_included) %>:</strong>
-          </td>
-          <td id='included_tax_total'>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small data-hook='admin_order_tab_included_tax_title'><%= Spree.t(:tax_included) %></small>
+          <span class="state badge badge-pill text-capitalize" id='included_tax_total'>
             <%= @order.display_included_tax_total.to_html %>
-          </td>
-        </tr>
+          </span>
+        </li>
       <% end %>
 
       <% if @order.additional_tax_total != 0 %>
-        <tr>
-          <td data-hook='admin_order_tab_additional_tax_title'>
-            <strong><%= Spree.t(:tax) %>:</strong>
-          </td>
-          <td id='additional_tax_total'>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          <small data-hook='admin_order_tab_additional_tax_title'><%= Spree.t(:tax) %></small>
+          <span class="state badge badge-pill text-capitalize" id='additional_tax_total'>
             <%= @order.display_additional_tax_total.to_html %>
-          </td>
-        </tr>
-      <% end %>
-
-      <tr>
-        <td data-hook='admin_order_tab_total_title'>
-          <strong><%= Spree.t(:total) %>:</strong>
-        </td>
-        <td id='order_total'><%= @order.display_total.to_html %></td>
-      </tr>
-
-      <% if @order.completed? %>
-        <% if @order.shipment_state.present? %>
-          <tr>
-            <td>
-              <strong><%= Spree.t(:shipment) %>:</strong>
-            </td>
-            <td id='shipment_status'>
-              <span class="state badge badge-<%= @order.shipment_state %> text-uppercase">
-                <%= Spree.t(@order.shipment_state, scope: :shipment_states, default: [:missing, "none"]) %>
-              </span>
-            </td>
-          </tr>
-        <% end %>
-        <% if @order.payment_state.present? %>
-          <tr>
-            <td>
-              <strong><%= Spree.t(:payment) %>:</strong>
-            </td>
-            <td id='payment_status'>
-              <span class="state badge badge-<%= @order.payment_state %> text-uppercase">
-                <%= Spree.t(@order.payment_state, scope: :payment_states, default: [:missing, "none"]) %>
-              </span>
-            </td>
-          </tr>
-        <% end %>
-        <tr>
-          <td data-hook='admin_order_tab_date_completed_title'>
-            <strong><%= Spree.t(:date_completed) %>:</strong>
-          </td>
-          <td id='date_complete'>
-            <%= pretty_time(@order.completed_at) %>
-          </td>
-        </tr>
-      <% end %>
-
-      <% if @order.approved? %>
-        <tr>
-          <td><strong><%= Spree.t(:approver) %></strong></td>
-          <td><%= @order.approver.try(:email) %></td>
-        </tr>
-        <tr>
-          <td><strong><%= Spree.t(:approved_at) %></strong></td>
-          <td><%= pretty_time(@order.approved_at) %></td>
-        </tr>
+          </span>
+        </li>
       <% end %>
 
-      <% if @order.canceled? && @order.canceler && @order.canceled_at %>
-        <tr>
-          <td><strong><%= Spree.t(:canceler) %></strong></td>
-          <td><%= @order.canceler.email %></td>
-        </tr>
-        <tr>
-          <td><strong><%= Spree.t(:canceled_at) %></strong></td>
-          <td><%= pretty_time(@order.canceled_at) %></td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <small data-hook='admin_order_tab_total_title'><%= Spree.t(:total) %></small>
+        <span class="state badge badge-pill badge-primary text-capitalize" id='order_total'>
+          <%= @order.display_total.to_html %>
+        </span>
+      </li>
+    </ul>
   </div>
-</div>
+<% end %>

data/app/views/spree/admin/shared/_order_tabs.html.erb

@@ -1,93 +1,91 @@
 <% content_for :page_title do %>
-  <%= link_to Spree.t(:orders), spree.admin_orders_path %> /
-  <%= link_to @order.number, spree.edit_admin_order_path(@order) %>
+  <%= page_header_back_button spree.admin_orders_path %>
+  <%= @order.number %>
 <% end %>
 
-<% content_for :sidebar do %>
-  <ul class="nav flex-column nav-pills" data-hook="admin_order_tabs">
-    <% if ((can? :update, @order) && (@order.shipments.size.zero? || @order.shipments.shipped.size.zero?)) %>
-      <li data-hook='admin_order_tabs_cart_details'>
-        <%= link_to_with_icon 'cart.svg',
-          Spree.t(:cart),
-          cart_admin_order_url(@order),
-          class: "#{'active' if current == :cart} nav-link" %>
-      </li>
-    <% end %>
-
-    <% if can? :update, @order %>
-      <li data-hook='admin_order_tabs_channel_details'>
-        <%= link_to_with_icon 'split.svg',
-          Spree.t(:channel),
-          channel_admin_order_url(@order),
-          class: "#{'active' if current == :channel} nav-link" %>
-      </li>
-    <% end %>
+<% content_for :page_tabs do %>
+  <% if ((can? :update, @order) && (@order.shipments.size.zero? || @order.shipments.shipped.size.zero?)) %>
+    <li class="nav-item" data-hook='admin_order_tabs_cart_details'>
+      <%= link_to_with_icon 'cart-check.svg',
+        Spree.t(:cart),
+        cart_admin_order_url(@order),
+        class: "#{'active' if current == :cart} nav-link" %>
+    </li>
+  <% end %>
 
-    <% if can?(:update, @order) && @order.checkout_steps.include?("address") %>
-      <li data-hook='admin_order_tabs_customer_details'>
-        <%= link_to_with_icon 'user.svg',
-          Spree.t(:customer),
-          spree.admin_order_customer_url(@order),
-          class: "#{'active' if current == :customer_details} nav-link" %>
-      </li>
-    <% end %>
+  <% if can? :update, @order %>
+    <li class="nav-item" data-hook='admin_order_tabs_channel_details'>
+      <%= link_to_with_icon 'funnel.svg',
+        Spree.t(:channel),
+        channel_admin_order_url(@order),
+        class: "#{'active' if current == :channel} nav-link" %>
+    </li>
+  <% end %>
 
-    <% if can? :update, @order %>
-      <li data-hook='admin_order_tabs_shipment_details'>
-        <%= link_to_with_icon 'shipping.svg',
-          Spree.t(:shipments),
-          edit_admin_order_url(@order),
-          class: "#{'active' if current == :shipments} nav-link" %>
-      </li>
-    <% end %>
+  <% if can?(:update, @order) && @order.checkout_steps.include?("address") %>
+    <li class="nav-item" data-hook='admin_order_tabs_customer_details'>
+      <%= link_to_with_icon 'person-lines-fill.svg',
+        Spree.t(:customer),
+        spree.admin_order_customer_url(@order),
+        class: "#{'active' if current == :customer_details} nav-link" %>
+    </li>
+  <% end %>
 
-    <% if can? :index, Spree::Adjustment %>
-      <li data-hook='admin_order_tabs_adjustments'>
-        <%= link_to_with_icon 'adjust.svg',
-          Spree.t(:adjustments),
-          spree.admin_order_adjustments_url(@order),
-          class: "#{'active' if current == :adjustments} nav-link" %>
-      </li>
-    <% end %>
+  <% if can? :update, @order %>
+    <li class="nav-item" data-hook='admin_order_tabs_shipment_details'>
+      <%= link_to_with_icon 'truck.svg',
+        Spree.t(:shipments),
+        edit_admin_order_url(@order),
+        class: "#{'active' if current == :shipments} nav-link" %>
+    </li>
+  <% end %>
 
-    <% if can?(:index, Spree::Payment) %>
-      <li data-hook='admin_order_tabs_payments'>
-        <%= link_to_with_icon 'payments.svg',
-          Spree.t(:payments),
-          spree.admin_order_payments_url(@order),
-          class: "#{'active' if current == :payments} nav-link" %>
-      </li>
-    <% end %>
+  <% if can? :index, Spree::Adjustment %>
+    <li class="nav-item" data-hook='admin_order_tabs_adjustments'>
+      <%= link_to_with_icon 'adjust.svg',
+        Spree.t(:adjustments),
+        spree.admin_order_adjustments_url(@order),
+        class: "#{'active' if current == :adjustments} nav-link" %>
+    </li>
+  <% end %>
 
-    <% if can? :index, Spree::ReturnAuthorization %>
-      <% if @order.completed? %>
-        <li data-hook='admin_order_tabs_return_authorizations'>
-          <%= link_to_with_icon 'enter.svg',
-            Spree.t(:return_authorizations),
-            spree.admin_order_return_authorizations_url(@order),
-            class: "#{'active' if current == :return_authorizations} nav-link" %>
-        </li>
-      <% end %>
-    <% end %>
+  <% if can?(:index, Spree::Payment) %>
+    <li class="nav-item" data-hook='admin_order_tabs_payments'>
+      <%= link_to_with_icon 'credit-card.svg',
+        Spree.t(:payments),
+        spree.admin_order_payments_url(@order),
+        class: "#{'active' if current == :payments} nav-link" %>
+    </li>
+  <% end %>
 
-    <% if can? :index, Spree::CustomerReturn %>
-      <% if @order.completed? %>
-        <li>
-          <%= link_to_with_icon 'returns.svg',
-            Spree.t(:customer_returns),
-            spree.admin_order_customer_returns_url(@order),
-            class: "#{'active' if current == :customer_returns} nav-link" %>
-        </li>
-      <% end %>
+  <% if can? :index, Spree::ReturnAuthorization %>
+    <% if @order.completed? %>
+      <li class="nav-item" data-hook='admin_order_tabs_return_authorizations'>
+        <%= link_to_with_icon 'enter.svg',
+          Spree.t(:return_authorizations),
+          spree.admin_order_return_authorizations_url(@order),
+          class: "#{'active' if current == :return_authorizations} nav-link" %>
+      </li>
     <% end %>
+  <% end %>
 
-    <% if can? :update, @order %>
-      <li data-hook='admin_order_tabs_state_changes'>
-        <%= link_to_with_icon 'save.svg',
-          Spree::StateChange.human_attribute_name(:state_changes),
-          spree.admin_order_state_changes_url(@order),
-          class: "#{'active' if current == :state_changes} nav-link" %>
+  <% if can? :index, Spree::CustomerReturn %>
+    <% if @order.completed? %>
+      <li class="nav-item">
+        <%= link_to_with_icon 'returns.svg',
+          Spree.t(:customer_returns),
+          spree.admin_order_customer_returns_url(@order),
+          class: "#{'active' if current == :customer_returns} nav-link" %>
       </li>
     <% end %>
-  </ul>
+  <% end %>
+
+  <% if can? :update, @order %>
+    <li class="nav-item" data-hook='admin_order_tabs_state_changes'>
+      <%= link_to_with_icon 'calendar3.svg',
+        Spree::StateChange.human_attribute_name(:state_changes),
+        spree.admin_order_state_changes_url(@order),
+        class: "#{'active' if current == :state_changes} nav-link" %>
+    </li>
+  <% end %>
 <% end %>