spree_admin 5.1.7 → 5.2.0.rc1

data/app/views/spree/admin/stores/form/_basic.html.erb

@@ -2,174 +2,81 @@
   <%= Spree.t(:store_details) %>
 <% end %>
 
-<%= content_for(:page_actions_dropdown) do %>
-  <%= link_to_edit_translations(@store) %>
-<% end %>
 
-<div class="row">
-  <div class="col-lg-6">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:name) %> & <%= Spree.t(:logo) %></h5>
-      </div>
-      <div class="card-body">
-        <p class="text-muted">
-          <%= Spree.t(:store_name_help) %>
-        </p>
-        <div class="form-group">
-          <%= f.label :name, Spree.t(:name) %>
-          <%= f.text_field :name, class: 'form-control', required: true, autofocus: f.object.new_record? %>
-          <%= f.error_message_on :name %>
-        </div>
-        <div class="form-group mb-0">
-          <%= f.label :logo do %>
-            <%= Spree.t(:logo) %>
-            <%= help_bubble("Used in the admin dashboard") %>
-          <% end %>
-          <%= render 'active_storage/upload_form', form: f, field_name: :logo, width: 240, height: 240, crop: true %>
-        </div>
-      </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:name) %> & <%= Spree.t(:logo) %></h5>
+  </div>
+  <div class="card-body">
+    <p class="text-muted">
+      <%= Spree.t(:store_name_help) %>
+    </p>
+    <%= f.spree_text_field :name, required: true, autofocus: f.object.new_record? %>
+    
+    <div class="form-group mb-0">
+      <%= f.label :logo do %>
+        <%= Spree.t(:logo) %>
+        <%= help_bubble("Used in the admin dashboard") %>
+      <% end %>
+      <%= render 'active_storage/upload_form', form: f, field_name: :logo, width: 240, height: 240, crop: true %>
     </div>
+  </div>
+</div>
 
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:phone) %> & <%= Spree.t(:address) %></h5>
-      </div>
-      <div class="card-body">
-        <div class="form-group">
-          <%= f.label :contact_phone, Spree.t(:contact_phone) %>
-          <%= f.text_field :contact_phone, class: 'form-control' %>
-        </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:currencies) %> & <%= Spree.t(:translations) %></h5>
+  </div>
+  <div class="card-body">
+    <%= f.spree_select :default_currency, currency_options(@store.default_currency), { label: Spree.t(:default_currency), autocomplete: true } %>
+    <%= f.spree_select :supported_currencies, currency_options(@store.supported_currencies&.split(',')), { prompt: false, multiple: true, autocomplete: true } %>
+    <hr />
+    <%= f.spree_select :default_locale, options_from_collection_for_select(all_locales_options, :last, :first, @store.default_locale || I18n.locale), { autocomplete: true } %>
+    <%= f.spree_select :supported_locales, options_from_collection_for_select(all_locales_options, :last, :first, @store.supported_locales&.split(',')), { multiple: true, autocomplete: true } %>
+  </div>
+</div>
 
-        <div class="form-group">
-          <%= f.label :address, Spree.t(:address) %>
-          <%= f.text_area :address, rows: 5, class: 'form-control', data: { controller: 'textarea-autogrow' } %>
-        </div>
-      </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:standards_and_formats) %></h5>
+  </div>
+  <div class="card-body">
+    <p class="text-muted">
+      <%= Spree.t(:standards_and_formats_help) %>
+    </p>
+    <div class="form-group mb-3">
+      <%= label_tag :preferred_timezone, raw(Spree.t(:timezone) + required_span_tag) %>
+      <%= time_zone_select :store, :preferred_timezone, nil, {}, { data: { controller: 'autocomplete-select' } } %>
     </div>
