spree_backend 4.1.1 → 4.5.0

data/app/javascript/spree/dashboard/controllers/webhooks_subscriber_events_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "eventsCheckboxesContainer", "subscribeToAll" ]
+
+  hideCheckboxes() {
+    this.eventsCheckboxesContainerTarget.hidden = true
+  }
+
+  showCheckboxes() {
+    this.eventsCheckboxesContainerTarget.hidden = false
+  }
+
+  initialize() {
+    if (this.subscribeToAllTarget.checked) {
+      this.hideCheckboxes()
+    }
+  }
+}

data/app/javascript/spree/dashboard/index.js

@@ -0,0 +1,54 @@
+//
+// Initialize Dashboard
+class Dashboard {
+  constructor() {
+    console.log("Spree Dashboard Initialized")
+  }
+}
+
+if (!window.Turbo) {
+  console.warn("Please import '@hotwired/turbo-rails' before '@spree/dashboard' to use Rails Turbo within the Spree Dashboard environment.")
+}
+
+//
+// Import JavaScript packages that are required globally.
+import { Application } from "@hotwired/stimulus"
+import flatpickr from "flatpickr"
+
+//
+// Import Utility JavaScript required globally.
+import "./utilities/bootstrap"
+
+//
+// Stimulus - Setup
+const application = Application.start()
+application.debug = false
+window.Stimulus = application
+
+// Stimulus - Spree Controllers
+import UploadButtonController from "./controllers/upload_button_controller"
+application.register("upload-button", UploadButtonController)
+
+import SpreeController from "./controllers/spree_controller"
+application.register("spree", SpreeController)
+
+import SortableTreeController from "./controllers/sortable_tree_controller"
+application.register("sortable-tree", SortableTreeController)
+
+import WebhooksSubscriberEventsController from "./controllers/webhooks_subscriber_events_controller"
+application.register("webhooks_subscriber_events", WebhooksSubscriberEventsController)
+
+import PasswordToggleController from "./controllers/password_toggle_controller"
+application.register("password-toggle", PasswordToggleController)
+
+import ClipboardController from "./controllers/clipboard_controller"
+application.register("clipboard", ClipboardController)
+
+import ProductEditController from "./controllers/product_edit_controller"
+application.register("product-edit", ProductEditController)
+
+import * as RequestUtility from "./utilities/request_utility"
+
+//
+// Export
+export { Dashboard, application, flatpickr, RequestUtility }

data/app/javascript/spree/dashboard/utilities/bootstrap.js

@@ -0,0 +1,17 @@
+import jquery from 'jquery'
+import 'bootstrap'
+import 'popper.js'
+
+const $ = jquery
+
+document.addEventListener("spree:load", function() {
+  $('.with-tip').each(function() {
+    $(this).tooltip({ container: 'body' })
+  })
+
+  $('.with-tip').on('show.bs.tooltip', function(event) {
+    if (('ontouchstart' in window)) {
+      event.preventDefault()
+    }
+  })
+})

data/app/javascript/spree/dashboard/utilities/request_utility.js

@@ -0,0 +1,53 @@
+import { RequestInterceptor } from "@rails/request.js"
+import { FetchRequest } from "@rails/request.js"
+
+//
+// Inject Authorization & Content-Type into @rails/request.js requests.
+RequestInterceptor.register(async (request) => {
+  request.addHeader("Authorization", `Bearer ${OAUTH_TOKEN}`)
+})
+
+//
+// Setup Turbo Progress bar on @rails/request.js requests.
+export function showProgressBar() {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(0)
+  Turbo.navigator.delegate.adapter.progressBar.show()
+}
+
+export function hideProgressBar() {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(1)
+  Turbo.navigator.delegate.adapter.progressBar.hide()
+}
+
+export function withProgress(request) {
+  new Promise(resolve => {
+    showProgressBar()
+    resolve(request.then(hideProgressBar))
+  })
+  return request
+}
+
+export function get (url, options) {
+  const request = new FetchRequest("get", url, options)
+  return withProgress(request.perform())
+}
+
+export function post (url, options) {
+  const request = new FetchRequest("post", url, options)
+  return withProgress(request.perform())
+}
+
+export function put (url, options) {
+  const request = new FetchRequest("put", url, options)
+  return withProgress(request.perform())
+}
+
+export function patch (url, options) {
+  const request = new FetchRequest("patch", url, options)
+  return withProgress(request.perform())
+}
+
+export function destroy (url, options) {
+  const request = new FetchRequest("delete", url, options)
+  return withProgress(request.perform())
+}

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_first_page.html.erb

