spree_admin 5.1.8 → 5.2.0.rc1

data/app/views/spree/admin/users/_lifetime_stats.html.erb

@@ -45,7 +45,7 @@
         <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0 border-right">
           <span class="text-muted"><%= Spree.t(:created_at) %></span>
           <span class="font-size-lg text-dark font-weight-bold mt-1 me-3">
-            <%= local_time(@user.created_at) %>
+            <%= spree_time(@user.created_at) %>
           </span>
         </div>
       </div>

data/app/views/spree/admin/users/_tabs.html.erb

@@ -1,41 +1,41 @@
-<ul class="nav nav-pills mb-3" id="vendor" role="tablist">
-  <% if spree.respond_to?(:admin_user_visits_path) %>
-    <li class="nav-item" role="presentation">
-      <a class="nav-link active" id="pills-overview-tab" data-toggle="pill" data-target="#pills-overview" role="tab" aria-controls="pills-overview" aria-selected="true">Timeline</a>
-    </li>
-  <% end %>
+<div data-controller="tabs">
+  <ul class="nav nav-pills mb-3" role="tablist">
+    <% if spree.respond_to?(:admin_user_visits_path) %>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link active" id="pills-overview-tab" data-tabs-target="tab" data-action="click->tabs#select" role="tab" aria-controls="pills-overview" aria-selected="true">Timeline</a>
+      </li>
+    <% end %>
 
-  <% if can?(:read, Spree::Order) %>
-    <li class="nav-item" role="presentation">
-      <a class="nav-link <%= 'active' unless spree.respond_to?(:admin_user_visits_path) %>" id="pills-orders2-tab" data-toggle="pill" data-target="#pills-orders2" role="tab" aria-controls="pills-orders2" aria-selected="false"><%= Spree.t(:orders) %></a>
-    </li>
-    <li class="nav-item" role="presentation">
-      <a class="nav-link" id="pills-checkouts-tab" data-toggle="pill" data-target="#pills-checkouts" role="tab" aria-controls="pills-checkouts" aria-selected="false"><%= Spree.t(:draft_orders) %></a>
-    </li>
-  <% end %>
+    <% if can?(:read, Spree::Order) %>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link <%= 'active' unless spree.respond_to?(:admin_user_visits_path) %>" id="pills-orders2-tab" data-tabs-target="tab" data-action="click->tabs#select" role="tab" aria-controls="pills-orders2" aria-selected="false"><%= Spree.t(:orders) %></a>
+      </li>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" id="pills-checkouts-tab" data-tabs-target="tab" data-action="click->tabs#select" role="tab" aria-controls="pills-checkouts" aria-selected="false"><%= Spree.t(:draft_orders) %></a>
+      </li>
+    <% end %>
 
-  <% if spree.respond_to?(:admin_user_gift_cards_path) && can?(:read, Spree::GiftCard) %>
-    <li class="nav-item" role="presentation">
-      <a class="nav-link" id="pills-gift-cards-tab" data-toggle="pill" data-target="#pills-gift-cards" role="tab" aria-controls="pills-gift-cards" aria-selected="false"><%= Spree.t(:gift_cards) %></a>
-    </li>
-  <% end %>
+    <% if spree.respond_to?(:admin_user_gift_cards_path) && can?(:read, Spree::GiftCard) %>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" id="pills-gift-cards-tab" data-tabs-target="tab" data-action="click->tabs#select" role="tab" aria-controls="pills-gift-cards" aria-selected="false"><%= Spree.t(:gift_cards) %></a>
+      </li>
+    <% end %>
 
-  <% if can?(:read, Spree::StoreCredit) %>
-    <li class="nav-item" role="presentation">
-      <a class="nav-link" id="pills-store-credits-tab" data-toggle="pill" data-target="#pills-store-credits" role="tab" aria-controls="pills-store-credits" aria-selected="false"><%= Spree.t(:store_credits) %></a>
-    </li>
-  <% end %>
-</ul>
+    <% if can?(:read, Spree::StoreCredit) %>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" id="pills-store-credits-tab" data-tabs-target="tab" data-action="click->tabs#select" role="tab" aria-controls="pills-store-credits" aria-selected="false"><%= Spree.t(:store_credits) %></a>
+      </li>
+    <% end %>
+  </ul>
 