-
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:standards_and_formats) %></h5>
-      </div>
-      <div class="card-body">
-        <p class="text-muted">
-          <%= Spree.t(:standards_and_formats_help) %>
-        </p>
-        <div class="form-group mb-3">
-          <%= label_tag :preferred_timezone, raw(Spree.t(:timezone) + required_span_tag) %>
-          <%= time_zone_select :store, :preferred_timezone, nil, {}, { data: { controller: 'autocomplete-select' } } %>
-        </div>
-        <div data-controller="unit-system">
-          <div class="form-group mb-3">
-            <%= label_tag :preferred_unit_system, raw(Spree.t(:unit_system) + required_span_tag) %>
-            <%= select_tag 'store[preferred_unit_system]', options_for_select(unit_systems, @store.preferred_unit_system), {class: 'custom-select', data: {unit_system_target: "body", action: "change->unit-system#unitSystemHandler"}} %>
-            <p class="text-muted form-text mt-2 mb-0">
-              <%= Spree.t(:unit_system_help) %>
-            </p>
-          </div>
-          <div class="form-group">
-            <%= label_tag :preferred_weight_unit, raw(Spree.t(:weight_unit) + required_span_tag) %>
-            <%= select_tag 'store[preferred_weight_unit]', options_for_select(weight_units(@store), @store.preferred_weight_unit), {class: 'custom-select', data: {unit_system_target: "weightUnit"}} %>
-            <p class="text-muted form-text mt-2 mb-0">
-              <%= Spree.t(:weight_unit_help) %>
-            </p>
-          </div>
-        </div>
-      </div>
+    <div data-controller="unit-system">
+      <%= f.spree_select :preferred_unit_system, options_for_select(unit_systems, @store.preferred_unit_system), { label: Spree.t(:unit_system), help_bubble: Spree.t(:unit_system_help) }, { data: { unit_system_target: "body", action: "change->unit-system#unitSystemHandler" } } %>
+      <%= f.spree_select :preferred_weight_unit, options_for_select(weight_units(@store), @store.preferred_weight_unit), { label: Spree.t(:weight_unit), help_bubble: Spree.t(:weight_unit_help) }, { data: { unit_system_target: "weightUnit" } } %>
     </div>
   </div>
+</div>
 
-  <div class="col-lg-6">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:currencies) %> & <%= Spree.t(:countries) %></h5>
-      </div>
-      <div class="card-body">
-        <p class="text-muted">
-          <%= Spree.t(:currency_and_country_help) %>
-        </p>
-        <div class="form-group">
-          <%= f.label :default_currency, Spree.t(:default_currency) %>
-          <%= f.select :default_currency, currency_options(@store.default_currency), {}, { data: { controller: 'autocomplete-select' } } %>
-          <%= f.error_message_on :default_currency %>
-        </div>
-        <div class="form-group">
-          <%= f.label :supported_currencies, Spree.t(:supported_currencies) %>
-          <%= f.select :supported_currencies,
-          currency_options(@store.supported_currencies&.split(',')),
-          { prompt: false },
-          { multiple: true, data: { controller: 'autocomplete-select' } } %>
-          <%= f.error_message_on :supported_currencies %>
-        </div>
-
-        <div class="form-group">
-          <%= f.label :default_country_iso, Spree.t(:default_country) %>
-          <%= f.collection_select :default_country_iso, Spree::Country.pluck(:iso, :name), :first, :last, { include_blank: false }, { data: { controller: 'autocomplete-select' } } %>
-          <%= f.error_message_on :default_country_iso %>
-        </div>
-        <div class="form-group">
-          <%= f.label :checkout_zone_id, Spree.t(:shipping_zone) %>
-          <%= f.select :checkout_zone_id, options_for_select(@zones, @store.checkout_zone_id), { }, { data: { controller: 'autocomplete-select' } } %>
-          <small class="form-text text-muted mt-2">
-            <%= Spree.t(:shipping_zone_help) %>
-            <%= link_to Spree.t('admin.manage_zones'), spree.admin_zones_path %>
-          </small>
-          <%= f.error_message_on :checkout_zone_id %>
-        </div>
-
-        <div class="form-group">
-          <%= f.label :default_locale, Spree.t(:default_locale) %>
-          <%= f.select :default_locale, options_from_collection_for_select(all_locales_options, :last, :first, @store.default_locale || I18n.locale), {}, { data: { controller: 'autocomplete-select' } } %>
-          <%= f.error_message_on :default_locale %>
-        </div>
-        <div class="form-group">
-          <%= f.label :supported_locales, Spree.t(:supported_locales) %>
-          <%= f.select :supported_locales, options_from_collection_for_select(all_locales_options, :last, :first, @store.supported_locales&.split(',')), {}, { multiple: true, data: { controller: 'autocomplete-select' } } %>
-          <%= f.error_message_on :supported_locales %>
-        </div>
-      </div>
-    </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:phone) %> & <%= Spree.t(:address) %></h5>
   </div>
+  <div class="card-body">
+    <%= f.spree_text_field :contact_phone %>
+    <%= f.spree_text_area :address %>
+  </div>
+</div>
 
