spree_admin 5.0.0.rc1

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

@@ -0,0 +1,85 @@
+<h6 class="sidebar-header">
+  <%= Spree.t(:fonts) %>
+</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>
+      </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>
+          <%= 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' %>
+
+        <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" />
+<style>
+  /* set font for body */
+  body {
+    font-family: "your font name", sans-serif;
+  }
+  /* set font for headings */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: "your font name", sans-serif;
+  }
+</style>
+        </textarea>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,46 @@
+<% if section.persisted? %>
+  <%= turbo_frame_tag dom_id(section), class: 'list-group-item py-0 border-0 sidebar-page-section draggable rounded-sm',
+                                       data: { sortable_update_url: spree.admin_page_section_path(section, format: :turbo_stream) } do %>
+    <div class="d-flex align-items-center justify-content-between sidebar-section-title py-1 rounded"
+         data-action="mouseover->page-builder#toggleHighlightElement mouseout->page-builder#toggleHighlightElement"
+      data-page-builder-editor-id-param="section-<%= section.id %>">
+      <div class="d-flex align-items-center flex-fill py-1 px-2">
+        <%= icon("#{section.icon_name}", height: 18, class: 'mr-2') if section.icon_name.present? %>
+        <%= link_to section.display_name, spree.edit_admin_page_section_path(section),
+            class: 'section-edit-link flex-fill font-weight-bold text-dark',
+            data: {
+              turbo_frame: :page_sidebar,
+              action: 'click->page-builder#makeOverlayActive',
+              page_builder_editor_id_param: "section-#{section.id}"
+            }
+        %>
+      </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 %>
+      </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 %>
+          <% if section.can_sort_blocks? %>
+          <div data-controller="sortable"
+            data-sortable-handle-value=".handle-block"
+            data-sortable-resource-name-value="page_block"
+            data-sortable-response-kind-value="turbo-stream">
+          <% else %>
+          <div>
+          <% end %>
+            <%= render partial: 'spree/admin/page_builder/sidebar_block', collection: section.blocks.includes(:rich_text_text), as: :block %>
+          </div>
+        <% end %>
+        <% if section.available_blocks_to_add.any? %>
+          <%= render 'spree/admin/page_builder/add_block', section: section %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,33 @@
+<%= turbo_frame_tag :page_sidebar do %>
+<div class="d-none d-md-block">
+  <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>
+  <% end %>
+  <div id="page-sections-list" class="list-group-flush py-2">
+    <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 partial: 'spree/admin/page_builder/sidebar_section', 
+                 collection: @page_preview.sections.includes(:blocks),
+                 as: :section  %>
+    </div>
+  </div>
+  <div class="px-3">
+    <%= link_to_with_icon 'new-section', Spree.t(:add_section), spree.new_admin_page_section_path(@page_preview), class: 'btn btn-primary rounded-pill text-uppercase w-100 my-2 py-2' %>
+  </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>
+  <% end %>
+</div>
+<div class="d-flex justify-content-center pt-5 d-md-none align-items-center">
+  <div class="spinner-border" role="status">
+  </div>
+  <p class="ml-2 m-0"><%= Spree.t(:loading) %>...</p>
+</div>
+<% end if @page_preview.present? %>

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

