spree_backend 4.2.7 → 4.3.0.rc1

data/app/views/spree/admin/menus/index.html.erb

@@ -0,0 +1,90 @@
+<% content_for :page_title do %>
+  <%= Spree.t('admin.navigation.menus') %>
+<% end %>
+
+<% content_for :page_actions do %>
+  <%= button_link_to Spree.t('admin.navigation.add_new_menu'), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'new_menu' } %>
+<% end if can?(:create, Spree::Menu) %>
+
+<% content_for :table_filter do %>
+  <div data-hook="admin_menus_sidebar">
+    <%= search_form_for [:admin, @search] do |f| %>
+      <%- locals = {f: f} %>
+      <div class="row">
+
+        <div class="col-12 col-lg-4">
+          <div class="form-group">
+            <%= f.label :name_cont, Spree.t('name') %>
+            <%= f.text_field :name_cont, size: 15, class: "form-control js-quick-search-target js-filterable" %>
+          </div>
+        </div>
+        <div class="col-12 col-lg-4">
+          <div class="form-group">
+            <%= label_tag :q_location_eq, Spree.t(:location) %><%= f.select :location_eq, spree_humanize_dropdown_values('Spree::Menu', { const: 'MENU_LOCATIONS', paramterize_values: true }), { include_blank: true }, class: 'select2-clear js-filterable' %>
+          </div>
+        </div>
+
+        <div class="col-12 col-lg-4">
+         <div class="form-group">
+           <%= label_tag :q_locale_eq, Spree.t(:language) %>
+           <%= f.select :locale_eq, all_locales_options, { include_blank: true }, class: 'select2-clear js-filterable' %>
+         </div>
+        </div>
+      </div>
+
+      <div data-hook="admin_menus_index_search_buttons" class="form-actions">
+        <%= button Spree.t(:search), 'search.svg' %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<% if @menus.any? %>
+<div class="table-responsive">
+  <table class="table" id="menusTable">
+    <thead>
+      <th scope="col"><%= Spree.t(:name) %></th>
+      <th scope="col"><%= Spree.t('location') %></th>
+      <th scope="col"><%= Spree.t('language') %></th>
+      <th class="text-center" scope="col"><%= Spree.t('default') %>
+        <span data-show-info
+              data-alert-kind="info"
+              data-alert-title="<%= Spree.t('admin.navigation.default_menus_info.title') %>"
+              data-alert-html="<%= Spree.t('admin.navigation.default_menus_info.body') %>">
+          <%= svg_icon name: "info.svg", width: '15', height: '15' %>
+        </span>
+      </th>
+      <th scope="col"></th>
+    </thead>
+    <tbody>
+      <% @menus.each do |menu| %>
+        <tr>
+          <td>
+            <%= menu.name %>
+          </td>
+          <td>
+            <%= menu.location.titleize %>
+          </td>
+          <td>
+            <%= locale_full_name(menu.locale) %>
+          </td>
+          <td class="text-center">
+            <%= active_badge(default_menu_for_store?(menu)) %>
+          </td>
+          <td class="actions" data-hook="admin_menus_index_row_actions">
+             <span class="d-flex justify-content-end">
+             <%= link_to_edit(menu, no_text: true) %>
+             <%= link_to_delete menu, no_text: true, url: spree.admin_menu_path(menu) if can?(:destroy, menu) %>
+            </span>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+<%= render 'spree/admin/shared/index_table_options', collection: @menus, simple: true %>
+<% else %>
+  <div class="alert alert-info no-objects-found">
+    <%= Spree.t('admin.navigation.you_have_no_menus') %>
+  </div>
+<% end %>

data/app/views/spree/admin/menus/nested_menu_items/_item_bar.html.erb