-  <div class="col-lg-6">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:digital_assets) %></h5>
-      </div>
-      <div class="card-body">
-        <p class="text-muted">
-          <%= Spree.t(:digital_assets_help) %>
-        </p>
-        <div class="custom-control custom-checkbox mb-3">
-          <%= f.check_box :preferred_limit_digital_download_days,
-                      class: "custom-control-input" %>
-          <%= f.label :preferred_limit_digital_download_days, class: "custom-control-label" %>
-          <%= f.error_message_on :preferred_limit_digital_download_days %>
-        </div>
-        <div class="form-group">
-          <%= f.label :preferred_digital_asset_authorized_days %>
-          <%= f.number_field :preferred_digital_asset_authorized_days,
-                         class: "form-control",
-                         min: 1 %>
-          <%= f.error_message_on :preferred_digital_asset_authorized_days %>
-        </div>
-
-        <div class="custom-control custom-checkbox mb-3">
-          <%= f.check_box :preferred_limit_digital_download_count,
-                      class: "custom-control-input" %>
-          <%= f.label :preferred_limit_digital_download_count, class: "custom-control-label" %>
-          <%= f.error_message_on :preferred_limit_digital_download_count %>
-        </div>
-        <div class="form-group">
-          <%= f.label :preferred_digital_asset_authorized_clicks %>
-          <%= f.number_field :preferred_digital_asset_authorized_clicks,
-                         class: "form-control",
-                         min: 1 %>
-          <%= f.error_message_on :preferred_digital_asset_authorized_clicks %>
-        </div>
-      </div>
-    </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:digital_assets) %></h5>
+  </div>
+  <div class="card-body">
+    <p class="text-muted">
+      <%= Spree.t(:digital_assets_help) %>
+    </p>
+    <%= f.spree_check_box :preferred_limit_digital_download_days %>
+    <%= f.spree_number_field :preferred_digital_asset_authorized_days, min: 1 %>
+    <%= f.spree_check_box :preferred_limit_digital_download_count %>
+    <%= f.spree_number_field :preferred_digital_asset_authorized_clicks, min: 1 %>
   </div>
 </div>
 

data/app/views/spree/admin/stores/form/_checkout.html.erb

@@ -1,66 +1,50 @@
 <%= content_for(:page_title) do %>
-  <%= Spree.t(:checkout) %> <%= Spree.t(:settings) %>
+<%= Spree.t(:checkout) %> <%= Spree.t(:settings) %>
 <% end %>
 
-<div class="row">
-  <div class="col-lg-6 offset-lg-3">
-    <div class="alert alert-info mb-3">
-      <p>
-        <%= Spree.t('admin.checkout_settings.policy_copy', policies_link: link_to(Spree.t(:policies), spree.edit_admin_store_path + '?section=policies', class: 'alert-link')).html_safe %>
-      </p>
-    </div>
-
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:settings) %></h5>
-      </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:settings) %></h5>
+  </div>
 
-      <div class="card-body">
-        <div class="custom-control custom-checkbox mb-3">
-          <%= f.check_box :preferred_guest_checkout, class: "custom-control-input" %>
-          <%= f.label :preferred_guest_checkout, Spree.t('admin.checkout_settings.guest_checkout.label'), class: "custom-control-label" %>
-          <%= f.error_message_on :preferred_guest_checkout %>
+  <div class="card-body">
+    <%= f.spree_select :checkout_zone_id, options_for_select(@zones, @store.checkout_zone_id), { label: Spree.t(:shipping_zone), autocomplete: true } %>
+    <small class="form-text mb-3">
+      <%= Spree.t(:shipping_zone_help) %>
+      <%= link_to Spree.t('admin.manage_zones'), spree.admin_zones_path, class: 'text-blue' %>
+    </small>
 
-          <p class="text-muted mt-1">
-            <%= Spree.t('admin.checkout_settings.guest_checkout.description') %>
-          </p>
-        </div>
+    <%= f.spree_select :default_country_iso, Spree::Country.pluck(:name, :iso), { include_blank: false, label: Spree.t(:default_country), autocomplete: true, help: Spree.t(:default_country_help) } %>
 