@@ -0,0 +1,65 @@
+<%= turbo_frame_tag :page_sidebar_toolbar do %>
+  <div class="d-none">
+    <% @page_preview.sections.includes(:blocks).each do |section| %>
+      <% next if section.new_record? %>
+
+      <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>
+        <button class="editor-toolbar-delete">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
+            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
+          </svg>
+        </button>
+      </div>
+
+      <%= button_to Spree.t(:move_up), spree.move_higher_admin_page_section_path(@page_preview, section), method: :patch, id: "editor-toolbar-higher-section-#{section.id}" %>
+      <%= button_to Spree.t(:move_down), spree.move_lower_admin_page_section_path(@page_preview, 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}" %>
+
+      <% section.blocks.each do |block| %>
+        <div id="editor-toolbar-block-<%= block.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>
+          <button class="editor-toolbar-delete">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
+              <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
+            </svg>
+          </button>
+        </div>
+
+        <%= button_to Spree.t(:move_up), spree.move_higher_admin_page_section_block_path(section, block), method: :patch, id: "editor-toolbar-higher-block-#{block.id}" %>
+        <%= button_to Spree.t(:move_down), spree.move_lower_admin_page_section_block_path(section, block), method: :patch, id: "editor-toolbar-lower-block-#{block.id}" %>
+        <%= link_to Spree.t(:destroy), spree.admin_page_section_block_path(section, block), data: { turbo_confirm: Spree.t(:are_you_sure), turbo_method: :delete }, id: "editor-toolbar-delete-block-#{block.id}" %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,19 @@
+<% data_action = (@page_link.persisted? ? { action: 'blur->auto-submit#submit' } : {}) %>
+
+<div class="form-group">
+  <%= f.label :linkable_type, 'Link' %>
+  <%= f.select :linkable_type, @page_link.parent.allowed_linkable_types, { include_blank: false }, { class: 'custom-select mb-3', data: { action: 'auto-submit#submit' } } %>
+  <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: @page_link, form_name: 'page_link' %>
+</div>
+
+<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 %>
+</div>
+
+<div class="custom-control custom-checkbox">
+  <%= f.check_box :open_in_new_tab, class: 'custom-control-input', data: data_action %>
+  <%= f.label :open_in_new_tab, class: 'custom-control-label' %>
+</div>

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

@@ -0,0 +1,15 @@
+<% if page_link.linkable_type == 'Spree::Product' %>
+  <%= tom_select_tag "#{form_name}[linkable_id]", class: 'w-100', url: spree.select_options_admin_products_path(format: :json), active_option: page_link.linkable_id, select_data: { action: 'auto-submit#submit' } %>
+<% elsif page_link.linkable_type == 'Spree::Taxon' %>
+  <%= tom_select_tag "#{form_name}[linkable_id]", class: 'w-100', url: spree.admin_taxons_select_options_path(format: :json, with_automatic: true), active_option: page_link.linkable_id, select_data: { action: 'auto-submit#submit' } %>
+<% 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' } } %>
+<% 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 %>
+  <%= text_field_tag "#{form_name}[url]", page_link.url, class: "form-control", required: true, placeholder: 'eg. google.com', data: { action: 'blur->auto-submit#submit' } %>
+<% end %>

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

@@ -0,0 +1,36 @@
+<div class="mb-4">
+  <h5 class="font-weight-bold">Links</h5>
+
+  <% if parent.links.any? %>
+    <ul class="list-group mb-3"
+        data-controller="sortable"
+        data-sortable-handle-value=".handle"
+        data-sortable-resource-name-value="page_link"
+        data-sortable-response-kind-value="turbo-stream">
+      <% parent.links.each do |link| %>
+        <li class="list-group-item p-0 d-flex align-items-center hover-gray"
+            data-sortable-update-url="<%= spree.admin_page_link_path(link, sorting_only: true, format: :turbo_stream) %>"
+        >
+          <%= link_to link.label, spree.edit_admin_page_link_path(link), class: 'd-block py-2 px-3 text-dark flex-fill' %>
+          <button class="btn btn-sm pr-0 handle hover-gray-200 h-100 mr-1 px-1">
+            <%= icon 'grip-vertical', class: 'mr-0' %>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+  <% else %>
+    <p class="text-muted text-center p-5">
+      <%= Spree.t(:no_resource_found, resource: Spree::PageLink.model_name.human) %>
+    </p>
+  <% end %>
+
+  <% if show_add_link_button %>
+    <% if parent.is_a?(Spree::PageSection) %>
+      <% add_url = admin_page_section_links_path(parent) %>
+    <% elsif parent.is_a?(Spree::PageBlock) %>
+      <% add_url = admin_page_section_block_links_path(parent.section, parent) %>
+    <% end %>
+
+    <%= link_to_with_icon 'plus', 'Add link', add_url, class: 'btn btn-primary w-100', data: { turbo_method: :post } if add_url && can?(:create, Spree::PageLink.new(parent: parent)) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,5 @@
+<% if @page_link.parent.is_a?(Spree::PageBlock) %>
+  <%= refresh_theme_preview(@page_link.parent.section, @page_link.parent) %>
+<% else %>
+  <%= refresh_theme_preview(@page_link.parent) %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<%= turbo_stream.replace :page_sidebar do %>
+  <%= render template: 'spree/admin/page_links/edit' %>
+<% end %>
+<%= render 'spree/admin/page_links/refresh_theme_preview' %>

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