-<div class="tab-content" id="vendorContent">
   <% if spree.respond_to?(:admin_user_visits_path) %>
-    <div class="tab-pane fade show active pt-3" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview">
+    <div data-tabs-target="panel" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview" class="pt-3 animate__animated animate__fadeIn">
       <%= turbo_frame_tag :user_visits, src: spree.admin_user_visits_path(@user), target: '_top' %>
     </div>
   <% end %>
 
   <% if can?(:read, Spree::Order) %>
-    <div class="tab-pane fade <%= 'show active' unless spree.respond_to?(:admin_user_visits_path) %>" id="pills-orders2" role="tabpanel" aria-labelledby="pills-orders2">
+    <div data-tabs-target="panel" id="pills-orders2" role="tabpanel" aria-labelledby="pills-orders2" class="animate__animated animate__fadeIn" <%= 'hidden' if spree.respond_to?(:admin_user_visits_path) %>>
       <div class="card-lg">
         <%= turbo_frame_tag :orders_list, src: spree.admin_user_orders_path(@user, frame_name: :orders_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
           <%= render 'spree/admin/shared/spinner' %>
@@ -43,7 +43,7 @@
       </div>
     </div>
 
-    <div class="tab-pane fade" id="pills-checkouts" role="tabpanel" aria-labelledby="pills-checkouts">
+    <div data-tabs-target="panel" id="pills-checkouts" role="tabpanel" aria-labelledby="pills-checkouts" hidden class="animate__animated animate__fadeIn">
       <div class="card-lg">
         <%= turbo_frame_tag :orders_list, src: spree.admin_user_checkouts_path(@user, frame_name: :orders_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
           <%= render 'spree/admin/shared/spinner' %>
@@ -53,7 +53,7 @@
   <% end %>
 
   <% if spree.respond_to?(:admin_user_gift_cards_path) && can?(:read, Spree::GiftCard) %>
-    <div class="tab-pane fade" id="pills-gift-cards" role="tabpanel" aria-labelledby="pills-gift-cards">
+    <div data-tabs-target="panel" id="pills-gift-cards" role="tabpanel" aria-labelledby="pills-gift-cards" hidden class="animate__animated animate__fadeIn">
       <div class="card-lg">
         <%= turbo_frame_tag :gift_cards_list, src: spree.admin_user_gift_cards_path(@user, frame_name: :gift_cards_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
           <%= render 'spree/admin/shared/spinner' %>
@@ -63,7 +63,7 @@
   <% end %>
 
   <% if can?(:read, Spree::StoreCredit) %>
-    <div class="tab-pane fade" id="pills-store-credits" role="tabpanel" aria-labelledby="pills-store-credits">
+    <div data-tabs-target="panel" id="pills-store-credits" role="tabpanel" aria-labelledby="pills-store-credits" hidden class="animate__animated animate__fadeIn">
       <div class="card-lg">
         <%= turbo_frame_tag :store_credits_list, src: spree.admin_user_store_credits_path(@user, frame_name: :store_credits_list), loading: :lazy, autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
           <%= render 'spree/admin/shared/spinner' %>

data/app/views/spree/admin/users/_user.html.erb

@@ -14,5 +14,5 @@
   </td>
   <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= user.completed_orders_for_store(current_store).count %></td>
   <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= user.display_amount_spent_in(current_currency) %></td>
-  <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= local_time(user.created_at) %></td>
+  <td class='w-10 text-nowrap cursor-pointer' data-action="click->row-link#openLink"><%= spree_time(user.created_at) %></td>
 </tr>

data/app/views/spree/admin/users/bulk_modal.html.erb

@@ -1,16 +1,14 @@
-<%= turbo_frame_tag :bulk_modal do %>
-  <div class="modal-content">
-    <%= modal_header(@title) %>
-    <div class="modal-body">
-      <p><%= @body %></p>
+<%= turbo_frame_tag :bulk_dialog do %>
+  <%= dialog_header(@title, 'bulk-dialog') %>
+  <div class="dialog-body overflow-visible">
+    <p><%= @body %></p>
 
-      <% if params[:kind] == 'add_tags' || params[:kind] == 'remove_tags' %>
-        <%= tom_select_tag 'tags', multiple: true, class: 'w-100', options: user_tags_json_array, required: true, value_field: :name, create: params[:kind] == 'add_tags' %>
-      <% end %>
-    </div>
-    <div class="modal-footer">
-      <%= modal_discard_button %>
-      <%= turbo_save_button_tag %>
-    </div>
+    <% if params[:kind] == 'add_tags' || params[:kind] == 'remove_tags' %>
+      <%= tom_select_tag 'tags', multiple: true, class: 'w-100', options: user_tags_json_array, required: true, value_field: :name, create: params[:kind] == 'add_tags' %>
+    <% end %>
+  </div>
+  <div class="dialog-footer">
+    <%= dialog_discard_button('bulk-dialog') %>
+    <%= turbo_save_button_tag %>
   </div>
 <% end %>

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

@@ -8,7 +8,7 @@
   <%= form_for [:admin, @user], as: :user, url: spree.admin_user_path(@user), method: :put do |f| %>
     <div class="card-body pb-0">    
       <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @user } %>
-      <%= render 'form', f: f %>
+      <%= render 'form_fields', f: f %>
     </div>
     <div class="card-footer">
       <%= render 'spree/admin/shared/edit_resource_links', f: f, turbo_frame: '_top' %>

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

@@ -3,71 +3,69 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= link_to spree.admin_users_path(q: params[:q].to_unsafe_hash, page: params[:page], per_page: params[:per_page], format: :csv), class: 'btn btn-light bg-transparent with-tip d-none d-lg-inline-flex', title: 'Export Customers to a CSV file. To filter specific Customers use "Filters" or Customers/Subscribers tabs before clicking this button' do %>
-    <%= icon 'table-export' %>
-    <%= Spree.t(:export) %>
-  <% end if can?(:create, Spree::Export) %>
-  
   <%= render_admin_partials(:users_actions_partials) %>
-  <%= render 'extra_actions' %>
+  <%= link_to_export_modal %>
   <%= link_to_with_icon 'plus', Spree.t(:new_customer), spree.new_admin_user_path, class: "btn btn-primary" if can? :create, Spree::user_class %>
 <% end %>
 
 <%= render_admin_partials(:users_header_partials) %>
 
 <div class="card-lg">
-  <%= render "spree/admin/users/filters" %>
+  <%= turbo_frame_tag "customers", autoscroll: true, data: { autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
+    <%= render 'spree/admin/shared/export_modal', export_type: Spree::Exports::Customers %>
+    <%= render "spree/admin/users/filters" %>
 
-  <% if @collection.any? %>
-    <div data-controller="bulk-operation" data-action="keydown.esc->bulk-operation#cancel" tabindex="0">
-      <%= form_tag spree.admin_users_path, data: { 'bulk-operation-target': 'form' } do %>
-        <%= render 'spree/admin/shared/bulk_modal' %>
-        <div id="bulk-panel" class="d-none" data-bulk-operation-target="panel">
-          <div class="bulk-panel-container">
-            <%= bulk_operations_counter %>
+    <% if @collection.any? %>
+      <div data-controller="bulk-operation bulk-dialog" data-action="keydown.esc->bulk-operation#cancel" tabindex="0">
+        <%= form_tag spree.admin_users_path, data: { 'bulk-operation-target': 'form' } do %>
+          <%= render 'spree/admin/shared/bulk_modal' %>
+          <div id="bulk-panel" class="d-none" data-bulk-operation-target="panel">
+            <div class="bulk-panel-container">
+              <%= bulk_operations_counter %>
 
-            <% if can?(:manage_tags, Spree.user_class) %>
-              <%= bulk_action_link(
-                Spree.t("admin.bulk_ops.users.title.add_tags"),
-                spree.bulk_modal_admin_users_path(kind: :add_tags),
-                icon: "tag-plus",
-                url: spree.bulk_add_tags_admin_users_path
-              ) %>
-              <%= bulk_action_link(
-                Spree.t("admin.bulk_ops.users.title.remove_tags"),
-                spree.bulk_modal_admin_users_path(kind: :remove_tags),
-                icon: "tag-minus",
-                url: spree.bulk_remove_tags_admin_users_path
-              ) %>
-            <% end %>
-            <%= bulk_operations_close_button %>
+              <% if can?(:manage_tags, Spree.user_class) %>
+                <%= bulk_action_link(
+                  Spree.t("admin.bulk_ops.users.title.add_tags"),
+                  spree.bulk_modal_admin_users_path(kind: :add_tags),
+                  icon: "tag-plus",
+                  url: spree.bulk_add_tags_admin_users_path
+                ) %>
+                <%= bulk_action_link(
+                  Spree.t("admin.bulk_ops.users.title.remove_tags"),
+                  spree.bulk_modal_admin_users_path(kind: :remove_tags),
+                  icon: "tag-minus",
+                  url: spree.bulk_remove_tags_admin_users_path
+                ) %>
+              <% end %>
+              <%= bulk_operations_close_button %>
+            </div>
           </div>
-        </div>
 
-        <div class="table-responsive">
-          <table class="table" id="listing_users">
-            <thead>
-              <tr data-hook="admin_users_index_headers">
-                <th scope="col" class="pr-0 w-5">
-                  <%= bulk_operations_select_all_checkbox %>
-                </th>
-                <th><%= Spree.t(:name) %></th>
-                <th><%= Spree.t(:email_marketing) %></th>
-                <th><%= Spree.t(:location) %></th>
-                <th><%= Spree.t('admin.num_orders') %></th>
-                <th><%= Spree.t('admin.amount_spent') %></th>
-                <th><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <%= render collection: @collection, partial: "spree/admin/users/user", cached: spree_base_cache_scope %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
-    </div>
-    <%= render "spree/admin/shared/index_table_options", collection: @collection if @collection.any? %>
-  <% else %>
-    <%= render "spree/admin/shared/no_resource_found" %>
+          <div class="table-responsive">
+            <table class="table" id="listing_users">
+              <thead>
+                <tr data-hook="admin_users_index_headers">
+                  <th scope="col" class="pr-0 w-5">
+                    <%= bulk_operations_select_all_checkbox %>
+                  </th>
+                  <th scope="col"><%= Spree.t(:name) %></th>
+                  <th scope="col"><%= Spree.t(:email_marketing) %></th>
+                  <th scope="col"><%= Spree.t(:location) %></th>
+                  <th scope="col"><%= Spree.t('admin.num_orders') %></th>
+                  <th scope="col"><%= Spree.t('admin.amount_spent') %></th>
+                  <th scope="col"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
+                </tr>
+              </thead>
+              <tbody>
+                <%= render collection: @collection, partial: "spree/admin/users/user", cached: spree_base_cache_scope %>
+              </tbody>
+            </table>
+          </div>
+        <% end %>
+      </div>
+      <%= render "spree/admin/shared/index_table_options", collection: @collection if @collection.any? %>
+    <% else %>
+      <%= render "spree/admin/shared/no_resource_found" %>
+    <% end %>
   <% end %>
 </div>

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

@@ -1,18 +1 @@
-<% content_for :page_title do %>
-  <%= page_header_back_button spree.admin_users_path %>
-  <%= Spree.t(:new_customer) %>
-<% end %>
-
-<%= form_for [:admin, @user], url: spree.admin_users_path, method: :post do |f| %>
-  <div class="row">
-    <div class="col-lg-6 offset-lg-3">
-      <div class="card mb-4">
-        <div class="card-body">
-          <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @user } %>
-          <%= render 'form', f: f %>
-        </div>
-      </div>
-      <%= render 'spree/admin/shared/new_resource_links' %>
-    </div>
-  </div>
-<% end %>
+<%= render 'spree/admin/shared/new_resource' %>

data/app/views/spree/admin/variants/_variant.html.erb

@@ -9,7 +9,7 @@
     <%= render "spree/admin/shared/product_image", object: variant %>
     <div class="ml-3">
       <strong><%= variant.name %></strong>
-      <% if variant.options_text.present? %>
+      <% if !variant.is_master? && variant.options_text.present? %>
         <p class="text-muted my-1 font-size-sm">
           <%= variant.options_text %>
         </p>

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

@@ -10,7 +10,7 @@
       <%= render 'spree/admin/variants/form/basic', f: f %>
       <%= render 'spree/admin/variants/form/pricing', f: f %>
       <%= render 'spree/admin/variants/form/inventory', f: f %>
-      <%= render 'spree/admin/variants/form/media', viewable: @variant %>
+      <%= render 'spree/admin/shared/media_form', viewable: @variant, viewable_type: 'Spree::Variant' %>
       <%= render 'spree/admin/shared/edit_resource_links', f: f %>
     </div>
   </div>

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

@@ -5,26 +5,13 @@
     </h5>
   </div>
   <div class="card-body">
-    <div class="form-group">
-      <%= f.label :sku, Spree.t(:sku) %>
-      <%= f.text_field :sku, class: 'form-control' %>
-    </div>
+    <%= f.spree_text_field :sku %>
 
-    <div class="form-group">
-      <%= f.label :barcode, Spree.t(:barcode) %>
-      <%= f.text_field :barcode, class: 'form-control' %>
-    </div>
+    <%= f.spree_text_field :barcode %>
 
-    <div class="form-group">
-      <%= f.label :tax_category_id, Spree.t(:tax_category) %>
-      <%= f.collection_select(:tax_category_id, @tax_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { data: { controller: 'autocomplete-select' } }) %>
-    </div>
+    <%= f.spree_collection_select :tax_category_id, @tax_categories, :id, :name, { include_blank: Spree.t('match_choices.none'), label: Spree.t(:tax_category), autocomplete: true } %>
 
-    <div class="form-group">
-      <%= f.label :discontinue_on, Spree.t(:discontinue_on) %>
-      <%= f.error_message_on :discontinue_on %>
-      <%= f.date_field :discontinue_on, class: 'form-control' %>
-    </div>
+    <%= f.spree_date_field :discontinue_on %>
 
     <%= render 'spree/admin/variants/form/dimensions', f: f %>
   </div>

data/app/views/spree/admin/variants/form/_dimensions.html.erb

@@ -1,26 +1,12 @@
 <div class="row">
   <div class="col-lg-6">
-    <div class="form-group mb-3">
-      <%= f.label :width %>
-      <%= f.text_field :width, value: number_with_precision(f.object.width, precision: 2), class: 'form-control' %>
-    </div>
-
-    <div class="form-group mb-3">
-      <%= f.label :height %>
-      <%= f.text_field :height, value: number_with_precision(f.object.height, precision: 2), class: 'form-control' %>
-    </div>
+    <%= f.spree_text_field :width, value: number_with_precision(f.object.width, precision: 2) %>
+    <%= f.spree_text_field :height, value: number_with_precision(f.object.height, precision: 2) %>
   </div>
 
   <div class="col-lg-6">
-    <div class="form-group mb-3">
-      <%= f.label :depth %>
-      <%= f.text_field :depth, value: number_with_precision(f.object.depth, precision: 2), class: 'form-control' %>
-    </div>
-
-    <div class="form-group mb-3">
-      <%= f.label :dimensions_unit, Spree.t(:unit) %>
-      <%= f.select :dimensions_unit, options_for_select(dimension_units(current_store), f.object.dimensions_unit), { include_blank: false }, { class: 'custom-select' } %>
-    </div>
+    <%= f.spree_text_field :depth, value: number_with_precision(f.object.depth, precision: 2) %>
+    <%= f.spree_select :dimensions_unit, options_for_select(dimension_units(current_store), f.object.dimensions_unit), { include_blank: false, label: Spree.t(:unit) } %>
   </div>
 </div>
 

data/app/views/spree/admin/variants/form/_inventory.html.erb

@@ -5,24 +5,18 @@
     </h5>
   </div>
   <div class="card-body p-0" data-controller="reveal" data-reveal-hidden-class="d-none">
-    <div class="custom-control custom-checkbox mb-4 m-3">
-      <%= f.check_box :track_inventory,
-            class: 'custom-control-input',
-            data: {
-              action: 'change->reveal#toggle'
-            }
-          %>
-      <%= f.label :track_inventory, Spree.t(:track_quantity), class: 'custom-control-label' %>
+    <div class="mb-4 m-3">
+      <%= f.spree_check_box :track_inventory, data: { action: 'change->reveal#toggle' } %>
     </div>
 
     <table class="table <%= 'd-none' unless f.object.track_inventory? %>" data-reveal-target="item">
       <thead>
         <tr>
-          <th><%= Spree.t(:stock_location) %></th>
-          <th>
+          <th scope="col"><%= Spree.t(:stock_location) %></th>
+          <th scope="col">
             <%= Spree.t(:count_on_hand) %>
           </th>
-          <th>
+          <th scope="col">
             <%= Spree.t(:backorderable) %>
           </th>
         </tr>
@@ -48,7 +42,7 @@
         <% end %>
       </tbody>
     </table>
-    <div class="card-footer border-top text-center bg-gray-25 text-muted">
+    <div class="card-footer border-top text-center bg-light text-muted">
       <%= Spree.t('admin.variants_form.stock_locations_link', link: spree.admin_stock_locations_path).html_safe %>
     </div>
   </div>

data/app/views/spree/admin/variants/form/_pricing.html.erb

@@ -12,11 +12,11 @@
     <table class="table">
       <thead>
         <tr>
-          <th><%= Spree.t(:currency) %></th>
-          <th>
+          <th scope="col"><%= Spree.t(:currency) %></th>
+          <th scope="col">
             <%= Spree.t(:amount) %>
           </th>
-          <th>
+          <th scope="col">
             <%= Spree.t(:compare_at_amount) %>
             <%= help_bubble(Spree.t('admin.variants_form.compare_at_price_description')) %>
           </th>

data/app/views/spree/admin/webhook_events/_webhook_event.html.erb

@@ -1,7 +1,7 @@
 <tr id="<%= spree_dom_id webhook_event %>">
   <td><span class="badge badge-light"><%= webhook_event.name %></span></td>
   <td><%= active_badge(webhook_event.success) %></td>
-  <td><%= local_time(webhook_event.created_at) %></td>
+  <td><%= spree_time(webhook_event.created_at) %></td>
   <td>
     <% if webhook_event.response_code%>
       <code><%= webhook_event.response_code %></code></td>

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

@@ -1,80 +1,63 @@
-<div class="row">
-  <div class="col-12 col-lg-6">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title">
-          <%= Spree.t(:general_settings) %>
-        </h5>
-      </div>
-      <div class="card-body">
-        <div class="row">
-          <div class="form-group col-12">
-            <%= f.label :url, raw(Spree.t(:url) + required_span_tag) %>
-            <%= f.text_field :url, class: 'form-control', placeholder: 'https://example.com/endpoint' %>
-            <%= f.error_message_on :url %>
-          </div>
-          <div class="form-group col-3">
-            <div class="custom-control custom-switch">
-              <%= f.check_box :active, class: 'custom-control-input' %>
-              <%= f.label :active, class: 'custom-control-label' %>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title">
+      <%= Spree.t(:general_settings) %>
+    </h5>
   </div>
-  <div class="col-12 col-lg-6">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="card-title">
-          <%= Spree.t('admin.webhooks_subscribers.webhooks_events') %>
-        </h5>
-      </div>
-      <div class="card-body" data-controller="reveal">
-        <div class="form-group">
-          <div>
-            <div class="custom-control custom-radio mb-3">
-              <%= radio_button_tag :subscribe_to_all_events, true,
-                               subscribe_to_all_events?,
-                               {
-                                 'data-action' => 'click->reveal#hide',
-                                  class: 'custom-control-input events' } %>
-              <%= label_tag :subscribe_to_all_events_true, Spree.t('admin.webhooks_subscribers.subscribe_to_all_events'), class: 'custom-control-label' %>
-            </div>
-            <div class="custom-control custom-radio">
-              <%= radio_button_tag :subscribe_to_all_events, false,
-                               !subscribe_to_all_events?,
-                               { 'data-action' => 'click->reveal#show',
-                                 class: 'custom-control-input events' } %>
-              <%= label_tag :subscribe_to_all_events_false, Spree.t('admin.webhooks_subscribers.select_events'), class: 'custom-control-label' %>
+  <div class="card-body">
+    <%= f.spree_text_field :url, placeholder: 'https://example.com/endpoint' %>
+    <%= f.spree_check_box :active %>
+  </div>
+</div>
+<div class="card mb-4">
+  <div class="card-header">
+    <h5 class="card-title">
+      <%= Spree.t('admin.webhooks_subscribers.webhooks_events') %>
+    </h5>
+  </div>
+  <div class="card-body" data-controller="reveal">
+    <div class="form-group">
+      <div>
+        <div class="custom-control custom-radio mb-3">
+          <%= radio_button_tag :subscribe_to_all_events, true,
+                            subscribe_to_all_events?,
+                            {
+                              'data-action' => 'click->reveal#hide',
+                              class: 'custom-control-input events' } %>
+          <%= label_tag :subscribe_to_all_events_true, Spree.t('admin.webhooks_subscribers.subscribe_to_all_events'), class: 'custom-control-label' %>
+        </div>
+        <div class="custom-control custom-radio">
+          <%= radio_button_tag :subscribe_to_all_events, false,
+                            !subscribe_to_all_events?,
+                            { 'data-action' => 'click->reveal#show',
+                              class: 'custom-control-input events' } %>
+          <%= label_tag :subscribe_to_all_events_false, Spree.t('admin.webhooks_subscribers.select_events'), class: 'custom-control-label' %>
 
-              <div data-reveal-target="item" class="<%= subscribe_to_all_events? ? 'hidden' : '' %>">
-                <div class="bg-light rounded-lg p-3 mt-3">
-                  <% @supported_events.each do |event| %>
-                    <div class="form-group">
-                      <div class="custom-control custom-switch">
-                        <% resource_name = event.first %>                        
-                        <%= f.check_box resource_name, 
-                          { class: 'events-checkbox custom-control-input',
-                            checked: @webhooks_subscriber.subscriptions&.any? { |event| event.include? "#{resource_name}." } },
-                          true, 
-                          nil %>
-                          
-                        <%= f.label resource_name, class: 'custom-control-label w-100' do %> 
-                          <%= Spree.t("#{resource_name.to_s.pluralize}") %>
-                          <p class="gap-2 mb-0 mt-1">
-                            <% event.last.each do |event| %>
-                              <span class="badge badge-light">
-                                <%= event %>
-                              </span>
-                            <% end %>
-                          </p>
+          <div data-reveal-target="item" class="<%= subscribe_to_all_events? ? 'hidden' : '' %>">
+            <div class="bg-light rounded-lg p-3 mt-3">
+              <% @supported_events.each do |event| %>
+                <div class="form-group">
+                  <div class="custom-control custom-switch">
+                    <% resource_name = event.first %>                        
+                    <%= f.check_box resource_name, 
+                      { class: 'events-checkbox custom-control-input',
+                        checked: @webhooks_subscriber.subscriptions&.any? { |event| event.include? "#{resource_name}." } },
+                      true, 
+                      nil %>
+                      
+                    <%= f.label resource_name, class: 'custom-control-label w-100' do %> 
+                      <%= Spree.t("#{resource_name.to_s.pluralize}") %>
+                      <p class="gap-2 mb-0 mt-1">
+                        <% event.last.each do |event| %>
+                          <span class="badge badge-light">
+                            <%= event %>
+                          </span>
                         <% end %>
-                      </div>
-                    </div>
-                  <% end %>
+                      </p>
+                    <% end %>
+                  </div>
                 </div>
-              </div>
+              <% end %>
             </div>
           </div>
         </div>
@@ -82,3 +65,4 @@
     </div>
   </div>
 </div>
+

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

@@ -0,0 +1,7 @@
+<tr>
+  <th scope="col"><%= Spree.t(:url) %></th>
+  <th scope="col"><%= Spree.t(:active) %></th>
+  <th scope="col"><%= Spree.t('admin.webhooks_subscribers.subscriptions') %></th>
+  <th scope="col"><%= Spree.t('admin.webhooks_subscribers.time_of_last_event') %></th>
+  <th scope="col"></th>
+</tr>