@@ -4,10 +4,10 @@
     current_page:  a page object for the currently displayed page
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
+    remote:        data-remote -%>
+
 <% unless current_page.first? %>
   <li class="first page-item">
-    <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.first?, svg_icon(name: "double-chevron-left.svg", width: '13', height: '16', classes: 'spree-icon-arrow-left mb-0'), url, remote: remote, class: 'page-link', 'aria-label': 'First page' %>
   </li>
 <% end %>

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_gap.html.erb

@@ -3,9 +3,9 @@
     current_page:  a page object for the currently displayed page
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<li class="page gap disabled page-item">
+    remote:        data-remote -%>
+
+<li class="page gap disabled page-item d-none d-lg-flex">
   <a href="#" onclick="return false;" class="page-link">
     <%= raw(t 'views.pagination.truncate') %>
   </a>

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_last_page.html.erb

@@ -4,10 +4,10 @@
     current_page:  a page object for the currently displayed page
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
+    remote:        data-remote -%>
+
 <% unless current_page.last? %>
   <li class="last next page-item"><%# "next" class present for border styling in twitter bootstrap %>
-    <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.last?, svg_icon(name: "double-chevron-right.svg", width: '13', height: '16', classes: 'spree-icon-arrow-right mb-0'), url, remote: remote, class: 'page-link', 'aria-label': 'Last page' %>
   </li>
 <% end %>

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_next_page.html.erb

@@ -4,10 +4,10 @@
     current_page:  a page object for the currently displayed page
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
+    remote:        data-remote -%>
+
 <% unless current_page.last? %>
   <li class="next_page page-item">
-    <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.last?, svg_icon(name: "chevron-right.svg", width: '13', height: '16', classes: 'spree-icon-arrow-right mb-0'), url, rel: 'next', remote: remote, class: 'page-link', 'aria-label': 'Next page' %>
   </li>
 <% end %>

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_page.html.erb

@@ -5,8 +5,8 @@
     current_page:  a page object for the currently displayed page
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
+    remote:        data-remote -%>
+
 <li class="page<%= ' active' if page.current? %> page-item">
   <%= link_to page,
     url,

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_paginator.html.erb

@@ -4,12 +4,12 @@
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
     remote:        data-remote
-    paginator:     the paginator that renders the pagination tags inside
--%>
+    paginator:     the paginator that renders the pagination tags inside -%>
+
 <% pagination_class ||= '' %>
 
 <%= paginator.render do %>
-  <ul class="pagination mt-4 <%= pagination_class %>">
+  <ul class="pagination d-inline-flex <%= pagination_class %>">
     <%= first_page_tag unless current_page.first? %>
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| %>

data/app/views/kaminari/{twitter-bootstrap-4 → admin-twitter-bootstrap-4}/_prev_page.html.erb

@@ -4,10 +4,10 @@
     current_page:  a page object for the currently displayed page
     total_pages:   total number of pages
     per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
+    remote:        data-remote -%>
+
 <% unless current_page.first? %>
   <li class="prev page-item">
-    <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.first?, svg_icon(name: "chevron-left.svg", width: '13', height: '16', classes: 'spree-icon-arrow-left mb-0'), url, rel: 'prev', remote: remote, class: 'page-link', 'aria-label': 'Previous page' %>
   </li>
 <% end %>

data/app/views/spree/admin/adjustments/_adjustment.html.erb

@@ -14,14 +14,16 @@
     <%= adjustment.display_amount.to_html %>
   </td>
   <td class="text-center">
-    <span class="badge badge-<%= adjustment.state %>">
-      <%= adjustment.state %>
+    <span class="text-lowercase badge badge-pill badge-<%= adjustment.state %>">
+      <%= Spree.t("state_machine_states.#{adjustment.state}") %>
     </span>
   </td>