@@ -0,0 +1,11 @@
+<%= 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 %>
+
+<%= render 'spree/admin/page_links/refresh_theme_preview' %>

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

@@ -0,0 +1,18 @@
+<%= 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="position-fixed border-top bg-light bottom-bar" style="bottom: 0px; width:344px; z-index: 9999">
+    <div class="px-3 py-2" data-action="click->page-builder#hideSidebarMobile">
+      <%= link_to_delete(@page_link, url: spree.admin_page_link_path(@page_link)) %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,6 @@
+<% unless params[:sorting_only] %>
+  <%= turbo_stream.replace :page_sidebar do %>
+    <%= render template: 'spree/admin/page_links/edit' %>
+  <% end %>
+<% end %>
+<%= render 'spree/admin/page_links/refresh_theme_preview' %>

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

@@ -0,0 +1,12 @@
+<div class="sidebar-footer">
+  <div class="d-flex align-items-center justify-content-end w-100">
+    <% if tab == :design %>
+      <%= link_to_with_icon "restore", Spree.t(:restore_defaults), spree.restore_design_settings_to_defaults_admin_page_section_path(@page_section), {data: {turbo_confirm: Spree.t(:are_you_sure), turbo_method: :patch }, class: 'btn btn-light'} %>
+    <% end %>
+    <% if @page_section.can_be_deleted? %>
+      <div data-action="click->page-builder#hideSidebarMobile" class="ml-auto">
+        <%= link_to_delete(@page_section, url: spree.admin_page_section_path(@page_section)) %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+<% if @page_section&.persisted? %>
+  <%= turbo_stream.replace :page_sidebar do %>
+    <%= render template: 'spree/admin/page_sections/edit' %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace 'page_sidebar_toolbar' do %>
+  <%= render 'spree/admin/page_builder/sidebar_sections_toolbar' %>
+<% end %>
+
+<%= refresh_theme_preview(@page_section) %>

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

@@ -0,0 +1,16 @@
+<%= turbo_stream.replace :page_sidebar do %>
+  <%= render 'spree/admin/page_builder/sidebar_sections' %>
+<% end %>
+
+<%= turbo_stream.replace 'page_sidebar_toolbar' do %>
+  <%= render 'spree/admin/page_builder/sidebar_sections_toolbar' %>
+<% end %>
+
+<%= turbo_stream.replace :iframe_preview_scripts do %>%
+  <%= turbo_frame_tag :iframe_preview_scripts do %>
+    <script>
+      document.getElementById('page-builder-preview').contentDocument.body.querySelector('turbo-frame[id="section-<%= @page_section.id %>"]').remove()
+      document.getElementById('delete-callback').click()
+    </script>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,42 @@
+<%= turbo_frame_tag :page_sidebar do %>
+  <% tab_selected ||= :content %>
+  <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 back' %>
+    <% end %>
+    <%= @page_section.display_name %>
+  </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" } %>
+        <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>
+          </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>
+          </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">
+          <%= 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">
+          <%= 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 %>
+          <%= render 'spree/admin/page_sections/fields/text_color', f: f %>
+          <%= render 'spree/admin/page_sections/fields/border_color', f: f %>
+          <%= render 'spree/admin/page_sections/fields/border_top_width', f: f %>
+          <%= render 'spree/admin/page_sections/fields/border_bottom_width', f: f %>
+          <%= render 'spree/admin/page_sections/fields/button', f: f %>
+          <%= yield(:design_tab) %>
+          <%= render 'spree/admin/page_sections/form_tab_buttons', tab: :design %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_sections/fields/_background_color.html.erb