@@ -0,0 +1,30 @@
+<div class="container-item-row d-flex flex-nowrap">
+  <div class="move-handle d-flex align-items-center p-3">
+    <%= svg_icon(name: 'sort.svg', width: '20', height: '20') %>
+  </div>
+
+  <div class="d-flex align-items-center overflow-hidden w-100">
+    <div class="overflow-hidden">
+      <%= item.name %>
+      <% if item.link.present? %>
+        <span class="badge badge-light badge-light-muted-text">-> <%= item.link %></span>
+      <% end %>
+      <small class="form-text text-muted mt-0">
+        <%= "#{Spree.t('admin.navigation.type')}: #{item.item_type}" %>
+        <%= "| #{Spree.t('admin.navigation.code')}: #{item.code}" if item.code.present? %>
+      </small>
+    </div>
+      <% if item.icon.present? %>
+        <div class="ml-2">
+          <div class="menu_items_image_holder">
+            <%= image_tag main_app.url_for(item.icon.attachment) %>
+          </div>
+        </div>
+      <% end %>
+  </div>
+
+  <div class="d-flex align-items-center space-buttons px-2">
+    <%= link_to_edit(item, no_text: true, url: spree.edit_admin_menu_menu_item_path(menu, item)) %>
+    <%= link_to_delete(item, no_text: true, url: spree.admin_menu_menu_item_path(menu, item)) if can?(:destroy, item) %>
+  </div>
+</div>

data/app/views/spree/admin/menus/new.html.erb

@@ -0,0 +1,22 @@
+<% content_for :page_title do %>
+  <%= link_to Spree.t('admin.navigation.all_menus'), spree.admin_menus_path %> / <%= Spree.t('admin.navigation.new_menu') %>
+<% end %>
+
+<div class="row">
+    <div class="col-12">
+      <div class="card mb-3">
+        <div class="card-header">
+          <h5 class="mb-0"><%= Spree.t('settings') %></h5>
+        </div>
+        <div class="card-body">
+          <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @menu } %>
+          <%= form_for [:admin, @menu] do |f| %>
+            <%= render partial: 'form', locals: { f: f } %>
+            <div class="d-flex ">
+              <%= render partial: 'spree/admin/shared/new_resource_links' %>
+            </div>
+          <% end %>
+        </div>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/option_types/_form.html.erb

@@ -21,6 +21,9 @@
         <%= f.check_box :filterable %>
         <%= Spree.t(:filterable) %>
       <% end %>
+      <small class="form-text text-muted">
+        <%= raw Spree.t('option_type_filterable_info') %>
+      </small>
     <% end %>
   </div>
 </div>

data/app/views/spree/admin/option_types/_option_value_fields.html.erb

@@ -5,5 +5,9 @@
   </td>
   <td class="name"><%= f.text_field :name, class: "form-control" %></td>
   <td class="presentation"><%= f.text_field :presentation, class: "form-control" %></td>
-  <td class="actions actions-1 text-center"><%= link_to_icon_remove_fields f %></td>
+  <td class="actions">
+    <span class="d-flex justify-content-end">
+      <%= link_to_icon_remove_fields f %>
+    </span>
+  </td>
 </tr>

data/app/views/spree/admin/option_types/index.html.erb

@@ -31,9 +31,11 @@
           <td><%= option_type.name %></td>
           <td class="presentation"><%= option_type.presentation %></td>
           <td><%= active_badge(option_type.filterable) %></td>
-          <td class="actions actions-2 text-right">
-            <%= link_to_edit(option_type, class: 'admin_edit_option_type', no_text: true) if can?(:edit, option_type) %>
-            <%= link_to_delete(option_type, no_text: true) if can?(:delete, option_type) %>
+          <td class="actions">
+            <span class="d-flex justify-content-end">
+              <%= link_to_edit(option_type, class: 'admin_edit_option_type', no_text: true) if can?(:edit, option_type) %>
+              <%= link_to_delete(option_type, no_text: true) if can?(:delete, option_type) %>
+            </span>
           </td>
         </tr>
       <% end %>

