spree_page_builder 5.3.0.rc1

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

@@ -0,0 +1,86 @@
+<div id="sidebar-colors">
+  <h6 class="sidebar-header">
+    <%= Spree.t(:theme) %>
+  </h6>
+
+  <%= form_for @theme_preview, as: :theme, url: spree.admin_theme_path(@theme_preview), method: :put, data: { 'page-builder-target': 'form' } do |f| %>
+    <div data-controller="tabs">
+      <ul class="nav nav-pills nav-fill m-4" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link w-full active" id="pills-home-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Color scheme</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link w-full" id="pills-profile-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Elements</button>
+        </li>
+      </ul>
+      <div id="pills-tabContent">
+        <div data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate-fade-in">
+          <div class="px-4 py-2" data-controller="color-palette">
+            <% color_palettes.each do |color_palette| %>
+              <%#= render 'spree/admin/page_builder/color_palette',
+                active: color_palette_active?(color_palette),
+                primary_color: color_palette[:primary_color],
+                text_color: color_palette[:text_color],
+                border_color: color_palette[:border_color],
+                button_background_color: color_palette[:button_background_color],
+                button_text_color: color_palette[:button_text_color],
+                background_color: color_palette[:background_color]
+              %>
+            <% end %>
+
+            <%# <hr class="my-4 bg-gray-25" /> %>
+
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_primary_color, label: Spree.t("theme_settings.brand_color"),
+                          value: @theme_preview.preferred_primary_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_text_color, label: Spree.t("theme_settings.text_color"),
+                          value: @theme_preview.preferred_text_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_button_text_color, label: Spree.t("theme_settings.button_text_color"),
+                          value: @theme_preview.preferred_button_text_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_input_text_color, label: Spree.t("theme_settings.input_text_color"),
+                          value: @theme_preview.preferred_input_text_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_border_color, label: Spree.t("theme_settings.border_color"),
+                          value: @theme_preview.preferred_border_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_button_border_color, label: Spree.t("theme_settings.button_border_color"),
+                          value: @theme_preview.preferred_button_border_color, action: 'change->page-builder#refreshPreview', clear: true %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_background_color, label: Spree.t("theme_settings.background_color"),
+                          value: @theme_preview.preferred_background_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_accent_color, label: Spree.t("theme_settings.accent_color"),
+                          value: @theme_preview.preferred_accent_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_danger_color, label: Spree.t("theme_settings.danger_color"),
+                          value: @theme_preview.preferred_danger_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_neutral_color, label: Spree.t("theme_settings.neutral_color"),
+                          value: @theme_preview.preferred_neutral_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_success_color, label: Spree.t("theme_settings.success_color"),
+                          value: @theme_preview.preferred_success_color, action: 'change->page-builder#refreshPreview' %>
+          </div>
+        </div>
+        <div data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" hidden class="animate-fade-in">
+          <div class="px-4 py-2">
+            <%= render 'spree/admin/page_builder/range_input',
+              f: f, field: :preferred_button_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
+            %>
+            <%= render 'spree/admin/page_builder/range_input',
+              f: f, field: :preferred_button_border_thickness, min: 0, max: 10, unit: 'px', action: 'change->page-builder#refreshPreview'
+            %>
+            <hr>
+
+            <%= render 'spree/admin/page_builder/range_input',
+              f: f, field: :preferred_input_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
+            %>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

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| %>
+  <div data-controller="tabs">
+    <ul class="nav nav-pills nav-fill m-4" id="pills-tab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link w-full 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="nav-link w-full" 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-fade-in">
+        <div class="px-4 py-2">
+          <div class="mb-4 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: 'hidden', 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-4 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: 'hidden', 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-4 custom-control form-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 data-tabs-target="panel" id="pills-custom-tab" role="tabpanel" aria-labelledby="pills-custom" hidden class="animate-fade-in">
+        <div class="px-4 py-2">
+          <div class="mb-4">
+            <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', label: Spree.t(:custom_font_code) %>
+          </div>
+          <%= f.submit Spree.t('actions.update'), class: 'btn btn-primary' %>
+
+          <hr class="my-6" />
+
+          <h6 class="mb-3">Example how to add custom fonts</h6>
+          <textarea class="form-input h-[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>
+  </div>
+<% end %>

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

