spree_admin 5.0.0.rc1

data/app/views/spree/admin/orders/return_authorizations/_form.html.erb

@@ -0,0 +1,176 @@
+<% allow_return_item_changes = !@return_authorization.customer_returned_items? %>
+
+<div data-controller="return-items">
+  <div class="table-responsive card-lg p-0 mb-4">
+    <table class="table table-condensed return-items-table">
+      <thead class="text-muted">
+        <tr>
+          <th>
+            <% if allow_return_item_changes %>
+              <div class="custom-control custom-checkbox ml-1">
+                <input
+                  type="checkbox"
+                  class="custom-control-input"
+                  id="checkAllMasterCheckbox"
+                  data-return-items-target="checkboxAll"
+                >
+                <label class="custom-control-label" for="checkAllMasterCheckbox"><span></span></label>
+              </div>
+            <% end %>
+          </th>
+          <th><%= Spree.t(:product) %></th>
+          <th><%= Spree.t(:status) %></th>
+          <th><%= Spree.t(:charged) %></th>
+          <th><%= Spree.t(:purchased_quantity) %></th>
+          <th style="min-width:130px;"><%= Spree.t(:return_quantity) %></th>
+          <th style="min-width:150px;"><%= Spree.t(:pre_tax_refund_amount) %></th>
+          <th><%= Spree.t(:reimbursement_type) %></th>
+          <th><%= Spree.t(:exchange_for) %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <%= f.fields_for :return_items, @form_return_items do |item_fields| %>
+          <% return_item = item_fields.object %>
+          <% inventory_unit = return_item.inventory_unit %>
+          <% editable =
+            inventory_unit.shipped? && allow_return_item_changes &&
+              return_item.reimbursement.nil? %>
+          <tr>
+            <td class="inventory-unit-checkbox">
+              <% if editable %>
+                <div class="custom-control custom-checkbox ml-1">
+
+                  <%= item_fields.hidden_field :inventory_unit_id %>
+                  <%= item_fields.check_box :_destroy,
+                                        {
+                                          checked: return_item.persisted?,
+                                          class: "add-item custom-control-input",
+                                          data: {
+                                            return_items_target: "checkbox",
+                                            price: return_item.pre_tax_amount,
+                                          },
+                                        },
+                                        "0",
+                                        "1" %>
+                  <%= item_fields.label :_destroy, class: "custom-control-label" do %>
+                    <span></span>
+                  <% end %>
+                </div>
+              <% end %>
+            </td>
+            <td>
+              <div class="variant-name">
+                <%= link_to return_item.inventory_unit.variant.name,
+                spree.edit_admin_product_path(return_item.inventory_unit.variant.product) %>
+              </div>
+              <div class="variant-options"><%= inventory_unit.variant.options_text %></div>
+            </td>
+            <td><%= inventory_unit.state.humanize %></td>
+            <td
+              class="charged-amount"
+              data-charged-amount="<%= return_item.pre_tax_amount %>"
+            >
+              <%= return_item.display_pre_tax_amount %>
+            </td>
+            <td class="purchased-quantity">
+              <%= inventory_unit.quantity %>
+            </td>
+            <td>
+              <% if editable %>
+                <%= item_fields.number_field :return_quantity,
+                                         {
+                                           class: "refund-quantity-input form-control",
+                                           min: 0,
+                                           data: {
+                                             action: "return-items#updateSuggestedAmount",
+                                           },
+                                           max: return_item.return_quantity,
+                                         } %>
+              <% else %>
+                <%= return_item.return_quantity %>
+              <% end %>
+            </td>
+            <td>
+              <% if editable %>
+                <%= item_fields.text_field :pre_tax_amount,
+                                       {
+                                         class: "refund-amount-input form-control",
+                                         data: {
+                                           action: "return-items#updateTotalRefundAmount",
+                                         },
+                                       } %>
+              <% else %>
+                <%= return_item.display_pre_tax_amount %>
+              <% end %>
+            </td>
+            <td>
+              <% if editable %>
+                <%= item_fields.select :preferred_reimbursement_type_id,
+                                   @reimbursement_types.collect { |r| [r.name.humanize, r.id] },
+                                   { include_blank: true },
+                                   { class: "custom-select" } %>
+              <% end %>
+            </td>
+            <td>
+              <% if editable %>
+                <% if return_item.exchange_processed? %>
+                  <%= return_item.exchange_variant.exchange_name %>
+                <% else %>
+                  <%= item_fields.collection_select :exchange_variant_id,
+                                                return_item.eligible_exchange_variants,
+                                                :id,
+                                                :exchange_name,
+                                                { include_blank: true },
+                                                {
+                                                  class:
+                                                    "custom-select return-item-exchange-selection",
+                                                } %>
+                <% end %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="alert alert-info">
+    <%= Spree.t(:total_pre_tax_refund) %>:
+    <span data-return-items-target="totalPreTaxRefund">0.00</span>
+  </div>
+
+  <div class="card mb-4">
+    <div class="card-body">
+      <div class="form-group">
+        <%= f.label :stock_location, raw(Spree.t(:stock_location) + required_span_tag) %>
+        <%= f.select :stock_location_id,
+                 available_stock_locations_list,
+                 { include_blank: Spree.t(:select_a_stock_location) },
+                 { class: "custom-select" } %>
+        <%= f.error_message_on :stock_location %>
+      </div>
+
+      <div class="form-group">
+        <%= f.label :reason, raw(Spree.t(:reason) + required_span_tag) %>
+        <%= f.select :return_authorization_reason_id,
+                      @reasons.collect { |r| [r.name, r.id] },
+                      { include_blank: Spree.t(:select_a_return_authorization_reason) },
+                      { class: "custom-select" } %>
+        <%= f.error_message_on :reason %>
+      </div>
+
+      <div class="form-group">
+        <%= f.label :memo, Spree.t(:memo) %>
+        <%= f.text_area :memo, class: "form-control" %>
+        <%= f.error_message_on :memo %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% if Spree::Config[:expedited_exchanges] %>
+  <div class="expedited-exchanges-warning"><%= Spree.t(
+      :expedited_exchanges_warning,
+      days_window: Spree::Config[:expedited_exchanges_days_window],
+    ) %></div>
+<% end %>