data/app/views/spree/admin/orders/_channel_form.html.erb

@@ -9,9 +9,9 @@
       <% end %>
     </div>
     <div class="form-actions" data-hook="buttons">
-      <%= button Spree.t('actions.update'), 'refresh', 'submit', { class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
+      <%= button Spree.t('actions.update'), 'recycle.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'), edit_admin_order_url(order), icon: 'delete' %>
+      <%= button_link_to Spree.t('actions.cancel'), edit_admin_order_url(order), icon: 'cancel.svg' %>
     </div>
     <fieldset>
   <% end %>

data/app/views/spree/admin/orders/_line_items.html.erb

@@ -35,13 +35,15 @@
                 <%= number_field_tag :quantity, item.quantity, min: 0, class: "line_item_quantity form-control", size: 5 %>
               </td>
               <td class="line-item-total text-center"><%= line_item_shipment_price(item, item.quantity) %></td>
-              <td class="cart-line-item-delete actions actions-4 text-center no-wrap" data-hook="cart_line_item_delete">
-                <% if can? :update, item %>
-                  <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-line-item btn btn-outline-secondary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), style: 'display: none', no_text: true %>
-                  <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-line-item btn btn-success btn-sm', no_text: true, data: { :'line-item-id' => item.id, action: 'save'}, title: Spree.t('actions.save'), style: 'display: none' %>
-                  <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "#", class: 'edit-line-item btn btn-outline-secondary btn-sm', data: {action: 'edit'}, title: Spree.t('edit'), no_text: true %>
-                  <%= link_to_with_icon 'delete.svg', Spree.t('delete'), "#", class: 'delete-line-item btn btn-danger btn-sm', data: { 'line-item-id' => item.id, action: 'remove'}, title: Spree.t('delete'), no_text: true %>
-                <% end %>
+              <td class="cart-line-item-delete actions" data-hook="cart_line_item_delete">
+                <span class="d-flex justify-content-center">
+                  <% if can? :update, item %>
+                    <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-line-item btn btn-outline-secondary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), style: 'display: none', no_text: true %>
+                    <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-line-item btn btn-success btn-sm', no_text: true, data: { :'line-item-id' => item.id, action: 'save'}, title: Spree.t('actions.save'), style: 'display: none' %>
+                    <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "#", class: 'edit-line-item btn btn-outline-secondary btn-sm', data: {action: 'edit'}, title: Spree.t('edit'), no_text: true %>
+                    <%= link_to_with_icon 'delete.svg', Spree.t('delete'), "#", class: 'delete-line-item btn btn-danger btn-sm', data: { 'line-item-id' => item.id, action: 'remove'}, title: Spree.t('delete'), no_text: true %>
+                  <% end %>
+                </span>
               </td>
             </tr>
           <% end %>

data/app/views/spree/admin/orders/_shipment.html.erb

@@ -43,11 +43,13 @@
                       { class: 'select2', data: {'shipment-number' => shipment.number } } %>
               </div>
             </td>
-            <td class="actions text-center">
-              <% if can? :update, shipment %>
-                <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-method btn btn-outline-secondary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), no_text: true %>
-                <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-method btn btn-success btn-sm', data: {'shipment-number' => shipment.number, action: 'save'}, title: Spree.t('actions.save'), no_text: true %>
-              <% end %>
+            <td class="actions">
+              <span class="d-flex justify-content-center">
+                <% if can? :update, shipment %>
+                  <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-method btn btn-outline-secondary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), no_text: true %>
+                  <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-method btn btn-success btn-sm', data: {'shipment-number' => shipment.number, action: 'save'}, title: Spree.t('actions.save'), no_text: true %>
+                <% end %>
+              </span>
             </td>
           </tr>
           <% end %>
@@ -64,10 +66,12 @@
               <td colspan='5'><%= Spree.t(:no_shipping_method_selected) %></td>
             <% end %>
 
