spree_page_builder 5.3.0.rc1

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

@@ -0,0 +1,39 @@
+<%= 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:bg-gray-100 shadow-none px-3' do %>
+      <%= icon 'chevron-left', class: 'mr-0 back' %>
+    <% end %>
+    <%= @page_section.display_name %>
+  </h6>
+  <div class="p-3 edit-block">
+    <%= form_for @page_section, url: spree.admin_page_section_path(@page_section), data: { controller: 'auto-submit' }, as: :page_section do |f| %>
+      <div data-controller="tabs">
+        <ul class="nav nav-pills nav-fill mb-6" id="pills-tab" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link w-full <%= 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="nav-link w-full <%= 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 data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate-fade-in" <%= '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 data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" class="animate-fade-in" <%= '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 %>
+          <%= 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-4' %>
+</div>

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

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

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

@@ -0,0 +1,33 @@
+<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-input" %>
+</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: "form-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: "form-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-4 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: "form-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>

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

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label :preferred_product, Spree.t(:product) %>
+  <%= tom_select_tag 'page_section[preferred_product_id]', active_option: @page_section.preferred_product_id, class: 'w-full', url: spree.select_options_admin_products_path(format: :json), include_blank: false, select_data: {action: 'auto-submit#submit'} %>
+</div>

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

@@ -0,0 +1,59 @@
+<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-input" %>
+</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: "form-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: "form-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-4 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: "form-select" %>
+</div>
+<div class="form-group">
+  <%= f.check_box :preferred_use_description_from_admin, class: "checkbox-input", data: { action: 'auto-submit#submit' } %>
+  <%= f.label :preferred_use_description_from_admin, Spree.t('admin.page_builder.use_description_from_admin') %>
+  <div class="alert alert-info">If the category description is not set, then the above description will be used.</div>
+</div>
+<div class="form-group">
+  <%= f.label :preferred_button_text, Spree.t('admin.page_builder.button_text') %>
+  <%= f.text_field :preferred_button_text, class: 'form-input', data: { action: 'blur->auto-submit#submit' }, placeholder: 'eg. Explore category', required: true %>
+</div>
+<div class="form-group">
+  <%= f.check_box :preferred_show_taxon_image, class: "checkbox-input", data: { action: 'auto-submit#submit' } %>
+  <%= f.label :preferred_show_taxon_image, Spree.t('admin.page_builder.show_taxon_image') %>
+</div>
+<div class="form-group">
+  <%= f.label :preferred_taxon, Spree.t('admin.page_builder.category') %>
+  <%= tom_select_tag 'page_section[preferred_taxon_id]', active_option: @page_section.preferred_taxon_id, class: 'w-full', url: spree.admin_taxons_select_options_path(format: :json, with_automatic: true), select_data: {action: 'auto-submit#submit'} %>
+</div>
+<div class="form-group">
+  <%= f.check_box :preferred_show_more_button, class: "checkbox-input", data: { action: 'auto-submit#submit' } %>
+  <%= f.label :preferred_show_more_button, Spree.t('admin.page_builder.show_more_button') %>
+</div>
+<div class="form-group">
+  <div data-controller="better-slider">
+    <label><%= Spree.t('admin.page_builder.maximum_products_to_show') %>: <span data-better-slider-target="currentValueLabel"></span></label>
+    <div class="flex flex-row w-full">
+      <span class="mr-4">3</span>
+      <%= f.range_field :preferred_max_products_to_show, class: "custom-range w-full", min: 3, max: 20, data: {'better-slider-target': 'rangeInput', action: 'auto-submit#submit'} %>
+      <span class="ml-4">20</span>
+    </div>
+  </div>
+</div>
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_button_style, Spree.t('admin.page_builder.button_style') %>
+    <%= f.select :preferred_button_style, options_for_select([['Primary', 'primary'], ['Secondary', 'secondary']], @page_section.preferred_button_style), {}, data: {  action: 'auto-submit#submit' },  class: 'form-select' %>
+  </div>
+<% end %>

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

@@ -0,0 +1,13 @@
+<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-input" %>
+</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: "form-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: "form-select" %>
+</div>
+<%= render 'spree/admin/page_links/list', parent: @page_section, show_add_link_button: true %>

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