-  <td class="actions actions-2 text-center">
-    <% if adjustment.open? %>
-      <%= link_to_edit(adjustment, no_text: true) if can?(:edit, adjustment) %>
-      <%= link_to_delete(adjustment, no_text: true) if can?(:delete, adjustment) %>
-    <% end %>
+  <td class="actions">
+    <span class="d-flex justify-content-center">
+      <% if adjustment.open? %>
+        <%= link_to_edit(adjustment, no_text: true) if can?(:edit, adjustment) %>
+        <%= link_to_delete(adjustment, no_text: true) if can?(:delete, adjustment) %>
+      <% end %>
+    </span>
   </td>
 </tr>

data/app/views/spree/admin/adjustments/_adjustments_table.html.erb

@@ -1,30 +1,30 @@
 <div class="card-header">
-  <h3 class="card-title mb-0 h5"><%= Spree.t(:order_adjustments) %></h3>
+  <h3 class="card-title mb-0 h6"><%= Spree.t(:order_adjustments) %></h3>
+</div>
+<div class="table-responsive border rounded bg-white">
+  <table class="table border rounded adjustments" data-hook="adjustments">
+    <thead data-hook="adjustmment_head">
+      <tr>
+        <th><%= Spree.t(:adjustable) %></th>
+        <th><%= Spree.t(:description) %></th>
+        <th class="text-center"><%= Spree.t(:amount) %></th>
+        <th class="text-center"><%= Spree.t(:status) %></th>
+        <th class="actions"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <%= render partial: "adjustment", collection: @adjustments %>
+    </tbody>
+  </table>
 </div>
-
-<table class="table table-bordered adjustments" data-hook="adjustments">
-  <thead data-hook="adjustmment_head">
-    <tr>
-      <th><%= Spree.t(:adjustable) %></th>
-      <th><%= Spree.t(:description) %></th>
-      <th class="text-center"><%= Spree.t(:amount) %></th>
-      <th class="text-center"><%= Spree.t(:status) %></th>
-      <th class="actions"></th>
-    </tr>
-  </thead>
-  <tbody>
-    <%= render partial: "adjustment", collection: @adjustments %>
-  </tbody>
-</table>
-
 <% if can?(:edit, Spree::Adjustment) %>
   <div class="card-footer">
     <div class="row text-center pb-0">
       <div class="col-12 col-lg-6">
-        <%= button_to Spree.t(:open_all_adjustments), open_adjustments_admin_order_path(@order), method: :get, class: "btn btn-success" %>
+        <%= button_to Spree.t(:open_all_adjustments), open_adjustments_admin_order_path(@order), method: :put, class: "btn btn-success" %>
       </div>
       <div class="col-12 col-lg-6">
-        <%= button_to Spree.t(:close_all_adjustments), close_adjustments_admin_order_path(@order), method: :get, class: "btn btn-danger" %>
+        <%= button_to Spree.t(:close_all_adjustments), close_adjustments_admin_order_path(@order), method: :put, class: "btn btn-danger" %>
       </div>
     </div>
   </div>

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

@@ -1,10 +1,10 @@
 <div data-hook="admin_adjustment_form_fields">
-  <%= f.field_container :amount, class: ['form-group'] do %>
+  <%= f.field_container :amount do %>
     <%= f.label :amount, raw(Spree.t(:amount) + required_span_tag) %>
     <%= text_field :adjustment, :amount, class: 'form-control' %>
     <%= f.error_message_on :amount %>
   <% end %>
-  <%= f.field_container :label, class: ['form-group'] do %>
+  <%= f.field_container :label do %>
     <%= f.label :label, raw(Spree.t(:description) + required_span_tag) %>
     <%= text_field :adjustment, :label, class: 'form-control' %>
     <%= f.error_message_on :label %>

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

@@ -1,9 +1,5 @@
 <%= render partial: 'spree/admin/shared/order_tabs', locals: { current: :adjustments } %>
 
-<% content_for :page_title do %>
-  / <%= Spree.t(:edit) %> <%= Spree.t(:adjustment) %>
-<% end %>
-
 <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @adjustment } %>
 
 <%= form_for @adjustment, url: admin_order_adjustment_path(@order, @adjustment), method: :put do |f| %>
@@ -11,9 +7,9 @@
     <%= render partial: 'form', locals: { f: f } %>
 
     <div class="form-actions" data-hook="buttons">
-      <%= button Spree.t(:continue), 'save' %>
+      <%= button Spree.t(:continue), 'save.svg' %>
       <span class="or"><%= Spree.t(:or) %></span>