data/app/views/spree/admin/orders/return_authorizations/_return_authorization.html.erb

@@ -0,0 +1,36 @@
+<% edit_link =
+  if can?(:edit, return_authorization)
+    spree.edit_admin_order_return_authorization_path(
+      @order,
+      return_authorization,
+    )
+  else
+    spree.admin_order_return_authorization_path(@order, return_authorization)
+  end %>
+
+<tr
+  id="<%= spree_dom_id(return_authorization) %>"
+  data-controller="row-link"
+  class="cursor-pointer"
+>
+  <td data-action="click->row-link#openLink" class="font-weight-bolder">
+    <%= link_to return_authorization.number, edit_link %>
+  </td>
+  <td data-action="click->row-link#openLink">
+    <small class="badge badge-<%= return_authorization.state %>">
+      <%= Spree.t("return_authorization_states.#{return_authorization.state}") %>
+    </small>
+  </td>
+  <td data-action="click->row-link#openLink"><%= return_authorization.display_pre_tax_total.to_html %></td>
+  <td data-action="click->row-link#openLink"><%= local_time(return_authorization.created_at) %></td>
+  <td data-action="click->row-link#openLink" class="text-right">
+    <%= link_to_edit(
+      return_authorization,
+      no_text: true,
+      data: {
+        row_link_target: :link,
+      },
+      url: edit_link,
+    ) %>
+  </td>
+</tr>

data/app/views/spree/admin/orders/return_authorizations/edit.html.erb

@@ -0,0 +1,44 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.edit_admin_order_path(@order) %>
+
+  <div class="d-flex gap-3 align-items-center">
+    <%= @return_authorization.number %>
+
+    <span class="badge badge-<%= @return_authorization.state %>">
+      <%= Spree.t("return_authorization_states.#{@return_authorization.state}") %>
+    </span>
+  </div>
+<% end %>
+
+<%= render partial: "spree/admin/shared/error_messages",
+locals: {
+  target: @return_authorization,
+} %>
+
+<%= form_for [:admin, @order, @return_authorization] do |f| %>
+  <%= render partial: "form", locals: { f: f } %>
+
+  <div class="form-actions">
+    <%= turbo_save_button_tag Spree.t("actions.update") %>
+    <div class="ml-auto d-flex gap-3">
+      <% if f.object.can_cancel? && can?(:cancel, f.object) %>
+        <%= link_to Spree.t("actions.cancel"),
+        spree.cancel_admin_return_authorization_path(f.object),
+        class: "btn btn-danger",
+        data: {
+          turbo_method: :patch,
+          turbo_confirm: Spree.t(:are_you_sure),
+        } %>
+      <% end %>
+      <% if f.object.can_be_deleted? && can?(:delete, f.object) %>
+        <%= link_to Spree.t("actions.destroy"),
+        spree.admin_return_authorization_path(f.object),
+        data: {
+          turbo_method: :delete,
+          turbo_confirm: Spree.t(:are_you_sure_delete),
+        },
+        class: "btn btn-danger" %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/orders/return_authorizations/new.html.erb

