spree_admin 5.1.8 → 5.2.0.rc2

data/app/views/spree/admin/page_builder/_sidebar_fonts.html.erb

@@ -3,71 +3,71 @@
 </h6>
 
 <%= form_for @theme_preview, as: :theme, url: spree.admin_theme_path(@theme_preview), method: :put, data: { 'page-builder-target': 'fontForm' } do |f| %>
-  <ul class="nav nav-pills nav-fill m-3" id="pills-tab" role="tablist">
-    <li class="nav-item" role="presentation">
-      <button class="btn nav-link w-100 active" id="pills-standard" data-toggle="pill" data-target="#pills-standard-tab" type="button" role="tab" aria-controls="pills-standard" aria-selected="true">
-        Standard
-      </button>
-    </li>
-    <li class="nav-item" role="presentation">
-      <button class="btn nav-link w-100" id="pills-custom" data-toggle="pill" data-target="#pills-custom-tab" type="button" role="tab" aria-controls="pills-custom" aria-selected="false">
-        Custom
-      </button>
-    </li>
-  </ul>
-  <div class="tab-content" id="pills-tabContent">
-    <div class="tab-pane fade show active" id="pills-standard-tab" role="tabpanel" aria-labelledby="pills-standard">
-      <div class="px-3 py-2">
-        <div class="mb-3 form-group">
-          <%= f.label :preferred_font_family, Spree.t(:font_family) %>
-          <%= f.select :preferred_font_family, options_for_select(all_fonts_options, f.object.preferred_font_family), { include_blank: true }, class: 'd-none', data: { action: 'change->page-builder#refreshFontPreview', controller: 'font-picker', font_picker_fonts_from_google_value: google_fonts_list.to_json } %>
-        </div>
-        <div class="mb-3 form-group" data-controller="range-input">
-          <%= f.label :preferred_font_size_scale, Spree.t(:font_size_scale) %>
-          <%= f.range_field :preferred_font_size_scale, class: 'custom-range', min: 100, max: 150, step: 5, data: {
-            'range-input-target': 'input',
-            'action': 'change->range-input#updatePreview change->page-builder#refreshFontPreview'
-          } %>
-          <span data-range-input-target="preview">
-            <%= f.object.preferred_font_size_scale %>
-          </span>%
-        </div>
-        <hr />
-        <div class="mb-3 form-group">
-          <%= f.label :preferred_header_font_family, Spree.t(:header_font_family) %>
-          <%= f.select :preferred_header_font_family, options_for_select(all_fonts_options, f.object.preferred_header_font_family), { include_blank: true }, class: 'd-none', data: { action: 'change->page-builder#refreshFontPreview', controller: 'font-picker', font_picker_fonts_from_google_value: google_fonts_list.to_json } %>
-        </div>
-        <div class="mb-3 form-group" data-controller="range-input">
-          <%= f.label :preferred_header_font_size_scale, Spree.t(:header_font_size_scale) %>
-          <%= f.range_field :preferred_header_font_size_scale, class: 'custom-range', min: 100, max: 150, step: 5, data: {
-            'range-input-target': 'input',
-            'action': 'change->range-input#updatePreview change->page-builder#refreshFontPreview'
-          } %>
-          <span data-range-input-target="preview">
-            <%= f.object.preferred_header_font_size_scale %>
-          </span>%
-        </div>
-        <div class="mb-3 custom-control custom-checkbox">
-          <%= f.check_box :preferred_headings_uppercase, class: "custom-control-input", data: { action: 'change->page-builder#refreshFontPreview' } %>
-          <%= f.label :preferred_headings_uppercase, "Make all headings uppercase", class: "custom-control-label" %>
+  <div data-controller="tabs">
+    <ul class="nav nav-pills nav-fill m-3" id="pills-tab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="btn nav-link w-100 active" id="pills-standard" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-standard" aria-selected="true">
+          Standard
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="btn nav-link w-100" id="pills-custom" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-custom" aria-selected="false">
+          Custom
+        </button>
+      </li>
+    </ul>
+    <div id="pills-tabContent">
+      <div data-tabs-target="panel" id="pills-standard-tab" role="tabpanel" aria-labelledby="pills-standard" class="animate__animated animate__fadeIn">
+        <div class="px-3 py-2">
+          <div class="mb-3 form-group">
+            <%= f.label :preferred_font_family, Spree.t(:font_family) %>
+            <%= f.select :preferred_font_family, options_for_select(all_fonts_options, f.object.preferred_font_family), { include_blank: true }, class: 'd-none', data: { action: 'change->page-builder#refreshFontPreview', controller: 'font-picker', font_picker_fonts_from_google_value: google_fonts_list.to_json } %>
+          </div>
+          <div class="mb-3 form-group" data-controller="range-input">
+            <%= f.label :preferred_font_size_scale, Spree.t(:font_size_scale) %>
+            <%= f.range_field :preferred_font_size_scale, class: 'custom-range', min: 100, max: 150, step: 5, data: {
+              'range-input-target': 'input',
+              'action': 'change->range-input#updatePreview change->page-builder#refreshFontPreview'
+            } %>
+            <span data-range-input-target="preview">
+              <%= f.object.preferred_font_size_scale %>
+            </span>%
+          </div>
+          <hr />
+          <div class="mb-3 form-group">
+            <%= f.label :preferred_header_font_family, Spree.t(:header_font_family) %>
+            <%= f.select :preferred_header_font_family, options_for_select(all_fonts_options, f.object.preferred_header_font_family), { include_blank: true }, class: 'd-none', data: { action: 'change->page-builder#refreshFontPreview', controller: 'font-picker', font_picker_fonts_from_google_value: google_fonts_list.to_json } %>
+          </div>
+          <div class="mb-3 form-group" data-controller="range-input">
+            <%= f.label :preferred_header_font_size_scale, Spree.t(:header_font_size_scale) %>
+            <%= f.range_field :preferred_header_font_size_scale, class: 'custom-range', min: 100, max: 150, step: 5, data: {
+              'range-input-target': 'input',
+              'action': 'change->range-input#updatePreview change->page-builder#refreshFontPreview'
+            } %>
+            <span data-range-input-target="preview">
+              <%= f.object.preferred_header_font_size_scale %>
+            </span>%
+          </div>
+          <div class="mb-3 custom-control custom-checkbox">
+            <%= f.check_box :preferred_headings_uppercase, class: "custom-control-input", data: { action: 'change->page-builder#refreshFontPreview' } %>
+            <%= f.label :preferred_headings_uppercase, "Make all headings uppercase", class: "custom-control-label" %>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="tab-pane fade" id="pills-custom-tab" role="tabpanel" aria-labelledby="pills-custom">
-      <div class="px-3 py-2">
-        <div class="mb-3 form-group">
-          <div class="alert alert-warning">
-            Using custom fonts can slow down your store.
+      <div data-tabs-target="panel" id="pills-custom-tab" role="tabpanel" aria-labelledby="pills-custom" hidden class="animate__animated animate__fadeIn">
+        <div class="px-3 py-2">
+          <div class="mb-3">
+            <div class="alert alert-warning">
+              Using custom fonts can slow down your store.
+            </div>
+            <%= f.spree_text_area :preferred_custom_font_code, style: 'min-height: 6em' %>
           </div>
