spree_backend 4.3.0 → 4.5.0

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

@@ -7,12 +7,12 @@
 
     <div class="dropdown-menu dropdown-menu-right overflow-hidden mt-2 p-0 mr-2">
       <div class="dropdown-item px-0 text-center bg-light">
-        <span class="d-block text-dark py-2 px-4"><%= try_spree_current_user.email %></span>
+        <span class="d-block py-2 px-4"><%= try_spree_current_user.email %></span>
       </div>
       <div class="dropdown-divider m-0"></div>
 
       <% if spree.respond_to? :root_path %>
-          <%= link_to spree.root_path, target: :blank, class: 'd-block text-dark py-3 px-4 dropdown-item' do %>
+          <%= link_to spree.root_path, target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item', data: { turbo: false } do %>
             <%= svg_icon name: "store.svg", width: '18', height: '18' %>
             &nbsp;
             <%= Spree.t(:back_to_store) %>
@@ -20,7 +20,7 @@
       <% end %>
 
       <% if can?(:manage, try_spree_current_user) %>
-          <%= link_to spree.edit_admin_user_path(try_spree_current_user), class: 'd-block text-dark py-3 px-4 dropdown-item' do %>
+          <%= link_to spree.edit_admin_user_path(try_spree_current_user), class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
             <%= svg_icon name: "user.svg", width: '18', height: '18' %>
             &nbsp;
             <%= Spree.t(:account) %>
@@ -28,7 +28,7 @@
       <% end %>
 
       <% if admin_logout_link %>
-          <%= link_to admin_logout_link, class: 'd-block text-dark py-3 px-4 dropdown-item' do %>
+          <%= link_to admin_logout_link, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
             <%= svg_icon name: "exit.svg", width: '18', height: '18' %>
             &nbsp;
             <%= Spree.t(:logout) %>
@@ -37,19 +37,19 @@
 
       <div class="dropdown-divider m-0"></div>
 
-        <%= link_to 'http://spreecommerce.org/contact', target: :blank, class: 'd-block text-dark py-3 px-4 dropdown-item' do %>
+        <%= link_to 'http://spreecommerce.org/contact', target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
         <%= svg_icon name: "info.svg", width: '18', height: '18' %>
           &nbsp;
           <%= Spree.t(:support) %>
         <% end %>
 
-        <%= link_to 'http://slack.spreecommerce.org', target: :blank, class: 'd-block text-dark py-3 px-4 dropdown-item' do %>
+        <%= link_to 'http://slack.spreecommerce.org', target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
         <%= svg_icon name: "slack.svg", width: '18', height: '18' %>
           &nbsp;
           <%= Spree.t(:join_slack) %>
         <% end %>
 
-        <%= link_to 'https://dev-docs.spreecommerce.org/extensions/extensions', target: :blank, class: 'd-block text-dark py-3 px-4 dropdown-item' do %>
+        <%= link_to 'https://dev-docs.spreecommerce.org/extensions/extensions', target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
         <%= svg_icon name: "extensions.svg", width: '18', height: '18' %>
           &nbsp;
           <%= Spree.t(:extensions_directory) %>

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

@@ -2,14 +2,14 @@
 <div id="<%= type %>" data-hook="address_fields">
   <% Spree::Address::ADDRESS_FIELDS.each do |field| %>
     <% if field == "country" %>
-      <%= field_container (s_or_b + '_' + field), nil, class: ["form-group", "#{type}-row"] do %>
+      <%= field_container (s_or_b + '_' + field), nil, class: ["#{type}-row"] do %>
         <%= f.label :country_id, Spree.t(:country) %>
         <div id="<%= s_or_b %>country">
           <%= f.collection_select :country_id, all_countries, :id, :name, {}, { class: 'select2 w-100' } %>
         </div>
       <% end %>
     <% elsif field == "state" %>
-      <%= field_container (s_or_b + '_' + field), :state, class: ["form-group", "#{type}-row"] do %>
+      <%= field_container (s_or_b + '_' + field), :state, class: ["#{type}-row"] do %>
         <%= f.label :state_id, Spree.t(:state) %>
         <div id="<%= s_or_b %>state">
           <% if f.object.country.try(:states) %>
@@ -26,7 +26,7 @@
         <%= error_message_on f.object, :state_id %>
       <% end %>
     <% else %>
-      <%= field_container (s_or_b + '_' + field), nil, class: ["form-group", "#{type}-row"] do %>
+      <%= field_container (s_or_b + '_' + field), nil, class: ["#{type}-row"] do %>
         <%= f.label field, Spree.t(field) %>
         <%= f.text_field field, class: 'form-control' %>
         <%= error_message_on f.object, field %>
@@ -37,8 +37,7 @@
 
 <% content_for :head do %>
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      updateAddressState('<%= s_or_b %>');
+    document.addEventListener("spree:load", function() {
       $('#<%= s_or_b %>country select').on('change', function() { updateAddressState('<%= s_or_b %>'); });
     })
   </script>

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

@@ -1,9 +1,9 @@
 <div id="calculator_fields" data-hook class="card mb-3">
 
   <div class="card-header">
-    <h1 class="card-title mb-0 h5">
+    <h5 class="card-title mb-0 h6">
       <%= Spree.t(:calculator) %>
-    </h1>
+    </h5>
   </div>
 
   <div id="preference-settings" data-hook class="card-body">

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

@@ -15,18 +15,15 @@
 
 <%= stylesheet_link_tag 'spree/backend/all', media: :all %>
 
-<%= render 'spree/admin/shared/paths' %>
-<%= javascript_include_tag 'spree/backend/all' %>
-<%= render "spree/admin/shared/translations" %>
-
 <script>
   <%== "var AUTH_TOKEN = #{form_authenticity_token.inspect};" %>
-  <%== "Spree.api_key = '#{try_spree_current_user.spree_api_key}';" if try_spree_current_user %>
   <%== "var OAUTH_TOKEN = '#{admin_oauth_token}';" if defined?(admin_oauth_token) %>
   <%== "var ADDRESS_FIELDS = #{Spree::Address::ADDRESS_FIELDS}" %>
-  <% if Rails.env.test? %>
-  jQuery.fx.off = false
-  <% end %>
 </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" } %>
+<%= render "spree/admin/shared/translations" %>
+
 <%= yield :head %>

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,57 +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) || 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" 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/_new_resource_links.html.erb

@@ -1,5 +1,5 @@
 <div class="form-actions" data-hook="buttons">
   <%= button Spree.t('actions.create'), 'save.svg', 'submit', {class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
   <span class="or"><%= Spree.t(:or) %></span>
-  <%= button_link_to Spree.t('actions.cancel'), collection_url, icon: 'cancel.svg' %>
+  <%= button_link_to Spree.t('actions.cancel'), collection_url, icon: 'cancel.svg', data: { turbo: false } %>
 </div>

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 %>