@@ -0,0 +1,13 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.edit_admin_order_path(@order) %>
+  <%= Spree.t(:new_return_authorization) %>
+<% end %>
+
+<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @return_authorization } %>
+<%= form_for [:admin, @order, @return_authorization] do |f| %>
+  <fieldset>
+    <%= render 'form', f: f %>
+
+    <%= render 'spree/admin/shared/new_resource_links' %>
+  </fieldset>
+<% end %>

data/app/views/spree/admin/orders/return_authorizations/show.html.erb

@@ -0,0 +1,128 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.edit_admin_order_path(@order) %>
+  <div class="d-flex gap-3 align-items-center">
+    <span><%= Spree.t(:return_authorization) %></span>
+    <span><%= @return_authorization.number %></span>
+    <span class="badge badge-<%= @return_authorization.state %>">
+      <%= Spree.t("return_authorization_states.#{@return_authorization.state}") %>
+    </span>
+    <%= local_time(
+      @return_authorization.created_at,
+      class: "badge badge-light with-tip",
+    ) %>
+  </div>
+<% end %>
+
+<%= render partial: "spree/admin/shared/error_messages",
+locals: {
+  target: @return_authorization,
+} %>
+
+<% if flash[:errors].present? %>
+  <div class="alert alert-danger border-danger text-break">
+    <%= flash[:errors].to_sentence %>
+  </div>
+<% end %>
+
+<div class="table-responsive card-lg p-0 mb-4">
+  <table class="table table-condensed return-items-table">
+    <thead class="text-muted">
+      <tr>
+        <th><%= Spree.t(:product) %></th>
+        <th><%= Spree.t(:status) %></th>
+        <th><%= Spree.t(:purchased_quantity) %></th>
+        <th><%= Spree.t(:return_quantity) %></th>
+        <th><%= Spree.t(:total) %></th>
+        <th><%= Spree.t(:refund_amount) %></th>
+        <th><%= Spree.t(:reimbursement_type) %></th>
+        <th><%= Spree.t(:exchange_for) %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @return_authorization.return_items.each do |return_item| %>
+        <tr>
+          <td>
+            <div class="variant-name">
+              <%= link_to return_item.inventory_unit.variant.name,
+              spree.edit_admin_product_path(return_item.inventory_unit.variant.product) %>
+            </div>
+            <div class="variant-options"><%= return_item.inventory_unit.variant.options_text %></div>
+          </td>
+          <td><%= return_item.inventory_unit.state.humanize %></td>
+          <td class="purchased-quantity">
+            <%= return_item.line_item.quantity %>
+          </td>
+          <td><%= return_item.return_quantity %></td>
+          <td><%= return_item.pre_tax_amount %></td>
+          <td><%= return_item.display_total %></td>
+          <td><%= if return_item.preferred_reimbursement_type.present?
+              return_item.preferred_reimbursement_type.name.humanize
+            else
+              "-"
+            end %></td>
+          <td><%= if return_item.exchange_processed?
+              return_item.exchange_variant.exchange_name
+            else
+              "-"
+            end %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<% if @return_authorization.reason.present? %>
+  <div class="card mb-4">
+    <div class="card-header">
+      <h6 class="card-title"><%= Spree.t(:reason) %></h6>
+    </div>
+    <div class="card-body">
+      <%= @return_authorization.reason.name %>
+    </div>
+  </div>
+<% end %>
+
+<% if @return_authorization.memo.present? %>
+  <div class="card mb-4">
+    <div class="card-header">
+      <h6 class="card-title"><%= Spree.t(:memo) %></h6>
+    </div>
+    <div class="card-body">
+      <%= @return_authorization.memo %>
+    </div>
+  </div>
+<% end %>
+
+<% if @refunds.any? %>
+  <div class="card mb-4">
+    <div class="card-header">
+      <h5><%= Spree.t(:reimbursement) %></h5>
+    </div>
+    <div class="card-body p-0">
+      <table class="table table-condensed">
+        <thead class="text-muted">
+          <tr>
+            <th><%= Spree.t(:reimbursement_type) %></th>
+            <th><%= Spree.t(:description) %></th>
+            <th><%= Spree.t(:status) %></th>
+            <th><%= Spree.t(:amount) %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @refunds.each do |refund| %>
+            <tr>
+              <td><%= refund.class.name.demodulize %></td>
+              <td><%= refund.description %></td>
+              <td>
+                <span class="badge badge-<%= refund.reimbursement.reimbursement_status %>">
+                  <%= Spree.t("reimbursement_states.#{refund.reimbursement.reimbursement_status}") %>
+                </span>
+              </td>
+              <td><%= refund.display_amount %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/orders/shipping_address/_form.html.erb