@@ -0,0 +1,6 @@
+<%= render 'spree/admin/page_builder/color_picker',
+      f: f,
+      field: :preferred_background_color,
+      value: f.object.preferred_background_color.presence,
+      label: Spree.t('admin.page_builder.background_color'),
+      action: 'change->auto-submit#submit' %>

data/app/views/spree/admin/page_sections/fields/_border_bottom_width.html.erb

@@ -0,0 +1,5 @@
+<%= render 'spree/admin/page_builder/range_input',
+      f: f,
+      field: :preferred_bottom_border_width, min: 0, max: 100, unit: 'px',
+      label: Spree.t('admin.page_builder.border_bottom_width')
+%>

data/app/views/spree/admin/page_sections/fields/_border_color.html.erb

@@ -0,0 +1,7 @@
+<%= render 'spree/admin/page_builder/color_picker',
+      f: f,
+      field: :preferred_border_color,
+      value: f.object.preferred_border_color.presence,
+      label: Spree.t('admin.page_builder.border_color'),
+      action: 'change->auto-submit#submit' %>
+

data/app/views/spree/admin/page_sections/fields/_border_top_width.html.erb

@@ -0,0 +1,6 @@
+<%= render 'spree/admin/page_builder/range_input',
+      f: f,
+      field: :preferred_top_border_width,
+      min: 0, max: 100, unit: 'px',
+      label: Spree.t('admin.page_builder.border_top_width')
+%>

data/app/views/spree/admin/page_sections/fields/_bottom_padding.html.erb

@@ -0,0 +1,5 @@
+<%= render 'spree/admin/page_builder/range_input',
+      f: f, field: :preferred_bottom_padding,
+      min: 0, max: 100, unit: 'px',
+      label: Spree.t('admin.page_builder.bottom_padding')
+%>

data/app/views/spree/admin/page_sections/fields/_button.html.erb

@@ -0,0 +1,15 @@
+<% if f.object.respond_to?(:preferred_button_background_color) %>
+  <%= render 'spree/admin/page_builder/color_picker',
+              f: f, field: :preferred_button_background_color, value: f.object.preferred_button_background_color.presence,
+              label: Spree.t('admin.page_builder.button_background_color'),
+              clear: true,
+              action: 'change->auto-submit#submit' %>
+<% end %>
+
+<% if f.object.respond_to?(:preferred_button_text_color) %>
+  <%= render 'spree/admin/page_builder/color_picker',
+              f: f, field: :preferred_button_text_color, value: f.object.preferred_button_text_color.presence,
+              label: Spree.t('admin.page_builder.button_text_color'),
+              clear: true,
+              action: 'change->auto-submit#submit' %>
+<% end %>

data/app/views/spree/admin/page_sections/fields/_header_layout.html.erb

@@ -0,0 +1,26 @@
+<label>Layout (desktop)</label>
+
+<div class="flex mt-2 radio-buttons-header">
+  <label>
+    <%= f.radio_button :preferred_layout, 'nav-centered', class: 'hidden', data: { action: 'change->auto-submit#submit' } %>
+    <p class="btn-light"><%= Spree.t('admin.page_builder.nav_centered') %></p>
+  </label>
+  <label>
+    <%= f.radio_button :preferred_layout, 'logo-centered', class: 'hidden', data: { action: 'change->auto-submit#submit' } %>
+    <p class="btn-light"><%= Spree.t('admin.page_builder.logo_centered') %></p>
+  </label>
+  <label>
+    <%= f.radio_button :preferred_layout, 'left', class: 'hidden', data: { action: 'change->auto-submit#submit' } %>
+    <p class="btn-light"><%= Spree.t('admin.page_builder.left_aligned') %></p>
+  </label>
+</div>
+
+<div class="mt-2">
+  <%= render 'spree/admin/page_builder/range_input',
+    f: f,
+    field: :preferred_desktop_logo_height,
+    min: 0, max: 120, unit: 'px',
+    label: Spree.t('admin.page_builder.desktop_logo_height'),
+    label_for_min_value: "auto"
+  %>
+</div>

data/app/views/spree/admin/page_sections/fields/_height.html.erb