-        <div class="custom-control custom-checkbox mb-3">
-          <%= f.check_box :preferred_company_field_enabled, class: "custom-control-input" %>
-          <%= f.label :preferred_company_field_enabled, Spree.t('admin.store_form.company_field.label'), class: "custom-control-label" %>
-          <%= f.error_message_on :preferred_company_field_enabled %>
+    <hr />
 
-          <div class="text-muted mt-1">
-            <%= Spree.t('admin.store_form.company_field.description') %>
-          </div>
-        </div>
+    <%= f.spree_check_box :preferred_guest_checkout, label: Spree.t('admin.checkout_settings.guest_checkout.label'), help: Spree.t('admin.checkout_settings.guest_checkout.description') %>
+    <%= f.spree_check_box :preferred_company_field_enabled, label: Spree.t('admin.store_form.company_field.label'), help: Spree.t('admin.store_form.company_field.description') %>
+    <%= f.spree_check_box :preferred_special_instructions_enabled, label: Spree.t('admin.checkout_settings.special_instructions.label'), help: Spree.t('admin.checkout_settings.special_instructions.description') %>
+  </div>
+</div>
 
-        <div class="custom-control custom-checkbox">
-          <%= f.check_box :preferred_special_instructions_enabled, class: "custom-control-input" %>
-          <%= f.label :preferred_special_instructions_enabled, Spree.t('admin.checkout_settings.special_instructions.label'), class: "custom-control-label" %>
-          <%= f.error_message_on :preferred_special_instructions_enabled %>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:checkout_message) %></h5>
+  </div>
 
-          <p class="text-muted mt-1">
-            <%= Spree.t('admin.checkout_settings.special_instructions.description') %>
-          </p>
-        </div>
-      </div>
-    </div>
+  <div class="card-body">
+    <%= f.spree_rich_text_area :checkout_message, label: false, help: Spree.t('admin.checkout_settings.checkout_message_description') %>
+  </div>
+</div>
 
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:checkout_message) %></h5>
-      </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t('admin.checkout_settings.checkout_links.label') %></h5>
+  </div>
 
-      <div class="card-body">
-        <p class="text-muted">
-          <%= Spree.t('admin.checkout_settings.checkout_message_description') %>
-        </p>
-        <div class="trix-container">
-          <%= f.rich_text_area :checkout_message, class: 'overflow-auto', style: 'height: 300px' %>
-        </div>
+  <div class="card-body">
+    <div class="alert alert-info">
+      <div>
+        <%= Spree.t('admin.checkout_settings.checkout_links.description') %>
       </div>
     </div>
+    <%= render 'spree/admin/stores/form/checkout_links' %>
   </div>
 </div>

data/app/views/spree/admin/stores/form/_checkout_links.html.erb

@@ -0,0 +1,28 @@
+<div id="checkout_links">
+  <% if current_store.links.any? %>
+    <ul class="list-group mb-3"
+        data-controller="sortable"
+        data-sortable-handle-value=".handle"
+        data-sortable-resource-name-value="page_link"
+        data-sortable-response-kind-value="turbo-stream">
+      <% current_store.links.each do |link| %>
+        <li class="list-group-item p-0 hover-light"
+            data-sortable-update-url="<%= spree.admin_page_link_path(link, sorting_only: true, format: :turbo_stream) %>"
+        >
+          <%= turbo_frame_tag spree_dom_id(link), class: 'd-flex align-items-center w-100 py-2 pl-3 pr-2' do %>
+            <%= link_to link.label, spree.edit_admin_page_link_path(link), class: 'd-block text-dark flex-fill' %>
+            <button class="btn btn-sm pr-0 handle hover-gray h-100 px-1">
+              <%= icon 'grip-vertical', class: 'mr-0' %>
+            </button>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  <% else %>
+    <p class="text-muted text-center p-5">
+      <%= Spree.t(:no_resource_found, resource: Spree::PageLink.model_name.human) %>
+    </p>
+  <% end %>
+
+  <%= link_to_with_icon 'plus', Spree.t(:add_link), spree.admin_store_links_path(current_store), class: 'btn btn-primary w-100', data: { turbo_method: :post } %>
+</div>

data/app/views/spree/admin/stores/form/_emails.html.erb

@@ -2,73 +2,42 @@
   <%= Spree.t(:emails) %>
 <% end %>
 