@@ -0,0 +1,13 @@
+<%= render 'spree/admin/shared/error_messages', target: address %>
+<%= render 'spree/addresses/form',
+                  address_name: 'address',
+                  address_form: f,
+                  address_type: 'shipping',
+                  address: address %>
+<% if @order.user.present? && @order.user.addresses.many? %>
+  <div>
+    <div class="w-100 text-center mb-2"><%= Spree.t(:or_select_other_address) %></div>
+    <%= label_tag :shipping_address_id, Spree.t(:existing_address), class: "sr-only" %>
+    <%= tom_select_tag :shipping_address_id, {include_blank: Spree.t(:existing_address), class: "mb-2", options: @order.user.addresses.map { |a| {id: a.id, name: a.to_s.gsub('<br/>', ", ")}}.as_json, select_data: {action: 'auto-submit#submit'} }  %>
+  </div>
+<% end %>

data/app/views/spree/admin/orders/shipping_address/create.turbo_stream.erb

@@ -0,0 +1,17 @@
+<%= turbo_stream.update :dialog_modal do %>
+  <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {turbo_frame: :_top}, method: :post do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:new_shipping_address) %></h5>
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" ></button>
+      </div>
+      <div class="modal-body d-flex flex-col gap-3">
+        <%= render 'form', address: @address, f: f%>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t('actions.discard') %></button>
+        <%= turbo_save_button_tag Spree.t('actions.save') %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/orders/shipping_address/edit.html.erb

@@ -0,0 +1,17 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {controller: 'auto-submit', form_target: 'form', turbo_frame: :_top}, method: :put do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:update_shipping_address) %></h5>
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" ></button>
+      </div>
+      <div class="modal-body d-flex flex-col gap-3">
+        <%= render 'form', address: @address, f: f %>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t('actions.discard') %></button>
+        <%= turbo_save_button_tag Spree.t('actions.update') %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/orders/shipping_address/new.html.erb

@@ -0,0 +1,17 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {turbo_frame: :_top}, method: :post do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:new_shipping_address) %></h5>
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" ></button>
+      </div>
+      <div class="modal-body d-flex flex-col gap-3">
+        <%= render 'form', address: @address, f: f%>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t('actions.discard') %></button>
+        <%= turbo_save_button_tag Spree.t('actions.save') %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/orders/shipping_address/update.turbo_stream.erb

@@ -0,0 +1,17 @@
+<%= turbo_stream.update :dialog_modal do %>
+  <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {controller: 'auto-submit', form_target: 'form', turbo_frame: :_top}, method: :put do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:update_shipping_address) %></h5>
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" ></button>
+      </div>
+      <div class="modal-body d-flex flex-col gap-3">
+        <%= render 'form', address: @address, f: f %>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t('actions.discard') %></button>
+        <%= turbo_save_button_tag Spree.t('actions.update') %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/orders/user/create.turbo_stream.erb

@@ -0,0 +1,12 @@
+<% if @user.valid? %>
+  <%= turbo_stream.append :modal_scripts  do %>
+    <%= javascript_tag do %>
+      Turbo.visit("<%= spree.edit_admin_order_path(@order) %>", { action: "replace" })
+    <% end %>
+  <% end %>
+<% else %>
+  <%= turbo_stream.replace dom_id(@order, :customer_information) do %>
+    <%= render template: 'spree/admin/orders/user/new', locals: { show_form: true } %>
+  <% end %>
+<% end %>
+<%= turbo_render_alerts %>

data/app/views/spree/admin/orders/user/edit.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <%= render 'spree/admin/orders/user/form', order: @order, user: @user %>
+<% end %>

data/app/views/spree/admin/orders/user/new.html.erb