-            <td class="actions text-center">
-              <% if( (can? :update, shipment) and !shipment.shipped?) %>
-                <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "javascript:;", class: 'edit-method with-tip btn btn-sm btn-outline-secondary', data: {action: 'edit'}, no_text: true %>
-              <% end %>
+            <td class="actions">
+              <span class="d-flex justify-content-center">
+                <% if( (can? :update, shipment) and !shipment.shipped?) %>
+                  <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "javascript:;", class: 'edit-method with-tip btn btn-sm btn-outline-secondary', data: {action: 'edit'}, no_text: true %>
+                <% end %>
+              </span>
             </td>
           </tr>
 
@@ -76,11 +80,13 @@
             <label><%= Spree.t(:tracking_number) %>:</label>
             <%= text_field_tag :tracking, shipment.tracking, class: "form-control" %>
           </td>
-          <td class="actions text-center">
-            <% if can? :update, shipment %>
-              <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-tracking btn btn-outline-secondary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), no_text: true %>
-              <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-tracking btn btn-success btn-sm', data: {'shipment-number' => shipment.number, action: 'save'}, title: Spree.t('actions.save'), no_text: true %>
-            <% end %>
+          <td class="actions">
+            <span class="d-flex justify-content-center">
+              <% if can? :update, shipment %>
+                <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-tracking btn btn-outline-secondary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), no_text: true %>
+                <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-tracking btn btn-success btn-sm', data: {'shipment-number' => shipment.number, action: 'save'}, title: Spree.t('actions.save'), no_text: true %>
+              <% end %>
+            </span>
           </td>
         </tr>
 
@@ -100,10 +106,12 @@
               <%= Spree.t(:no_tracking_present) %>
             <% end %>
           </td>
-          <td class="actions text-center">
-            <% if can? :update, shipment %>
-              <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "#", class: 'edit-tracking btn btn-outline-secondary btn-sm', data: {action: 'edit'}, title: Spree.t('edit'), no_text: true %>
-            <% end %>
+          <td class="actions">
+            <span class="d-flex justify-content-center">
+              <% if can? :update, shipment %>
+                <%= link_to_with_icon 'edit.svg', Spree.t('edit'), "#", class: 'edit-tracking btn btn-outline-secondary btn-sm', data: {action: 'edit'}, title: Spree.t('edit'), no_text: true %>
+              <% end %>
+            </span>
           </td>
         </tr>
       </tbody>

data/app/views/spree/admin/orders/_shipment_manifest.html.erb

@@ -31,14 +31,16 @@
       <%= line_item_shipment_price(item.line_item, item.quantity) %>
     </td>
 