-          <%= f.label :preferred_custom_font_code, Spree.t(:custom_font_code) %>
-          <%= f.text_area :preferred_custom_font_code, class: 'form-control', style: 'min-height: 6em', data: { controller: 'textarea-autogrow'} %>
-        </div>
-        <%= f.submit Spree.t('actions.update'), class: 'btn btn-primary' %>
+          <%= f.submit Spree.t('actions.update'), class: 'btn btn-primary' %>
 
-        <hr class="my-4" />
+          <hr class="my-4" />
 
-        <h6>Example how to add custom fonts</h6>
-        <textarea class="bg-gray-100 rounded w-100 border-0 p-2 text-muted" style="height: 250px"><link rel="stylesheet" href="https://url.to.your.font.com/font.js" />
+          <h6>Example how to add custom fonts</h6>
+          <textarea class="bg-gray-100 rounded w-100 border-0 p-2 text-muted" style="height: 250px"><link rel="stylesheet" href="https://url.to.your.font.com/font.js" />
 <style>
   /* set font for body */
   body {
@@ -78,7 +78,8 @@
     font-family: "your font name", sans-serif;
   }
 </style>
-        </textarea>
+          </textarea>
+        </div>
       </div>
     </div>
   </div>

data/app/views/spree/admin/page_builder/_sidebar_section.html.erb