@@ -0,0 +1,30 @@
+<% show_form ||= params[:show_form] %>
+<%= turbo_frame_tag dom_id(@order, :customer_information), class: "card mb-4 blur-busy" do  %>
+  <div class="card-header d-flex justify-content-between">
+    <h5 class="card-title">
+      <%= Spree.t(:customer) %>
+    </h5>
+    <%= link_to Spree.t('actions.discard'), spree.edit_admin_order_path(@order), class: "btn btn-light btn-sm" %>
+  </div>
+  <div class="card-body">
+    <% if show_form %>
+      <%= form_with model: @user, scope: :user, url: spree.admin_order_user_path(@order) do |f| %>
+        <%= render 'spree/admin/shared/error_messages', target: @user %>
+        <%= render 'spree/admin/users/form', f: f %>
+        <div class="d-flex justify-content-between">
+          <%= link_to Spree.t('actions.discard'), spree.edit_admin_order_path(@order), class: "btn btn-light btn-sm" %>
+          <%= turbo_save_button_tag Spree.t('actions.save'), data: { turbo_frame: dom_id(@order, :edit) }, type: :submit, class: 'btn btn-primary text-center btn-sm' %>
+        </div>
+      <% end %>
+    <% else %>
+      <div class="d-flex gap-2 flex-column">
+        <%= form_with url: spree.admin_order_user_path(@order), data: {  controller: 'auto-submit' }, method: :patch do  %>
+          <%= label_tag :user_id, Spree.t(:select_user), class: "sr-only" %>
+          <%= tom_select_tag :user_id, { include_blank: Spree.t(:select_user), options: users_for_select_options, select_data: {action: 'auto-submit#submit'}, disable_with: "<span class='spinner-border spinner-border-sm' role='status'></span>" } %>
+        <% end %>
+        <span class="d-flex w-100 justify-content-center align-items-center"><%= Spree.t(:or) %></span>
+        <%= link_to Spree.t(:create_new), spree.new_admin_order_user_path(@order, show_form: true), class: "btn btn-light w-100" %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/orders/user/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.append :modal_scripts  do %>
+  <%= javascript_tag do %>
+    Turbo.visit("<%= spree.edit_admin_order_path(@order) %>", { action: "replace" })
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<div class="position-fixed border-top px-3 py-2 d-flex bottom-bar" style="bottom: 0px; left: 0px; width: 344px; z-index: 9999">
+  <% if @page_block.can_be_deleted? %>
+    <div data-action="click->page-builder#hideSidebarMobile">
+      <%= link_to_delete(@page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block)) %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,4 @@
+<%= turbo_stream.append "blocks_#{@page_block.section_id}" do %>
+  <%= render 'spree/admin/page_builder/sidebar_block', block: @page_block %>
+<% end %>
+<%= refresh_theme_preview %>

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

@@ -0,0 +1,9 @@
+<%= 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 %>
+
+<%= refresh_theme_preview(@page_block.section) %>

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

@@ -0,0 +1,48 @@
+<%= turbo_frame_tag :page_sidebar do %>
+  <% tab_selected ||= :content %>
+  <h6 class="sidebar-header">
+    <%= link_to spree.edit_admin_theme_path(@theme, page_id: @page&.id),  data: { action: 'click->page-builder#clearActiveOverlays' }, class: 'btn hover-gray px-2' do %>
+      <%= icon 'chevron-left', class: 'mr-0' %>
+    <% end %>
+    <%= @page_block.display_name %>
+  </h6>
+  <div class="px-3 pb-5 mb-5 edit-block" style="margin-bottom: 6rem;">
+    <%= form_for @page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block), data: { controller: 'auto-submit' }, as: :page_block do |f| %>
+      <div data-controller="bootstrap-tabs">
+        <ul class="nav nav-pills nav-fill mb-3 px-0" 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>
+        <%= hidden_field_tag :tab_selected, tab_selected, data: { bootstrap_tabs_target: "input" } %>
+      </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_blocks/forms/#{@page_block.type.demodulize.underscore}", f: f  %>
+          <%= render 'spree/admin/page_blocks/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 %>
+          <% if @page_block.respond_to?(:preferred_text_color) %>
+            <%= render 'spree/admin/page_sections/fields/text_color', f: f %>
+          <% end %>
+          <% if @page_block.respond_to?(:preferred_background_color) %>
+            <%= render 'spree/admin/page_sections/fields/background_color', f: f %>
+          <% end %>
+          <%= render 'spree/admin/page_sections/fields/button', f: f %>
+          <%= yield(:design_tab) %>
+
+          <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_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block)) %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_brand.html.erb

@@ -0,0 +1,15 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment, Spree.t(:text_alignment) %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment, Spree.t(:container_alignment) %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-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: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_brand_logo.html.erb

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <%= f.label :brand %>
+  <%= tom_select_tag 'page_block[brand_id]', active_option: @page_block.brand_id, class: 'w-100', url: spree.admin_brands_select_options_path(format: :json), select_data: {action: 'auto-submit#submit'} %>
+</div>