-      <%= button_link_to Spree.t('actions.cancel'), spree.admin_order_adjustments_url(@order), icon: 'delete' %>
+      <%= button_link_to Spree.t('actions.cancel'), spree.admin_order_adjustments_url(@order), icon: 'cancel.svg' %>
     </div>
   </fieldset>
 <% end %>

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

@@ -1,11 +1,7 @@
 <%= render partial: 'spree/admin/shared/order_tabs', locals: { current: :adjustments} %>
 
-<% content_for :page_title do %>
-   / <%= plural_resource_name(Spree::Adjustment) %>
-<% end %>
-
 <% content_for :page_actions do %>
-  <%= button_link_to(Spree.t(:new_adjustment), new_admin_order_adjustment_url(@order), class: "btn-success", icon: 'add') if can? :create, Spree::Adjustment %>
+  <%= button_link_to(Spree.t(:new_adjustment), new_admin_order_adjustment_url(@order), class: "btn-success", icon: 'add.svg') if can? :create, Spree::Adjustment %>
 <% end %>
 
 <% if @adjustments.present? %>
@@ -13,7 +9,7 @@
     <%= render partial: 'adjustments_table' %>
   </div>
 <% else %>
-  <div class="alert alert-warning">
+  <div class="text-center m-5">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Adjustment)) %>
   </div>
 <% end %>
@@ -24,13 +20,14 @@
       <div class="form-group">
         <%= text_field_tag "coupon_code", "", placeholder: Spree.t(:coupon_code), class: "form-control" %>
       </div>
-      <%= button Spree.t(:add_coupon_code), 'plus', 'submit', id: "add_coupon_code" %>
+      <%= button Spree.t(:add_coupon_code), 'add.svg', 'submit', id: "add_coupon_code" %>
     </div>
   </div>
 <% end %>
 
-<%= javascript_tag do %>
+<script>
   var order_number = '<%= @order.number %>';
-<% end %>
+  var order_id = '<%= @order.id %>';
+</script>
 
 <%= render partial: 'spree/admin/shared/order_summary' %>

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

@@ -1,9 +1,5 @@
 <%= render partial: 'spree/admin/shared/order_tabs', locals: { current: :adjustments } %>
 
-<% content_for :page_title do %>
-  / <%= Spree.t(:new_adjustment) %>
-<% end %>
-
 <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @adjustment } %>
 
 <%= form_for @adjustment, url: admin_order_adjustments_path do |f| %>
@@ -11,9 +7,9 @@
     <%= render partial: 'form', locals: { f: f } %>
 
     <div class="form-actions" data-hook="buttons">
-      <%= button Spree.t(:continue), 'save' %>
+      <%= button Spree.t(:continue), 'save.svg' %>
       <span class="or"><%= Spree.t(:or) %></span>
-      <%= button_link_to Spree.t('actions.cancel'), spree.admin_order_adjustments_url(@order), icon: 'delete' %>
+      <%= button_link_to Spree.t('actions.cancel'), spree.admin_order_adjustments_url(@order), icon: 'cancel.svg' %>
     </div>
   </fieldset>
 <% end %>

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