@@ -16,16 +16,14 @@
         %>
       </div>
       <div class="d-flex align-items-center d-none">
-        <% if section.can_be_sorted? %>
-          <button class="btn btn-sm pr-0 handle hover-gray-200 h-100 mr-1 px-1 handle-section">
-            <%= icon('grip-vertical', class: 'mr-0') %>
-          </button>
-        <% end %>
+        <button class="btn btn-sm pr-0 handle hover-gray-200 h-100 mr-1 px-1 handle-section">
+          <%= icon('grip-vertical', class: 'mr-0') %>
+        </button>
       </div>
     </div>
     <% if section.blocks_available?  %>
       <div class="d-flex flex-column ml-1 mb-2">
-        <%= turbo_frame_tag [:blocks, section.id].join('_'), class: 'list-group-flush collapse show' do %>
+        <%= turbo_frame_tag [:blocks, section.id].join('_'), class: 'list-group-flush' do %>
           <% if section.can_sort_blocks? %>
           <div data-controller="sortable"
             data-sortable-handle-value=".handle-block"

data/app/views/spree/admin/page_builder/_sidebar_sections.html.erb

@@ -3,7 +3,12 @@
   <h6 class="sidebar-header">Page sections</h6>
   <% if @page_preview.layout_sections? %>
     <div class="list-group-flush border-bottom mb-1 pb-2">