-<div class="row">
-  <div class="col-lg-6 offset-lg-3">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title"><%= Spree.t(:settings) %></h5>
-      </div>
-      <div class="card-body">
-        <div class="form-group">
-          <div class="custom-control custom-checkbox">
-            <%= f.check_box :preferred_send_consumer_transactional_emails, class: 'custom-control-input' %>
-            <%= f.label :preferred_send_consumer_transactional_emails, Spree.t(:send_consumer_transactional_emails), class: 'custom-control-label' %>
-            <small class="form-text text-muted mt-2">
-              <%= Spree.t('admin.store_form.send_consumer_transactional_emails_help') %>
-            </small>
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title">Email addresses</h5>
-      </div>
-      <div class="card-body">
-        <p class="text-muted">
-          Please provide the email address that will be used as the sender of all emails sent from your store.
-        </p>
-
-        <div class="form-group">
-          <%= f.label :mail_from_address, raw(Spree.t(:mail_from_address)  + required_span_tag) %>
-          <%= f.text_field :mail_from_address, class: 'form-control', required: true %>
-          <%= f.error_message_on :mail_from_address %>
-        </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:settings) %></h5>
+  </div>
+  <div class="card-body">
+    <%= f.spree_check_box :preferred_send_consumer_transactional_emails, help: Spree.t('admin.store_form.send_consumer_transactional_emails_help'), label: Spree.t(:send_consumer_transactional_emails) %>
+  </div>
+</div>
 
-        <div class="form-group">
-          <%= f.label :customer_support_email, Spree.t(:customer_support_email) %>
-          <%= f.text_field :customer_support_email, class: 'form-control' %>
-          <%= f.error_message_on :customer_support_email %>
-          <small class="form-text text-muted mt-2">
-            <%= Spree.t('admin.store_form.customer_support_email_help') %>
-          </small>
-        </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title">Email addresses</h5>
+  </div>
+  <div class="card-body">
+    <p class="text-muted">
+      Please provide the email address that will be used as the sender of all emails sent from your store.
+    </p>
 
-        <div class="form-group">
-          <%= f.label :new_order_notifications_email, Spree.t(:new_order_notifications_email) %>
-          <%= f.text_field :new_order_notifications_email, class: 'form-control' %>
-          <%= f.error_message_on :new_order_notifications_email %>
-          <small class="form-text text-muted mt-2">
-            <%= Spree.t('admin.store_form.new_order_notifications_email_help') %>
-          </small>
-        </div>
-      </div>
-    </div>
+    <%= f.spree_email_field :mail_from_address, required: true %>
+    <%= f.spree_email_field :customer_support_email, help: Spree.t('admin.store_form.customer_support_email_help') %>
+    <%= f.spree_email_field :new_order_notifications_email, help: Spree.t('admin.store_form.new_order_notifications_email_help') %>
+  </div>
+</div>
 
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title">Logo for emails</h5>
-      </div>
-      <div class="card-body">
-        <p class="text-muted">This logo is included in all email notifications such as order confirmation</p>
-        <%= render 'active_storage/upload_form', form: f, field_name: :mailer_logo, width: 204, height: 104 %>
-        <p class="form-text text-muted mb-0 mt-2">
-          We recommend images with a transparent background.
-          <br />
-          Only JPEG and PNG formats are supported.
-        </p>
-      </div>
-    </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:logo) %></h5>
+  </div>
+  <div class="card-body">
+    <p class="text-muted">This logo is included in all email notifications such as order confirmation</p>
+    <%= render 'active_storage/upload_form', form: f, field_name: :mailer_logo, width: 204, height: 104 %>
+    <p class="form-text mb-0 mt-2">
+      We recommend images with a transparent background.
+      <br />
+      Only JPEG and PNG formats are supported.
+    </p>
   </div>
 </div>

data/app/views/spree/admin/stores/form/_policies.html.erb

@@ -2,84 +2,68 @@
   <%= Spree.t(:policies) %>
 <% end %>
 
-<%= content_for :page_alerts do %>
-  <div class="alert alert-info mb-3">
-    Policies will be automatically added to footer of your store and will be available to customers during checkout.
+<div class="alert alert-info">
+  Policies will be automatically added to footer of your store and will be available to customers during checkout.
+</div>
+
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:terms_of_service) %></h5>
   </div>
-<% end %>
+  <div class="card-body">
+    <p class="text-muted">
+      Customers will need to accept these terms of service during signup.
+    </p>
+    <%= f.spree_rich_text_area :customer_terms_of_service, style: 'height: 300px', label: Spree.t(:terms_of_service) %>
+  </div>
+</div>
 