@@ -0,0 +1,20 @@
+<div class="alert alert-info mb-6">
+  If you don't upload a logo we'll use the one from the header.
+</div>
+
+<%= render 'spree/admin/shared/page_section_logo', f: f %>
+
+<p class="text-gray-600 small mt-4">
+  We recommend transparent images with a minimum size of 400x128 pixels.
+</p>
+
+<% content_for(:design_tab) do %>
+  <%= render 'spree/admin/page_builder/color_picker',
+      f: f, field: :preferred_copyright_text_color, value: @page_section.preferred_copyright_text_color,
+      label: 'Copyright Text color',
+      action: 'change->auto-submit#submit' %>
+  <%= render 'spree/admin/page_builder/color_picker',
+      f: f, field: :preferred_copyright_background_color, value: @page_section.preferred_copyright_background_color,
+      label: 'Copyright Background color',
+      action: 'change->auto-submit#submit' %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%= render 'spree/admin/shared/page_section_logo', f: f %>
+
+<p class="text-gray-600 small mt-2">
+  We recommend transparent images with a minimum size of 400x128 pixels.
+</p>
+
+<%= render 'spree/admin/page_links/list', parent: @page_section, show_add_link_button: true %>
+
+<% content_for(:design_tab) do %>
+  <%= render 'spree/admin/page_sections/fields/header_layout', f: f %>
+  <hr />
+<% end %>

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

@@ -0,0 +1,13 @@
+<%= render 'spree/admin/shared/page_section_image', f: f %>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_vertical_alignment, Spree.t('admin.page_builder.vertical_alignment') %>
+    <%= f.select :preferred_vertical_alignment, options_for_select([:top, :middle, :bottom], @page_section.preferred_vertical_alignment), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/range_input',
+  f: f, field: :preferred_overlay_transparency, min: 1, max: 100, unit: '%' %>
+
+  <%= render 'spree/admin/page_sections/fields/height', f: f %>
+<% end %>

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

@@ -0,0 +1,28 @@
+<%= render 'spree/admin/shared/page_section_image', f: f %>
+<div class="py-2">
+  <%= f.fields_for :link do |lf| %>
+    <div class="form-group">
+      <%= lf.label :linkable_type, 'Link' %>
+      <%= lf.select :linkable_type, @page_section.allowed_linkable_types, { include_blank: false }, { class: 'form-select mb-4', data: { action: 'auto-submit#submit' } } %>
+      <div id="linkable_type_dropdown">
+        <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: lf.object, form_name: 'page_section[link_attributes]' %>
+      </div>
+    </div>
+    <div class="pb-2 custom-control form-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="mt-2 text-gray-600 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') %>
+    <%= f.select :preferred_desktop_image_alignment, options_for_select(['left', 'right'], @page_section.preferred_desktop_image_alignment), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+  <div class="form-group">
+    <%= f.label :preferred_vertical_alignment, Spree.t('admin.page_builder.vertical_alignment') %>
+    <%= f.select :preferred_vertical_alignment, options_for_select([:top, :middle, :bottom], @page_section.preferred_vertical_alignment), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+  <hr />
+<% end %>

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

@@ -0,0 +1,9 @@
+<div class="alert alert-info mb-6">
+  If you don't upload a logo we'll use the one from the header.
+</div>
+
+<%= render 'spree/admin/shared/page_section_logo', f: f %>
+
+<p class="text-gray-600 small mt-4">
+  We recommend transparent images with a minimum size of 400x128 pixels.
+</p>

data/app/views/spree/admin/page_sections/forms/_main_password_header.erb

@@ -0,0 +1,13 @@
+<label>Logo image</label>
+<%= render 'spree/admin/shared/page_section_logo', f: f %>
+
+<p class="text-gray-600 small mt-2">
+  We recommend transparent images with a minimum size of 400x128 pixels.
+</p>
+
+<% content_for(:design_tab) do %>
+  <%= render 'spree/admin/page_builder/range_input',
+    f: f, field: :preferred_desktop_logo_height, min: 0, max: 120, unit: 'px', label: "Logo height (desktop)", label_for_min_value: "auto"
+  %>
+  <hr />
+<% end %>

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