-      <%= render collection: @theme_preview.sections.find_all { |s| s.role == 'header' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
+      <div data-controller="sortable"
+         data-sortable-handle-value=".handle-section"
+         data-sortable-resource-name-value="page_section"
+         data-sortable-response-kind-value="turbo-stream">
+        <%= render collection: @theme_preview.sections.find_all { |s| s.role == 'header' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
+      </div>
     </div>
   <% end %>
   <div id="page-sections-list" class="list-group-flush py-2">
@@ -21,7 +26,12 @@
   </div>
   <% if @page_preview.layout_sections? %>
     <div class="list-group-flush border-top py-2">
-      <%= render collection: @theme_preview.sections.find_all { |s| s.role == 'footer' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
+      <div data-controller="sortable"
+         data-sortable-handle-value=".handle-section"
+         data-sortable-resource-name-value="page_section"
+         data-sortable-response-kind-value="turbo-stream">
+        <%= render collection: @theme_preview.sections.find_all { |s| s.role == 'footer' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
+      </div>
     </div>
   <% end %>
 </div>

data/app/views/spree/admin/page_builder/_sidebar_sections_toolbar.html.erb

@@ -9,52 +9,52 @@
     <% sections.each do |parent, section| %>
       <% next if section.new_record? %>
 
-      <% unless parent.is_a?(Spree::Theme) %>
-        <div id="editor-toolbar-section-<%= section.id %>">
-          <button class="editor-toolbar-lower">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-arrow-down"
-              viewBox="0 0 16 16"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"
-              />
-            </svg>
-          </button>
-          <button class="editor-toolbar-higher">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-arrow-up"
-              viewBox="0 0 16 16"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"
-              />
-            </svg>
-          </button>
-          <button class="editor-toolbar-edit">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-pencil"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
-              />
-            </svg>
-          </button>
+      <div id="editor-toolbar-section-<%= section.id %>">
+        <button class="editor-toolbar-lower">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-arrow-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"
+            />
+          </svg>
+        </button>
+        <button class="editor-toolbar-higher">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-arrow-up"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"
+            />
+          </svg>
+        </button>
+        <button class="editor-toolbar-edit">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-pencil"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
+            />
+          </svg>
+        </button>
+        <% if section.can_be_deleted? && can?(:destroy, section) %>
           <button class="editor-toolbar-delete">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -72,25 +72,27 @@
               />
             </svg>
           </button>
-        </div>
+        <% end %>
+      </div>
 
         <%= button_to Spree.t(:move_up),
         spree.move_higher_admin_page_section_path(parent, section),
         method: :patch,
-        id: "editor-toolbar-higher-section-#{section.id}" %>
+        id: "editor-toolbar-higher-section-#{section.id}" if can?(:update, section) %>
         <%= button_to Spree.t(:move_down),
         spree.move_lower_admin_page_section_path(parent, section),
         method: :patch,
-        id: "editor-toolbar-lower-section-#{section.id}" %>
-        <%= link_to Spree.t(:destroy),
-        spree.admin_page_section_path(section),
-        data: {
-          turbo_confirm: Spree.t(:are_you_sure),
-          turbo_method: :delete,
-        },
-        id: "editor-toolbar-delete-section-#{section.id}" %>
+        id: "editor-toolbar-lower-section-#{section.id}" if can?(:update, section) %>
+        <% if section.can_be_deleted? && can?(:destroy, section) %>
+          <%= link_to Spree.t(:destroy),
+          spree.admin_page_section_path(section),
+          data: {
+            turbo_confirm: Spree.t(:are_you_sure),
+            turbo_method: :delete,
+          },
+          id: "editor-toolbar-delete-section-#{section.id}" %>
+        <% end %>
 
-      <% end %>
 
       <% section.blocks.each do |block| %>
         <div id="editor-toolbar-block-<%= block.id %>">

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

@@ -1,4 +1,4 @@
-<% data_action = (@page_link.persisted? ? { action: 'blur->auto-submit#submit' } : {}) %>
+<% data_action = (@page_link.persisted? && !@page_link.parent.is_a?(Spree::Store) ? { action: 'blur->auto-submit#submit' } : {}) %>
 
 <div class="form-group">
   <%= f.label :linkable_type, 'Link' %>
@@ -9,8 +9,8 @@
 <hr class="my-4" />
 
 <div class="form-group">
-  <%= f.label :label, 'Name' %>
-  <%= f.text_field :label, class: 'form-control', data: data_action, placeholder: 'eg. About us', required: true %>
+  <%= f.label :label, Spree.t(:name) %>
+  <%= f.text_field :label, class: 'form-control', data: data_action, required: true %>
 </div>
 
 <div class="custom-control custom-checkbox">

data/app/views/spree/admin/page_links/_linkable_type_dropdown.html.erb

@@ -5,9 +5,9 @@
 <% elsif page_link.linkable_type == 'Spree::Post' %>
   <%= tom_select_tag "#{form_name}[linkable_id]", class: 'w-100', url: spree.select_options_admin_posts_path(format: :json), active_option: page_link.linkable_id, select_data: { action: 'auto-submit#submit' } %>
 <% elsif page_link.linkable_type == 'Spree::Page' %>
-  <%= select_tag "#{form_name}[linkable_id]", options_for_select(all_linkable_pages, page_link.linkable_id), { class: 'custom-select', data: { action: 'auto-submit#submit' } } %>
-<% elsif page_link.linkable_type == 'ActionText::RichText' %>
-  <%= select_tag "#{form_name}[linkable_id]", options_for_select(all_linkable_policies, page_link.linkable_id), { class: 'custom-select', data: { action: 'auto-submit#submit' } } %>
+  <%= select_tag "#{form_name}[linkable_id]", options_for_select(all_linkable_pages, page_link.linkable_id), { data: { controller: 'autocomplete-select', action: 'auto-submit#submit' } } %>
+<% elsif page_link.linkable_type == 'Spree::Policy' %>
+  <%= select_tag "#{form_name}[linkable_id]", options_for_select(all_linkable_policies, page_link.linkable_id), { data: { controller: 'autocomplete-select', action: 'auto-submit#submit' } } %>
 <% elsif page_link.linkable_type == 'Spree::Vendor' %>
   <%= tom_select_tag "#{form_name}[linkable_id]", class: 'w-100', url: spree.select_options_admin_vendors_path(format: :json), active_option: page_link.linkable_id, select_data: { action: 'auto-submit#submit' } %>
 <% else %>

data/app/views/spree/admin/page_links/create.turbo_stream.erb

@@ -1,4 +1,10 @@
-<%= turbo_stream.replace :page_sidebar do %>
-  <%= render template: 'spree/admin/page_links/edit' %>
-<% end %>
-<%= render 'spree/admin/page_links/refresh_theme_preview' %>
+<% if @page_link.parent.is_a?(Spree::Store) %>
+  <%= turbo_stream.replace :checkout_links do %>
+    <%= render 'spree/admin/stores/form/checkout_links' %>
+  <% end %>
+<% else %>
+  <%= turbo_stream.replace :page_sidebar do %>
+    <%= render template: 'spree/admin/page_links/edit' %>
+  <% end %>
+  <%= render 'spree/admin/page_links/refresh_theme_preview' %>
+<% end %>

data/app/views/spree/admin/page_links/destroy.turbo_stream.erb

@@ -1,11 +1,15 @@
-<%= turbo_stream.replace :page_sidebar do %>
-  <% if @page_link.parent.is_a?(Spree::PageSection) %>
-    <% @page_section = @page_link.parent %>
-    <%= render template: 'spree/admin/page_sections/edit' %>
-  <% elsif @page_link.parent.is_a?(Spree::PageBlock) %>
-    <% @page_block = @page_link.parent %>
-    <%= render template: 'spree/admin/page_blocks/edit' %>
+<% if @page_link.parent.is_a?(Spree::Store) %>
+  <%= turbo_stream.remove spree_dom_id(@page_link) %>
+<% else %>
+  <%= turbo_stream.replace :page_sidebar do %>
+    <% if @page_link.parent.is_a?(Spree::PageSection) %>
+      <% @page_section = @page_link.parent %>
+      <%= render template: 'spree/admin/page_sections/edit' %>
+    <% elsif @page_link.parent.is_a?(Spree::PageBlock) %>
+      <% @page_block = @page_link.parent %>
+      <%= render template: 'spree/admin/page_blocks/edit' %>
+    <% end %>
   <% end %>
-<% end %>
 
-<%= render 'spree/admin/page_links/refresh_theme_preview' %>
+  <%= render 'spree/admin/page_links/refresh_theme_preview' %>
+<% end %>

data/app/views/spree/admin/page_links/edit.html.erb

@@ -1,16 +1,29 @@
-<%= turbo_frame_tag :page_sidebar do %>
-  <h6 class="sidebar-header">
-    <%= link_to collection_url, data: { action: 'click->page-builder#clearActiveOverlays' }, class: 'btn hover-gray px-2' do %>
-      <%= icon 'chevron-left', class: 'mr-0' %>
+<% if @page_link.parent.is_a?(Spree::Store) %>
+  <%= turbo_frame_tag spree_dom_id(@page_link), class: 'd-flex align-items-center w-100 py-2 pl-3 pr-2' do %>
+    <%= link_to collection_url, class: 'btn-close position-absolute top-0 right-0 mt-2 mr-2' do %>
+      <%= icon 'x', class: 'mr-0' %>
     <% end %>
-    <%= @page_link.label %>
-  </h6>
-  <div class="px-3 pb-5 mb-5 edit-block">
-    <%= form_for @page_link, url: spree.admin_page_link_path(@page_link), data: { controller: 'auto-submit' } do |f| %>
+    <%= form_for @page_link, url: spree.admin_page_link_path(@page_link), data: { controller: 'auto-submit' }, html: { class: 'w-100 mt-2 mr-1 mb-2' } do |f| %>
       <%= render 'spree/admin/page_links/form', f: f %>
+      <hr class="my-3">
+      <%= render 'spree/admin/shared/edit_resource_links', f: f %>
     <% end %>
-  </div>
-  <div class="sidebar-footer">
-    <%= link_to_delete(@page_link, url: spree.admin_page_link_path(@page_link)) %>
-  </div>
-<% end %>
+  <% end %>
+<% else %>
+  <%= turbo_frame_tag :page_sidebar do %>
+    <h6 class="sidebar-header">
+      <%= link_to collection_url, data: { action: 'click->page-builder#clearActiveOverlays' }, class: 'btn hover-gray px-2' do %>
+        <%= icon 'chevron-left', class: 'mr-0' %>
+      <% end %>
+      <%= @page_link.label %>
+    </h6>
+    <div class="px-3 pb-5 mb-5 edit-block">
+      <%= form_for @page_link, url: spree.admin_page_link_path(@page_link), data: { controller: 'auto-submit' } do |f| %>
+        <%= render 'spree/admin/page_links/form', f: f %>
+      <% end %>
+    </div>
+    <div class="sidebar-footer">
+      <%= link_to_delete(@page_link, url: spree.admin_page_link_path(@page_link)) %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/page_links/update.turbo_stream.erb

@@ -1,6 +1,12 @@
-<% unless params[:sorting_only] %>
-  <%= turbo_stream.replace :page_sidebar do %>
-    <%= render template: 'spree/admin/page_links/edit' %>
+<% if @page_link.parent.is_a?(Spree::Store) %>
+  <%= turbo_stream.replace spree_dom_id(@page_link) do %>
+      <%= render template: 'spree/admin/page_links/edit' %>
+    <% end %>
+<% else %>
+  <% unless params[:sorting_only] %>
+    <%= turbo_stream.replace :page_sidebar do %>
+      <%= render template: 'spree/admin/page_links/edit' %>
+    <% end %>
   <% end %>
-<% end %>
-<%= render 'spree/admin/page_links/refresh_theme_preview' %>
+  <%= render 'spree/admin/page_links/refresh_theme_preview' %>
+<% end %>

data/app/views/spree/admin/page_sections/edit.html.erb

@@ -8,23 +8,20 @@
   </h6>
   <div class="px-3 pb-5 mb-5 edit-block" style="margin-bottom: 6rem;">
     <%= form_for @page_section, url: spree.admin_page_section_path(@page_section), data: { controller: 'auto-submit' }, as: :page_section do |f| %>
-      <div data-controller="bootstrap-tabs">
-        <%= hidden_field_tag :tab_selected, tab_selected, data: { bootstrap_tabs_target: "input" } %>
+      <div data-controller="tabs">
         <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
           <li class="nav-item" role="presentation">
-            <button class="btn nav-link w-100 <%= tab_selected == :content ? 'active' : '' %>" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="<%= tab_selected == :content %>" data-action="bootstrap-tabs#change" data-bootstrap-tabs-tab-param="content">Content</button>
+            <button class="btn nav-link w-100 <%= tab_selected == :content ? 'active' : '' %>" id="pills-home-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-home" aria-selected="<%= tab_selected == :content %>">Content</button>
           </li>
           <li class="nav-item" role="presentation">
-            <button class="btn nav-link w-100 <%= tab_selected == :design ? 'active' : '' %>" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="<%= tab_selected == :design %>" data-action="bootstrap-tabs#change" data-bootstrap-tabs-tab-param="design">Design</button>
+            <button class="btn nav-link w-100 <%= tab_selected == :design ? 'active' : '' %>" id="pills-profile-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-profile" aria-selected="<%= tab_selected == :design %>">Design</button>
           </li>
         </ul>
-      </div>
-      <div class="tab-content" id="pills-tabContent">
-        <div class="tab-pane fade <%= tab_selected == :content ? 'show active' : '' %>" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+        <div data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate__animated animate__fadeIn" <%= 'hidden' unless tab_selected == :content %>>
           <%= render "spree/admin/page_sections/forms/#{@page_section.type.demodulize.underscore}", f: f  %>
           <%= render 'spree/admin/page_sections/form_tab_buttons', tab: :content %>
         </div>
-        <div class="tab-pane fade <%= tab_selected == :design ? 'show active' : '' %>" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+        <div data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" class="animate__animated animate__fadeIn" <%= 'hidden' unless tab_selected == :design %>>
           <%= render 'spree/admin/page_sections/fields/top_padding', f: f %>
           <%= render 'spree/admin/page_sections/fields/bottom_padding', f: f %>
           <%= render 'spree/admin/page_sections/fields/background_color', f: f %>

data/app/views/spree/admin/page_sections/forms/_image_with_text.html.erb

@@ -1,5 +1,4 @@
 <%= render 'spree/admin/shared/page_section_image', f: f %>
-
 <div class="py-2">
   <%= f.fields_for :link do |lf| %>
     <div class="form-group">
@@ -9,15 +8,13 @@
         <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: lf.object, form_name: 'page_section[link_attributes]' %>
       </div>
     </div>
-
-    <div class="custom-control custom-checkbox pb-2">
+    <div class="pb-2 custom-control custom-checkbox">
       <%= lf.check_box :open_in_new_tab, class: 'custom-control-input', data: { action: 'auto-submit#submit' } %>
       <%= lf.label :open_in_new_tab, class: 'custom-control-label' %>
-      <span class="text-muted form-text mt-2">Clicking on the image will send the user to the selected page/URL</span>
+      <span class="mt-2 text-muted form-text"><%= Spree.t('admin.page_builder.image_click_hint') %></span>
     </div>
   <% end %>
 </div>
-
 <% content_for(:design_tab) do %>
   <div class="form-group">
     <%= f.label :preferred_desktop_image_alignment, Spree.t('admin.page_builder.desktop_image_alignment') %>

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

@@ -5,10 +5,7 @@
     </h5>
   </div>
   <div class="card-body">
-    <div class="form-group">
-      <%= f.label :name, Spree.t(:name) %>
-      <%= f.text_field :name, class: 'form-control', required: true, data: { slug_form_target: :name, action: 'slug-form#updateUrlFromName', seo_form_target: 'sourceTitleInput' }, autofocus: true %>
-    </div>
+    <%= f.spree_text_field :name, required: true, data: { slug_form_target: :name, action: 'slug-form#updateUrlFromName', seo_form_target: 'sourceTitleInput' }, autofocus: true %>
   </div>
 </div>
 <%= render 'spree/admin/shared/seo',

data/app/views/spree/admin/pages/_table_header.html.erb

@@ -0,0 +1,6 @@
+<tr>
+  <th scope="col"><%= sort_link search_collection, :name, Spree.t(:name) %></th>
+  <th scope="col"><%= sort_link search_collection, :created_at, Spree.t(:created_at) %></th>
+  <th scope="col"><%= sort_link search_collection, :updated_at, Spree.t(:updated_at) %></th>
+  <th scope="col"></th>
+</tr>

data/app/views/spree/admin/pages/_table_row.html.erb

@@ -0,0 +1,28 @@
+<tr id="<%= dom_id page %>" data-controller="row-link" class="cursor-pointer">
+  <td scope="row" data-action="click->row-link#openLink" class="w-60">
+    <%= link_to page.name, spree.edit_admin_theme_path(current_store.default_theme, page_id: page.id), data: { row_link_target: :link, turbo_frame: '_top', turbo_prefetch: false } %>
+  </td>
+  <td data-action="click->row-link#openLink" class="w-15">
+    <%= spree_time_ago(page.created_at) %>
+  </td>
+  <td data-action="click->row-link#openLink" class="w-15">
+    <%= spree_time_ago(page.updated_at) %>
+  </td>
+  <td class="w-10 text-right">
+    <%= dropdown do %>
+      <%= dropdown_toggle class: 'btn-light btn-sm' do %>
+        <%= icon('dots-vertical', class: 'mr-0') %>
+      <% end %>
+      <%= dropdown_menu do %>
+        <ul class="list-unstyled mb-0">
+          <li>
+            <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_theme_path(current_store.default_theme, page_id: page.id), class: 'dropdown-item', data: { turbo_frame: '_top', turbo_prefetch: false } %>
+          </li>
+          <li>
+            <%= link_to_delete(page, class: 'dropdown-item btn-danger', icon: 'trash') %>
+          </li>
+        </ul>
+      <% end %>
+    <% end %>
+  </td>
+</tr>

data/app/views/spree/admin/pages/edit.html.erb

@@ -1,15 +1,13 @@
-<%= turbo_frame_tag :dialog_modal do %>
+<%= turbo_frame_tag :dialog do %>
   <%= form_with model: @page, url: spree.admin_page_path(@page), data: { controller: 'slug-form seo-form' }, scope: :page do |f| %>
-    <div class="modal-content">
-      <%= modal_header(@page.display_name) %>
-      <div class="modal-body">
-        <%= render 'spree/admin/shared/error_messages', target: @page %>
-        <%= render 'form', f: f, vertical: true %>
-      </div>
-      <div class="modal-footer">
-        <%= turbo_save_button_tag Spree.t('actions.save'), data: {turbo_frame: :_top} %>
-        <%= link_to Spree.t('actions.destroy'), spree.admin_page_path(@page.id), data: { turbo_method: :delete, turbo_frame: '_top', turbo_confirm: Spree.t(:are_you_sure )}, class: 'btn btn-danger ml-auto' %>
-      </div>
+    <%= dialog_header(@page.display_name) %>
+    <div class="dialog-body">
+      <%= render 'spree/admin/shared/error_messages', target: @page %>
+      <%= render 'form', f: f, vertical: true %>
+    </div>
+    <div class="dialog-footer">
+      <%= turbo_save_button_tag Spree.t('actions.save'), data: {turbo_frame: :_top} %>
+      <%= link_to Spree.t('actions.destroy'), spree.admin_page_path(@page.id), data: { turbo_method: :delete, turbo_frame: '_top', turbo_confirm: Spree.t(:are_you_sure )}, class: 'btn btn-danger ml-auto' %>
     </div>
   <% end %>
 <% end %>