@@ -0,0 +1,6 @@
+<%= render 'spree/admin/page_builder/range_input',
+  f: f,
+  field: :preferred_height,
+  min: 192, max: 600, unit: 'px',
+  label: Spree.t('admin.page_builder.height')
+%>

data/app/views/spree/admin/page_sections/fields/_text_color.html.erb

@@ -0,0 +1,7 @@
+<%= render 'spree/admin/page_builder/color_picker',
+      f: f,
+      field: :preferred_text_color,
+      value: f.object.preferred_text_color.presence,
+      label: Spree.t('admin.page_builder.text_color'),
+      action: 'change->auto-submit#submit'
+%>

data/app/views/spree/admin/page_sections/fields/_top_padding.html.erb

@@ -0,0 +1,6 @@
+<%= render 'spree/admin/page_builder/range_input',
+  f: f,
+  field: :preferred_top_padding,
+  min: 0, max: 100, unit: 'px',
+  label: Spree.t('admin.page_builder.top_padding')
+%>

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

@@ -0,0 +1,5 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-3' %>
+</div>

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

@@ -0,0 +1,4 @@
+<p class="text-muted">
+  You can use all HTML tags, JavaScript or CSS here
+</p>
+<%= f.text_area :preferred_custom_code, rows: 10, class: 'mb-3 form-control', data: { action: 'auto-submit#submit' } %>

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

@@ -0,0 +1,38 @@
+<div class="form-group">
+  <%= f.label :preferred_heading, Spree.t('admin.page_builder.heading') %>
+  <%= f.text_field :preferred_heading, data: { action: 'auto-submit#submit' }, class: "form-control" %>
+</div>
+<div class="form-group">
+  <%= f.label :preferred_heading_size, Spree.t('admin.page_builder.heading_size') %>
+  <%= f.select :preferred_heading_size, options_for_select([ ["Small", 'small'], ["Medium", 'medium'], ["Large", 'large'] ], @page_section.preferred_heading_size ), {}, data: { action: 'auto-submit#submit' }, class: "custom-select" %>
+</div>
+<div class="form-group">
+  <%= f.label :preferred_heading_alignment, Spree.t('admin.page_builder.heading_alignment') %>
+  <%= f.select :preferred_heading_alignment, options_for_select([ ["Left", "left"], ["Center", "center"], ["Right", "right"] ], @page_section.preferred_heading_alignment ), {}, data: { action: 'auto-submit#submit' }, class: "custom-select" %>
+</div>
+<div class="form-group">
+  <%= f.label :description %>
+  <div class="trix-container">
+    <%= f.rich_text_area :description, data: {action: 'trix-change->auto-submit#submit'}, class: 'mb-3 w-full' %>
+  </div>
+</div>
+<div class="form-group">
+  <%= f.label :preferred_description_alignment, Spree.t('admin.page_builder.description_alignment') %>
+  <%= f.select :preferred_description_alignment, options_for_select([ ["Left", "left"], ["Center", "center"], ["Right", "right"] ], @page_section.preferred_description_alignment ), {}, data: { action: 'auto-submit#submit' }, class: "custom-select" %>
+</div>
+
+<div class="form-group">
+  <%= f.label :preferred_posts_to_show, Spree.t('admin.page_builder.posts_to_show') %>
+  <%= f.select :preferred_posts_to_show, options_for_select([["Newest", "newest"], ["Most popular", "most_popular"]], @page_section.preferred_posts_to_show), {}, data: { action: 'auto-submit#submit' }, class: "custom-select" %>
+</div>
+
+<div class="form-group">
+  <div data-controller="better-slider">
+    <label><%= Spree.t('admin.page_builder.maximum_posts_to_show') %>: <span data-better-slider-target="currentValueLabel"></span></label>
+    <div class="flex flex-row w-full">
+      <span class="mr-2">2</span>
+      <%= f.range_field :preferred_max_posts_to_show, class: "custom-range w-full", min: 2, max: 8, data: {'better-slider-target': 'rangeInput', action: 'auto-submit#submit'} %>
+      <span class="ml-2">8</span>
+    </div>
+  </div>
+</div>