@@ -0,0 +1,135 @@
+<div id="<% if @cms_page.type == 'Spree::Cms::Pages::StandardPage' %>standardPage<% end %>" data-hook="admin_page_form_fields">
+  <div class="row sp-pb-0">
+    <div class="col-12">
+      <div class="card sp-card">
+        <% unless %w[new create].include? controller.action_name %>
+        <div class="card-header">
+          <div class="row no-gutters pb-0">
+            <div class="col d-flex justify-content-start align-items-center">
+              <%= f.field_container :visible, class: ['pb-0 mb-0'] do %>
+                <div class="custom-control custom-switch custom-switch-md">
+                  <%= f.check_box :visible, class: 'custom-control-input', data: {cms_page_id: @cms_page.id} %>
+                  <label class="custom-control-label" for="cms_page_visible"></label>
+                  <%= f.error_message_on :visible %>
+                </div>
+              <% end %>
+
+              <span id="visibilityStatus" class="d-flex align-items-center">
+                <span class="page_hidden badge badge-pill badge-secondary <% if @cms_page.visible? %>d-none<% end %>">
+                  <%= svg_icon name: "eye-slash-fill.svg", width: '18', height: '18' %> <%= Spree.t('admin.cms.draft_mode') %>
+                </span>
+
+                <span class="page_visible badge badge-pill badge-primary <% if @cms_page.draft_mode? %>d-none<% end %>">
+                  <%= svg_icon name: "view.svg", width: '18', height: '18' %> <%= Spree.t('admin.cms.visible') %>
+                </span>
+              </span>
+            </div>
+            <div class="col-auto d-flex align-items-center">
+              <span class="badge badge-pill badge-secondary">
+                  <%= svg_icon name: "translate.svg", width: '18', height: '18' %> <%= locale_full_name(@cms_page.locale) %>
+              </span>
+            </div>
+          </div>
+        </div>
+        <% end %>
+
+        <div class="card-body pb-2">
+          <div class="row pb-0">
+
+            <%= f.field_container :title, class: ['col-12 col-md-6'] do %>
+              <%= f.label :title, raw(Spree.t('admin.cms.title') + required_span_tag) %>
+              <%= f.text_field :title, class: 'form-control', required: true %>
+              <%= f.error_message_on :title %>
+            <% end %>
+
+            <%= f.field_container :type, class: ['col-12 col-md-6'] do %>
+              <%= f.label :type, Spree.t('admin.cms.page_type') %>
+              <%= f.select(:type, spree_humanize_dropdown_values('Spree::CmsPage', {const: 'TYPES'}), {include_blank: false}, class: 'select2') %>
+              <%= f.error_message_on :type %>
+            <% end %>
+
+            <% unless %w[new create].include? controller.action_name %>
+              <div class="col-12 mt-3">
+                <div id="updatePageType" data-page-type="<%= @cms_page.type %>" class="alert alert-info d-none">
+                  <% button_type = Spree.t('update') %>
+                  <%= raw Spree.t('admin.cms.click_button_to_change_page_type', button_type: button_type) %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+
+          <div class="<% unless %w[new create].include? controller.action_name %>collapse<% end %>" id="cmsPageSettings">
+            <div class="row pb-0">
+              <div class="col-12"><hr></div>
+              <%= f.field_container :locale, class: ['col-12 col-md-4'] do %>
+                <%= f.label :language %>
+                <%= f.select :locale, options_from_collection_for_select(supported_locales_options, :last, :first, @cms_page.locale || I18n.locale), {}, { class: 'select2' } %>
+                <%= f.error_message_on :default_locale %>
+              <% end %>
+
+              <%= f.field_container :meta_title, class: ['col-12 col-md-4'] do %>
+                <%= f.label :meta_title, Spree.t('admin.cms.meta_title') %>
+                <%= f.text_field :meta_title, class: 'form-control' %>
+                <%= f.error_message_on :meta_title %>
+              <% end %>
+
+              <%= f.field_container :slug, class: ['col-12 col-md-4'] do %>
+                <div id="noHomePage">
+                  <%= f.label :slug, Spree.t('slug') %>
+                  <%= f.text_field :slug, class: 'form-control', disabled: @cms_page.homepage? %>
+                  <%= f.error_message_on :slug %>
+                </div>
+              <% end %>
+
+              <%= f.field_container :meta_description, class: ['col-12'] do %>
+                <%= f.label :meta_description, Spree.t('admin.cms.meta_description') %>
+                <%= f.text_area :meta_description, { rows: 3, class: 'form-control' } %>
+                <%= f.error_message_on :meta_description %>
+              <% end %>
+            </div>
+          </div>
+
+          <% unless %w[new create].include? controller.action_name %>
+            <div class="row pb-0">
+              <% if @cms_page.type != 'Spree::Cms::Pages::StandardPage' %>
+                <div class="col-12 col-sm-7">
+                    <%= render partial: 'spree/admin/shared/edit_resource_links' %>
+                </div>
+              <% else %>
+                <div class="col"></div>
+              <% end %>
+
+              <div class="col-12 col-sm text-right pt-3 pt-sm-0">
+                <button id="toggleMorePageSettingsButton" class="btn btn-light" type="button" data-toggle="collapse" data-target="#cmsPageSettings" aria-expanded="false" aria-controls="collapsePageSettings">
+                  <%= raw Spree.t('admin.cms.more_page_settings') %>
+                </button>
+              </div>
+            </div>
+          <% end %>
+
+          <% if %w[new create].include? controller.action_name %>
+            <div class="row pb-0">
+              <div class="col-6">
+                <%= render partial: 'spree/admin/shared/new_resource_links' %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% if @cms_page.type == 'Spree::Cms::Pages::StandardPage' %>
+  <div class="row">
+    <div class="col-12">
+      <%= f.field_container :content  do %>
+        <%= f.text_area :content, { rows: 22, class: 'spree-rte'} %>
+        <%= f.error_message_on :content %>
+      <% end %>
+    </div>
+  </div>
+  <div class="d-flex ">
+    <%= render partial: 'spree/admin/shared/edit_resource_links' %>
+  </div>
+<% end %>