-    <td class="cart-item-delete actions actions-3 text-center" data-hook="cart_item_delete">
-      <% if((!shipment.shipped?) && can?(:update, item.line_item)) %>
-        <%= link_to_with_icon 'edit.svg', Spree.t('actions.edit'), "#", class: 'edit-item btn btn-outline-secondary btn-sm', title: Spree.t('actions.edit'), no_text: true %>
-        <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-item  btn btn-outline-secondary btn-sm', data: { action: 'cancel' }, title: Spree.t('actions.cancel'), style: 'display: none', no_text: true %>
-        <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-item btn btn-success btn-sm', data: {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, action: 'save'}, title: Spree.t('actions.save'), style: 'display: none', no_text: true %>
-        <%= link_to_with_icon 'split.svg', Spree.t('split'), "#", class: 'split-item btn btn-outline-secondary btn-sm', data: {action: 'split', 'variant-id' => item.variant.id}, title: Spree.t('split'), no_text: true %>
-        <%= link_to_with_icon 'delete.svg', Spree.t('delete'), "#", class: 'delete-item btn btn-danger btn-sm', data: { 'shipment-number' => shipment.number, 'variant-id' => item.variant.id, action: 'remove'}, title: Spree.t('delete'), no_text: true %>
-      <% end %>
+    <td class="cart-item-delete actions" data-hook="cart_item_delete">
+      <span class="d-flex justify-content-center">
+        <% if((!shipment.shipped?) && can?(:update, item.line_item)) %>
+          <%= link_to_with_icon 'edit.svg', Spree.t('actions.edit'), "#", class: 'edit-item btn btn-outline-secondary btn-sm', title: Spree.t('actions.edit'), no_text: true %>
+          <%= link_to_with_icon 'cancel.svg', Spree.t('actions.cancel'), "#", class: 'cancel-item  btn btn-outline-secondary btn-sm', data: { action: 'cancel' }, title: Spree.t('actions.cancel'), style: 'display: none', no_text: true %>
+          <%= link_to_with_icon 'save.svg', Spree.t('actions.save'), "#", class: 'save-item btn btn-success btn-sm', data: {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, action: 'save'}, title: Spree.t('actions.save'), style: 'display: none', no_text: true %>
+          <%= link_to_with_icon 'split.svg', Spree.t('split'), "#", class: 'split-item btn btn-outline-secondary btn-sm', data: {action: 'split', 'variant-id' => item.variant.id}, title: Spree.t('split'), no_text: true %>
+          <%= link_to_with_icon 'delete.svg', Spree.t('delete'), "#", class: 'delete-item btn btn-danger btn-sm', data: { 'shipment-number' => shipment.number, 'variant-id' => item.variant.id, action: 'remove'}, title: Spree.t('delete'), no_text: true %>
+        <% end %>
+      </span>
     </td>
   </tr>
 <% end %>

data/app/views/spree/admin/orders/customer_details/_autocomplete.js.erb

@@ -13,7 +13,7 @@
           {{bill_address.firstname}} {{bill_address.lastname}}<br>
           {{bill_address.address1}}, {{bill_address.address2}}<br>
           {{bill_address.city}}<br>