@@ -0,0 +1,44 @@
+<% 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="flex items-center justify-between sidebar-section-title py-1 rounded-xl"
+         data-action="mouseover->page-builder#toggleHighlightElement mouseout->page-builder#toggleHighlightElement"
+      data-page-builder-editor-id-param="section-<%= section.id %>">
+      <div class="flex items-center flex-1 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-1 font-bold text-gray-900',
+            data: {
+              turbo_frame: :page_sidebar,
+              action: 'click->page-builder#makeOverlayActive',
+              page_builder_editor_id_param: "section-#{section.id}"
+            }
+        %>
+      </div>
+      <div class="flex items-center hidden">
+        <button class="btn btn-sm pr-0 handle hover:bg-gray-100 h-full mr-1 px-1 handle-section shadow-none">
+          <%= icon('grip-vertical', class: 'mr-0') %>
+        </button>
+      </div>
+    </div>
+    <% if section.blocks_available?  %>
+      <div class="flex flex-col ml-1 mb-2">
+        <%= 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-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,38 @@
+<%= turbo_frame_tag :page_sidebar do %>
+<div class="hidden md:block">
+  <h6 class="sidebar-header">Page sections</h6>
+  <% if @page_preview.layout_sections? %>
+    <div class="list-group-flush border-b mb-1 pb-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 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">
+    <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-4">
+    <%= link_to_with_icon 'new-section', Spree.t(:add_section), spree.new_admin_page_section_path(@page_preview), class: 'btn btn-primary rounded-full uppercase w-full my-2 py-2' %>
+  </div>
+  <% if @page_preview.layout_sections? %>
+    <div class="list-group-flush border-t 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 collection: @theme_preview.sections.find_all { |s| s.role == 'footer' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
+      </div>
+    </div>
+  <% end %>
+</div>
+<% end if @page_preview.present? %>

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

@@ -0,0 +1,180 @@
+<%= turbo_frame_tag :page_sidebar_toolbar do %>
+  <div class="hidden">
+    <% sections =
+      @page_preview.sections.includes(:blocks).map { |s| [@page_preview, s] } %>
+
+    <% sections +=
+      @theme_preview.sections.includes(:blocks).map { |s| [@theme_preview, s] } %>
+
+    <% sections.each do |parent, 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>
+        <% if section.can_be_deleted? && can?(:destroy, section) %>
+          <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>
+        <% 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}" 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}" 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 %>
+
+
+      <% 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,10 @@
+<% data_action = (@page_link.persisted? && !@page_link.parent.is_a?(Spree::Store) ? { action: 'blur->auto-submit#submit' } : {}) %>
+
+<%= f.spree_select :linkable_type, @page_link.parent.allowed_linkable_types, { label: 'Link', include_blank: false }, { class: 'form-select mb-6', data: { action: 'auto-submit#submit' } } %>
+<%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: @page_link, form_name: 'page_link' %>
+
+<hr class="my-6" />
+
+<%= f.spree_text_field :label, label: Spree.t(:name), data: data_action, required: true %>
+
+<%= f.spree_check_box :open_in_new_tab, data: data_action %>

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-full', 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-full', 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-full', 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), { 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-full', 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-input", 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-6">
+  <h5 class="font-bold">Links</h5>
+
+  <% if parent.links.any? %>
+    <ul class="list-group mb-6"
+        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 flex items-center hover:bg-gray-100"
+            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: 'block py-4 px-6 text-gray-900 flex-1' %>
+          <button class="btn btn-sm pr-0 handle hover:bg-gray-100 h-full mr-1 px-1 shadow-none">
+            <%= icon 'grip-vertical', class: 'mr-0' %>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+  <% else %>
+    <p class="text-gray-600 text-center p-12">
+      <%= 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 = spree.admin_page_section_links_path(parent) %>
+    <% elsif parent.is_a?(Spree::PageBlock) %>
+      <% add_url = spree.admin_page_section_block_links_path(parent.section, parent) %>
+    <% end %>
+
+    <%= link_to_with_icon 'plus', Spree.t(:add_link), add_url, class: 'btn btn-primary w-full', 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,10 @@
+<% 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

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

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

@@ -0,0 +1,27 @@
+<% if @page_link.parent.is_a?(Spree::Store) %>
+  <%= turbo_frame_tag spree_dom_id(@page_link), class: 'flex items-center w-full py-2 pl-6 pr-2' do %>
+    <%= link_to '', collection_url, class: 'btn-close absolute top-0 right-0 mt-4 mr-4' %>
+    <%= form_for @page_link, url: spree.admin_page_link_path(@page_link), data: { controller: 'auto-submit' }, html: { class: 'w-full mt-4 mr-1 mb-4' } do |f| %>
+      <%= render 'spree/admin/page_links/form', f: f %>
+      <hr class="my-6">
+      <%= render 'spree/admin/shared/edit_resource_links', f: f %>
+    <% 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:bg-gray-100 shadow-none px-3' do %>
+        <%= icon 'chevron-left', class: 'mr-0' %>
+      <% end %>
+      <%= @page_link.label %>
+    </h6>
+    <div class="px-6 pb-12 mb-12 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

@@ -0,0 +1,14 @@
+<% if @page_link.parent.is_a?(Spree::Store) %>
+  <% unless params[:sorting_only] %>
+    <%= turbo_stream.replace spree_dom_id(@page_link) do %>
+      <%= render template: 'spree/admin/page_links/edit' %>
+    <% end %>
+  <% end %>
+<% else %>
+  <% 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' %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<div class="sidebar-footer">
+  <% if @page_section.can_be_deleted? %>
+    <%= link_to_delete(@page_section, url: spree.admin_page_section_path(@page_section)) %>
+  <% end %>
+  <% 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 btn-sm ml-auto'} %>
+  <% end %>
+</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 %>