@@ -0,0 +1,15 @@
+<% content_for(:design_tab) do %>
+
+  <%= label_tag :background_image %>
+  <br />
+
+  <%= render 'spree/admin/shared/page_section_image', f: f %>
+
+  <br /><br />
+
+  <%= render 'spree/admin/page_builder/range_input',
+    f: f, field: :preferred_overlay_transparency, min: 1, max: 100, unit: '%'
+  %>
+
+  <hr />
+<% end %>

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

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label :preferred_title, Spree.t('admin.page_builder.title') %>
+  <%= f.text_field :preferred_title, data: { action: 'auto-submit#submit' }, class: "form-input" %>
+</div>

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,32 @@
+<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-input" %>
+</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: "form-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: "form-select" %>
+</div>
+<div class="form-group">
+  <%= f.label :description, Spree.t('admin.page_builder.description') %>
+  <div class="trix-container">
+    <%= f.rich_text_area :description, data: {action: 'trix-change->auto-submit#submit'}, class: 'mb-4 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: "form-select" %>
+</div>
+<div class="form-group">
+  <div data-controller="better-slider">
+    <label><%= Spree.t('admin.page_builder.maximum_products_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_products_to_show, class: "custom-range w-full", min: 2, max: 20, data: {'better-slider-target': 'rangeInput', action: 'auto-submit#submit'} %>
+      <span class="ml-2">20</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+<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-input" %>
+</div>
+

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

@@ -0,0 +1,15 @@
+<div class="form-group">
+  <%= f.label :preferred_youtube_video_url, Spree.t('admin.page_builder.youtube_video_url') %>
+  <%= f.url_field :preferred_youtube_video_url, data: { action: 'change->auto-submit#submit' }, class: 'form-input' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_separated, Spree.t('admin.page_builder.separated') %>
+    <%= f.select :preferred_separated, options_for_select(['horizontally', 'vertically'], @page_section.preferred_separated), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: Spree.t('admin.page_builder.max_video_width_on_desktop')
+  %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= 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 %>

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

@@ -0,0 +1,7 @@
+<%= 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 %>

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

@@ -0,0 +1,26 @@
+<%= 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-2' do %>
+      <%= icon 'chevron-left', class: 'mr-0 back' %>
+    <% end %>
+    <%= Spree.t(:add_section) %>
+  </h6>
+  <div class="pb-12 mb-12 edit-block">
+    <%= form_for @page_preview.sections.new, url: spree.admin_page_sections_path(@page_preview), data: { controller: 'section-form', section_form_target: :form } do |f| %>
+      <%= f.hidden_field :type, data: { section_form_target: 'type' } %>
+      <%= f.hidden_field :pageable_id %>
+      <%= f.hidden_field :pageable_type %>
+      <div class="flex flex-col gap-1 p-3">
+        <% @theme.available_page_sections.each do |section_class| %>
+          <button class="cursor-pointer flex items-center gap-4 hover:bg-gray-100 p-2 rounded-lg focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500"
+            data-action="click->section-form#addSection keydown.enter->section-form#addSection"
+            data-section-form-type-param="<%= section_class %>"
+          >
+            <%= icon section_class.new.icon_name if section_class.new.icon_name.present? %>
+            <%= section_class.to_s.demodulize.titleize %>
+          </button>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+<% end %>

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

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

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

@@ -0,0 +1,4 @@
+<%= refresh_theme_preview(@page_section) %>
+<%= turbo_stream.replace :page_sidebar do %>
+  <%= render template: 'spree/admin/page_sections/edit', locals: {tab_selected: :design} %>
+<% end %>

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

@@ -0,0 +1 @@
+<%= render 'spree/admin/page_builder/sidebar_section', section: @page_section %>

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

@@ -0,0 +1,10 @@
+<% if @page_section.previous_changes.key?('position') %>
+  <%= refresh_theme_preview %>
+<% else %>
+  <%= refresh_theme_preview(@page_section) %>
+<% end %>
+<% if @page_section.respond_to?(:link) %>
+  <%= turbo_stream.update :linkable_type_dropdown do %>
+    <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: @page_section.link, form_name: 'page_section[link_attributes]' %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,20 @@
+<div class="card mb-6">
+  <div class="card-header flex items-center justify-between">
+    <h5 class="card-title">
+      <%= Spree.t(:details) %>
+    </h5>
+  </div>
+  <div class="card-body">
+    <%= 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',
+      f: f,
+      title: @page.name,
+      meta_title: @page.meta_title,
+      description: nil,
+      slug_attribute_name: "page[slug]",
+      slug: @page.slug,
+      slug_path: 'pages',
+      placeholder: 'Add a title to see how this page might appear in a search engine listing' %>
+

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

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