-          {{#if bill_address.state_id }}
+          {{#if bill_address.state }}
             {{bill_address.state.name}}
           {{else}}
             {{bill_address.state_name}}
@@ -28,7 +28,7 @@
         {{ship_address.firstname}} {{ship_address.lastname}}<br>
         {{ship_address.address1}}, {{ship_address.address2}}<br>
         {{ship_address.city}}<br>
-        {{#if ship_address.state_id }}
+        {{#if ship_address.state }}
           {{ship_address.state.name}}
         {{else}}
           {{ship_address.state_name}}

data/app/views/spree/admin/orders/index.html.erb

@@ -30,7 +30,6 @@
                     value: params[:q][:created_at_gt],
                     placeholder: Spree.t(:starting_from),
                     'data-input':'' %>
-
                 <%= render partial: 'spree/admin/shared/cal_close' %>
               </div>
             </div>
@@ -45,7 +44,6 @@
                     value: params[:q][:created_at_lt],
                     placeholder: Spree.t(:ending_at),
                     'data-input':'' %>
-
                 <%= render partial: 'spree/admin/shared/cal_close' %>
                 </div>
             </div>
@@ -54,7 +52,7 @@
       </div>
       <div class="col-12 col-lg-4">
         <div class="form-group">
-          <%= label_tag :q_number_cont, Spree.t(:order_number, number: '') %>
+          <%= label_tag :q_number_cont, Spree.t(:search_order_number) %>
           <%= f.text_field :number_cont, class: 'form-control js-quick-search-target js-filterable' %>
         </div>
       </div>
@@ -130,13 +128,6 @@
         </div>
       </div>
 
-      <div class="col-12 col-lg-4">
-        <div class="form-group">
-          <%= label_tag :q_store_id_in, Spree.t(:store) %>
-          <%= f.select :store_id_in, Spree::Store.order(:name).pluck(:name, :id), { include_blank: true }, class: 'select2-clear js-filterable' %>
-        </div>
-      </div>
-
       <div class="col-12 col-lg-4">
         <div class="form-group">
           <%= label_tag :q_channel_eq, Spree.t(:channel) %>
@@ -144,28 +135,21 @@
         </div>
       </div>
 
-      <div class="col-12 col-lg-4">
-
-        <div class="form-group">
-
-          <div class="checkbox mt-2">
-            <%= label_tag 'q_completed_at_not_null' do %>
-              <%= f.check_box :completed_at_not_null, {checked: @show_only_completed}, '1', '0' %>
-              <%= Spree.t(:show_only_complete_orders) %>
-            <% end %>
+      <div class="col-12">
+        <%= f.field_container :completed_at_not_null do %>
+          <div class="custom-control custom-checkbox">
+            <%= f.check_box :completed_at_not_null, {checked: @show_only_completed, class: 'custom-control-input'}, '1', '0' %>
+            <%= f.label :completed_at_not_null, Spree.t(:show_only_complete_orders), class: 'custom-control-label' %>
           </div>
+        <% end %>
 
-          <div class="checkbox mt-2">
-            <%= label_tag 'q_considered_risky_eq' do %>
-              <%= f.check_box :considered_risky_eq, {checked: (params[:q][:considered_risky_eq] == '1')}, '1', '' %>
-              <%= Spree.t(:show_only_considered_risky) %>
-            <% end %>
+        <%= f.field_container :considered_risky_eq do %>
+          <div class="custom-control custom-checkbox">
+            <%= f.check_box :considered_risky_eq, {checked: params[:q][:considered_risky_eq] == '1', class: 'custom-control-input'}, '1', '' %>
+            <%= f.label :considered_risky_eq, Spree.t(:show_only_considered_risky), class: 'custom-control-label' %>
           </div>
-
-        </div>
-
+        <% end %>
       </div>
-
     </div>
 
     <div data-hook="admin_orders_index_search_buttons" class="form-actions">
@@ -179,88 +163,103 @@
 <% end %>
 
 <% if @orders.any? %>
-<div class="table-responsive">
-  <table class="table" id="listing_orders" data-hook>
-    <thead>
-      <tr data-hook="admin_orders_index_headers">
-        <th><%= sort_link @search, :number,           I18n.t(:number, scope: 'activerecord.attributes.spree/order') %></th>
-        <% if @show_only_completed %>
-          <th><%= sort_link @search, :completed_at,   I18n.t(:completed_at, scope: 'activerecord.attributes.spree/order') %></th>
-        <% else %>
-          <th><%= sort_link @search, :created_at,     I18n.t(:created_at, scope: 'activerecord.attributes.spree/order') %></th>
-        <% end %>
-        <th><%= sort_link @search, :considered_risky, I18n.t(:considered_risky, scope: 'activerecord.attributes.spree/order') %></th>
-        <th><%= sort_link @search, :state,            I18n.t(:state, scope: 'activerecord.attributes.spree/order') %></th>
-        <th><%= sort_link @search, :payment_state,    I18n.t(:payment_state, scope: 'activerecord.attributes.spree/order') %></th>
-         <% if Spree::Order.checkout_step_names.include?(:delivery) %>
-          <th><%= sort_link @search, :shipment_state, I18n.t(:shipment_state, scope: 'activerecord.attributes.spree/order') %></th>
-         <% end %>
-        <th><%= sort_link @search, :email,            I18n.t(:email, scope: 'activerecord.attributes.spree/order') %></th>
-        <th><%= sort_link @search, :total,            I18n.t(:total, scope: 'activerecord.attributes.spree/order') %></th>
-        <th data-hook="admin_orders_index_header_actions" class="actions"></th>
-      </tr>
-    </thead>
-    <tbody>
-    <% @orders.each do |order| %>
-      <tr data-hook="admin_orders_index_rows" class="state-<%= order.state.downcase %> <%= cycle('odd', 'even') %>">
-        <td><%= link_to order.number, edit_admin_order_path(order) %></td>
-        <td>
-          <%= order_time(@show_only_completed ? order.completed_at : order.created_at) %>
-        </td>
-        <td>
-          <span class="badge badge-<%= order.considered_risky ? 'considered_risky' : 'considered_safe' %> text-uppercase">
-            <%= order.considered_risky ? Spree.t("risky") : Spree.t("safe") %>
-          </span>
-        </td>
-        <td class="no-wrap">
-          <span class="badge badge-<%= order.state.downcase %> text-uppercase"><%= Spree.t("order_state.#{order.state}") %></span>
-          <span class="filterable js-add-filter" data-ransack-field="q_state_eq" data-ransack-value="<%= order.state %>">
-            <%= svg_icon name: "filter.svg", width: '14', height: '14' %>
-          </span>
-        </td>
-        <td class="no-wrap">
-          <% if order.payment_state %>
-            <%= link_to Spree.t("payment_states.#{order.payment_state}"),
-              admin_order_payments_path(order),
-              class: "badge badge-#{order.payment_state} text-uppercase" %>
-
-            <span class="filterable js-add-filter"
-              data-ransack-field="q_payment_state_eq"
-              data-ransack-value="<%= order.payment_state %>">
+<div data-nav-x-wrapper>
+  <div data-nav-x-container>
+    <table class="table" id="listing_orders" data-hook data-nav-x-content>
+      <thead>
+        <tr data-hook="admin_orders_index_headers">
+          <th><%= sort_link @search, :number,           I18n.t(:number, scope: 'activerecord.attributes.spree/order') %></th>
+          <% if @show_only_completed %>
+            <th><%= sort_link @search, :completed_at,   I18n.t(:completed_at, scope: 'activerecord.attributes.spree/order') %></th>
+          <% else %>
+            <th><%= sort_link @search, :created_at,     I18n.t(:created_at, scope: 'activerecord.attributes.spree/order') %></th>
+          <% end %>
+          <th><%= sort_link @search, :considered_risky, I18n.t(:considered_risky, scope: 'activerecord.attributes.spree/order') %></th>
+          <th><%= sort_link @search, :state,            I18n.t(:state, scope: 'activerecord.attributes.spree/order') %></th>
+          <th><%= sort_link @search, :payment_state,    I18n.t(:payment_state, scope: 'activerecord.attributes.spree/order') %></th>
+           <% if Spree::Order.checkout_step_names.include?(:delivery) %>
+            <th><%= sort_link @search, :shipment_state, I18n.t(:shipment_state, scope: 'activerecord.attributes.spree/order') %></th>
+           <% end %>
+          <th><%= sort_link @search, :email,            I18n.t(:email, scope: 'activerecord.attributes.spree/order') %></th>
+          <th><%= sort_link @search, :total,            I18n.t(:total, scope: 'activerecord.attributes.spree/order') %></th>
+          <th data-hook="admin_orders_index_header_actions" class="actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+      <% @orders.each do |order| %>
+        <tr data-hook="admin_orders_index_rows" class="state-<%= order.state.downcase %> <%= cycle('odd', 'even') %>">
+          <td><%= link_to order.number, edit_admin_order_path(order) %></td>
+          <td>
+            <%= order_time(@show_only_completed ? order.completed_at : order.created_at) %>
+          </td>
+          <td>
+            <span class="badge badge-<%= order.considered_risky ? 'considered_risky' : 'considered_safe' %> text-uppercase">
+              <%= order.considered_risky ? Spree.t("risky") : Spree.t("safe") %>
+            </span>
+          </td>
+          <td class="no-wrap">
+            <span class="badge badge-<%= order.state.downcase %> text-uppercase"><%= Spree.t("order_state.#{order.state}") %></span>
+            <span class="filterable js-add-filter" data-ransack-field="q_state_eq" data-ransack-value="<%= order.state %>">
               <%= svg_icon name: "filter.svg", width: '14', height: '14' %>
             </span>
-          <% end %>
-        </td>
-        <% if Spree::Order.checkout_step_names.include?(:delivery) %>
+          </td>
           <td class="no-wrap">
-            <% if order.shipment_state %>
-              <span class="badge badge-<%= order.shipment_state %> text-uppercase"><%= Spree.t("shipment_states.#{order.shipment_state}") %></span>
-              <span class="filterable js-add-filter" data-ransack-field="q_shipment_state_eq" data-ransack-value="<%= order.shipment_state %>">
+            <% if order.payment_state %>
+              <%= link_to Spree.t("payment_states.#{order.payment_state}"),
+                admin_order_payments_path(order),
+                class: "badge badge-#{order.payment_state} text-uppercase" %>
+
+              <span class="filterable js-add-filter"
+                data-ransack-field="q_payment_state_eq"
+                data-ransack-value="<%= order.payment_state %>">
                 <%= svg_icon name: "filter.svg", width: '14', height: '14' %>
               </span>
             <% end %>
           </td>
-        <% end %>
-        <td class="no-wrap">
-          <% if order.user %>
-            <%= link_to order.email, edit_admin_user_path(order.user) %>
-          <% else %>
-            <%= mail_to order.email %>
+          <% if Spree::Order.checkout_step_names.include?(:delivery) %>
+            <td class="no-wrap">
+              <% if order.shipment_state %>
+                <span class="badge badge-<%= order.shipment_state %> text-uppercase"><%= Spree.t("shipment_states.#{order.shipment_state}") %></span>
+                <span class="filterable js-add-filter" data-ransack-field="q_shipment_state_eq" data-ransack-value="<%= order.shipment_state %>">
+                  <%= svg_icon name: "filter.svg", width: '14', height: '14' %>
+                </span>
+              <% end %>
+            </td>
           <% end %>
-          <% if order.user || order.email %>
-            <span class="filterable js-add-filter" data-ransack-field="q_email_cont" data-ransack-value="<%= order.email %>">
-              <%= svg_icon name: "filter.svg", width: '14', height: '14' %>
+          <td class="no-wrap">
+            <% if order.user %>
+              <%= link_to order.email, edit_admin_user_path(order.user) %>
+            <% else %>
+              <%= mail_to order.email %>
+            <% end %>
+            <% if order.user || order.email %>
+              <span class="filterable js-add-filter" data-ransack-field="q_email_cont" data-ransack-value="<%= order.email %>">
+                <%= svg_icon name: "filter.svg", width: '14', height: '14' %>
+              </span>
+            <% end %>
+          </td>
+          <td><%= order.display_total.to_html %></td>
+          <td class='actions' data-hook="admin_orders_index_row_actions">
+            <span class="d-flex justify-content-end">
+              <%= link_to_edit_url edit_admin_order_path(order), title: "admin_edit_#{dom_id(order)}", no_text: true if can?(:edit, order) %>
             </span>
-          <% end %>
-        </td>
-        <td><%= order.display_total.to_html %></td>
-        <td class='actions actions-1' data-hook="admin_orders_index_row_actions">
-          <%= link_to_edit_url edit_admin_order_path(order), title: "admin_edit_#{dom_id(order)}", no_text: true if can?(:edit, order) %>
-        </td>
-      </tr>
-    <% end %>
-    </tbody>
-  </table>
+          </td>
+        </tr>
+      <% end %>
+      </tbody>
+    </table>
+  </div>
+  <button class="nav-x_Advancer nav-x_Advancer_Left" type="button">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
+    </svg>
+  </button>
+
+  <button class="nav-x_Advancer nav-x_Advancer_Right" type="button">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
+    </svg>
+  </button>
 </div>
 <% else %>
   <div class="alert alert-info no-objects-found">