-<div class="card-lg p-4">
-  <h5 class="mb-3"><%= Spree.t(:terms_of_service) %></h5>
-  <div class="row">
-    <div class="col-lg-4">
-      <p class="text-muted">
-        Customers will need to accept these terms of service during signup.
-      </p>
-    </div>
-    <div class="col-lg-7 offset-lg-1">
-      <div class="trix-container">
-        <%= f.rich_text_area :customer_terms_of_service, class: 'overflow-auto', style: 'height: 300px' %>
-      </div>
-    </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:privacy_policy) %></h5>
   </div>
-  <hr class="my-5" />
-  <h5 class="mb-3"><%= Spree.t(:privacy_policy) %></h5>
-  <div class="row">
-    <div class="col-lg-4">
-      <p class="text-muted">
-        Customers will need to accept these privacy policy during signup.
-      </p>
-    </div>
-    <div class="col-lg-7 offset-lg-1">
-      <div class="trix-container">
-        <%= f.rich_text_area :customer_privacy_policy, class: 'overflow-auto', style: 'height: 300px' %>
-      </div>
-    </div>
+  <div class="card-body">
+    <p class="text-muted">
+      Customers will need to accept these privacy policy during signup.
+    </p>
+    <%= f.spree_rich_text_area :customer_privacy_policy, style: 'height: 300px', label: Spree.t(:privacy_policy) %>
   </div>
+</div>
 
-  <hr class="my-5" />
-  <h5 class="mb-3"><%= Spree.t(:returns_policy) %></h5>
-  <div class="row">
-    <div class="col-lg-4">
-      <p class="text-muted">
-        Please provide your customers with a clear and transparent returns policy.
-      </p>
-    </div>
-    <div class="col-lg-7 offset-lg-1">
-      <div class="trix-container">
-        <%= f.rich_text_area :customer_returns_policy, class: 'overflow-auto', style: 'height: 300px' %>
-      </div>
-    </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:returns_policy) %></h5>
+  </div>
+  <div class="card-body">
+    <p class="text-muted">
+      Please provide your customers with a clear and transparent returns policy.
+    </p>
+    <%= f.spree_rich_text_area :customer_returns_policy, style: 'height: 300px', label: Spree.t(:returns_policy) %>
+  </div>
+</div>
+
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title"><%= Spree.t(:shipping_policy) %></h5>
   </div>
-  <hr class="my-5" />
-  <h5 class="mb-3"><%= Spree.t(:shipping_policy) %></h5>
-  <div class="row">
-    <div class="col-lg-4">
+  <div class="card-body">
+    <p class="text-muted">
+      Please provide your customers with a clear and transparent shipping policy.
+    </p>
+    <%= f.spree_rich_text_area :customer_shipping_policy, style: 'height: 300px', label: Spree.t(:shipping_policy) %>
+  </div>
+</div>
+
+<% if current_store.respond_to?(:partners_terms_of_service) %>
+  <div class="card mb-4">
+    <div class="card-header">
+      <h5 class="card-title">Vendors <%= Spree.t(:terms_of_service) %></h5>
+    </div>
+    <div class="card-body">
       <p class="text-muted">
-        Please provide your customers with a clear and transparent shipping policy.
+        Vendors you invite will need to accept these terms of service during their onboarding process.
       </p>
-    </div>
-    <div class="col-lg-7 offset-lg-1">
-      <div class="trix-container">
-        <%= f.rich_text_area :customer_shipping_policy, class: 'overflow-auto', style: 'height: 300px' %>
-      </div>
+      <%= f.spree_rich_text_area :partners_terms_of_service, style: 'height: 300px', label: Spree.t(:terms_of_service) %>
     </div>
   </div>
-
-  <% if current_store.respond_to?(:partners_terms_of_service) %>
-    <hr class="my-5">
-    <h5 class="mb-3">Vendors <%= Spree.t(:terms_of_service) %></h5>
-    <div class="row" id="partners-terms">
-      <div class="col-lg-4">
-        <p class="text-muted">
-          Vendors you invite will need to accept these terms of service during their onboarding process.
-        </p>
-      </div>
-      <div class="col-lg-7 offset-lg-1">
-        <div class="trix-container">
-          <%= f.rich_text_area :partners_terms_of_service, class: 'overflow-auto', style: 'height: 300px' %>
-        </div>
-      </div>
-    </div>
-  <% end %>
-</div>
+<% end %>