data/app/views/spree/admin/cms_pages/_live_preview_area.html.erb

@@ -0,0 +1,61 @@
+ <div class="row">
+    <div id="pageSectionsArea" class="col-12">
+
+      <hr class="mt-4 hide-on-full-screen-mode">
+      <div class="row">
+        <div class="col d-flex justify-content-start">
+          <%= button_link_to Spree.t('admin.cms.add_new_section'), spree.new_admin_cms_page_cms_section_path(@cms_page), icon: 'add.svg', class: 'no-wrap btn btn-success align-self-center' %>
+        </div>
+        <div class="col d-none d-md-flex justify-content-end">
+          <div id="LiveViewSwitcher" class="btn-group btn-group-toggle" data-toggle="buttons">
+            <label class="btn btn-outline-primary active">
+              <input type="radio" name="options" id="mobileLiveView" autocomplete="off"> Mobile
+            </label>
+            <label class="btn btn-outline-primary">
+              <input type="radio" name="options" id="tabletLiveView" autocomplete="off"> Tablet
+            </label>
+            <label class="btn btn-outline-primary">
+              <input type="radio" name="options" id="desktopLiveView" autocomplete="off" checked> Desktop
+            </label>
+          </div>
+
+          <div class="ml-2">
+              <button id="cmsSectionEditorFullScreen" type="button" class="btn btn-outline-primary no-wrap" data-toggle="button" autocomplete="off"><%= raw Spree.t('admin.cms.full_screen_mode') %></button>
+          </div>
+        </div>
+      </div>
+      <div class="row no-gutters">
+        <div id="draggableSectionsHolder" class="col-12 col-md-3 bg-light border">
+          <% if @cms_page.cms_sections.any? %>
+            <div id="cmsPagesectionsArea" class="card-body row m-0 p-1 no-gutters">
+              <% @cms_page.cms_sections.each do |section| %>
+                <%= render 'spree/admin/cms_pages/section_template', section: section %>
+              <% end %>
+            </div>
+
+          <% else %>
+            <div class="row">
+              <div class="col-12">
+                <div class="text-center no-objects-found m-5 m-4">
+                  <%= raw Spree.t('admin.cms.no_sections_found_please_add_one') %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="d-none d-md-block col bg-secondary border border-left-0">
+          <div id="liveViewCont" class="desktopLiveView">
+            <div class="embed-responsive embed-responsive-4by3">
+              <iframe class="embed-responsive-item"
+                      id="pageLivePreview"
+                      src="<%= spree_storefront_resource_url(@cms_page, locale: cms_page_locale(@cms_page)) + "?no_cache=#{rand(1...10000)}" %>"
+                      sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-modals">
+              </iframe>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>

data/app/views/spree/admin/cms_pages/_section_template.html.erb

@@ -0,0 +1,16 @@
+<div class="col-12 p-0 removable-dom-element" data-section-id="<%= section.id %>">
+  <div class="row m-0 mb-1 pb-0 border border-secondary bg-white">
+    <div class="col move-handle d-flex pr-0 truncate">
+      <div class="py-3 align-items-center overflow-hidden w-100">
+          <h6 class="m-0 truncate"><%= section.name %></h6>
+          <small class="form-text mt-0 text-muted"><%= spree_humanize_type(section.type) %></small>
+      </div>
+    </div>
+    <div>
+      <div class="col h-100 d-flex flex-column align-self-sm-stretch p-0 justify-content-between actions cms_section_action_col">
+        <%= link_to_edit(section, no_text: true, url: spree.edit_admin_cms_page_cms_section_path(@cms_page, section)) %>
+        <%= link_to_delete(section, no_text: true, url: spree.admin_cms_page_cms_section_path(@cms_page, section)) if can?(:destroy, section) %>
+      </div>
+    </div>
+  </div>
+</div>