spree_admin 5.1.8 → 5.2.0.rc2

data/app/views/spree/admin/imports/_loader.html.erb

@@ -0,0 +1,14 @@
+<% if import.completed? %>
+  <div class="d-flex justify-content-center align-items-center my-5 flex-column pb-5">
+    <%= icon('check', class: 'text-success', style: 'font-size: 4rem;') %>
+    <p class="text-success"><%= Spree.t('admin.imports.import_done') %>!</p>
+    <%= link_to_with_icon 'arrow-back-up', Spree.t('admin.back_to_dashboard'), spree.admin_path, class: 'btn btn-light mb-5' %>
+  </div>
+<% else %>
+  <div class="d-flex justify-content-center align-items-center my-5 flex-column" style="height: 200px;">
+    <div class="spinner-border mb-3 text-muted" role="status" style="width: 4rem; height: 4rem;">
+      <span class="sr-only"><%= Spree.t(:processing) %>...</span>
+    </div>
+    <p class="text-muted"><%= Spree.t(:processing) %>...</p>
+  </div>
+<% end %>

data/app/views/spree/admin/imports/_mapping.html.erb

@@ -0,0 +1,12 @@
+<div class="d-flex justify-content-between align-items-center border-bottom hover-light" id="<%= spree_dom_id(mapping) %>">
+  <div class="text-center w-10">
+    <%= render 'spree/admin/imports/mapping_icon', mapping: mapping %>
+  </div>
+  <div class="text-wrap w-40 px-2 py-3">
+    <%= mapping.schema_field_label %>
+    <code class="ml-2"><%= mapping.schema_field %></code>
+  </div>
+  <div class="w-50 px-2 py-3">
+    <%= render 'spree/admin/imports/mapping_form', import: @import, mapping: mapping, options: options %>
+  </div>
+</div>

data/app/views/spree/admin/imports/_mapping_footer.html.erb

@@ -0,0 +1,20 @@
+<footer id="footer">
+  <div class="flex-grow-1 d-flex flex-column">
+    <% if import.mapping_done? %>
+      <p>
+        <%= icon('check', class: 'text-success') %>
+        <%= Spree.t('admin.imports.all_required_columns_mapped') %>
+      </p>
+    <% else %>
+      <p>
+        <%= Spree.t('admin.imports.please_map_all_required_fields') %>
+      </p>
+    <% end %>
+    <%= progress_bar_component(import.mapped_fields.count, min: 0, max: import.required_fields.count) %>
+  </div>
+
+  <span <% unless import.mapping_done? %>data-controller="tooltip"<% end %>>
+    <%= button_to Spree.t('actions.continue'), spree.complete_mapping_admin_import_path(import), method: :put, class: 'btn btn-primary btn-lg', disabled: !import.mapping_done? %>
+    <%= tooltip(Spree.t('admin.imports.please_map_all_required_fields')) unless import.mapping_done? %>
+  </span>
+</footer>

data/app/views/spree/admin/imports/_mapping_form.html.erb

@@ -0,0 +1,11 @@
+<% options ||= import.unmapped_file_columns.map { |file_column| [file_column, file_column] } %>
+
+<%= turbo_frame_tag spree_dom_id(mapping) + '_form' do %>
+  <%= form_for mapping, url: spree.admin_import_mapping_path(import, mapping), method: :put, data: { controller: 'auto-submit' } do |f| %>
+    <% select_options = options.dup %>
+    <% if mapping.file_column.present? %>
+      <% select_options.prepend([mapping.file_column, mapping.file_column]) %>
+    <% end %>
+    <%= f.select :file_column, options_for_select(select_options, mapping.file_column), { include_blank: 'Please select a column' }, { data: { action: 'auto-submit#submit', controller: 'autocomplete-select' }, id: "import_mapping_file_column_#{mapping.id}" } %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/imports/_mapping_icon.html.erb

@@ -0,0 +1,6 @@
+<% if mapping.required? %>
+  <div id="<%= spree_dom_id(mapping) %>-icon" data-controller="tooltip">
+    <%= icon('checklist', class: mapping.mapped? ? 'text-success' : 'text-muted') %>
+    <%= tooltip(Spree.t('admin.imports.mapping_required')) %>
+  </div>
+<% end %>

data/app/views/spree/admin/imports/_row.html.erb

@@ -0,0 +1,35 @@
+<div class="import_row d-flex justify-content-between align-items-center border-bottom hover-light" id="<%= dom_id(row) %>">
+  <div class="text-center w-10">
+    <%= row.row_number %>
+  </div>
+  <div class="text-wrap w-20 px-2 py-3">
+    <% badge_class = case row.status
+       when 'completed'
+         'success'
+       when 'failed'
+         'danger'
+       else
+         'light'
+       end %>
+    <span class="badge badge-pill badge-<%= badge_class %>">
+      <%= Spree.t(row.status) %>
+    </span>
+  </div>
+  <div class="w-60 px-2 py-3">
+    <% if row.status == 'failed' %>
+      <div class="text-danger"><%= row.validation_errors %></div>
+    <% elsif row.status == 'completed' && row.item.present? %>
+      <%= render "spree/admin/import_rows/#{row.item_type.demodulize.underscore}", item: row.item %>
+    <% else %>
+      <div class="d-flex align-items-center gap-2">
+        <div class="spinner-border text-muted" role="status">
+          <span class="sr-only"><%= Spree.t(:processing) %>...</span>
+        </div>
+        <%= Spree.t(:processing) %>...
+      </div>
+    <% end %>
+  </div>
+  <div class="w-10 px-2 py-3">
+    <%= link_to_with_icon 'eye', Spree.t(:details), spree.admin_import_row_path(import, row), class: 'btn btn-sm btn-light', data: { action: 'drawer#open', turbo_frame: :drawer }, no_text: true %>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+<%= turbo_frame_tag :drawer do %>
+  <%= drawer_header(Spree.t(:import) + ' ' + Spree.t(@import.type.demodulize.pluralize.downcase)) %>
+  <%= form_for @import, url: spree.admin_imports_path, data: { controller: 'import-form' } do |f| %>
+    <div class="drawer-body">
+      <%= f.hidden_field :type %>
+
+      <div data-controller="active-storage-upload"
+        data-active-storage-upload-auto-submit-value="false"
+        data-active-storage-upload-field-name-value="<%= f.object_name %>[attachment]"
+        data-active-storage-upload-allowed-file-types-value="<%= ["text/csv"].to_json %>"
+        data-active-storage-upload-height-value="200"
+        data-active-storage-upload-inline-value="true"
+        data-active-storage-upload-hide-cancel-button-value="true"
+        data-active-storage-upload-disable-thumbnail-generator-value="true"
+        class="d-flex flex-column justify-content-center w-100 position-relative mb-4">
+      </div>
+
+      <%= f.spree_select :preferred_delimiter, options_for_select([',', ';', '|', '\t'], @import.preferred_delimiter) %>
+    </div>
+
+    <div class="drawer-footer">
+      <%= turbo_save_button_tag Spree.t('actions.create'), data: { import_form_target: 'button' }, disabled: true %>
+      <%= drawer_discard_button %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,57 @@
+<% content_for :head do %>
+  <%= turbo_page_requires_reload_tag %>
+<% end %>
+
+<% content_for :steps do %>
+  <li class="border-right flex-grow-1 h-100 d-flex align-items-center justify-content-center <% if @import.mapping? %>active bg-white font-weight-bold<% end %>">1. Map fields</li>
+  <li class="border-right flex-grow-1 h-100 d-flex align-items-center justify-content-center <% if @import.processing? %>active bg-white font-weight-bold<% end %>">2. Process rows</li>
+  <li class="flex-grow-1 h-100 d-flex align-items-center justify-content-center <% if @import.complete? %>active bg-white font-weight-bold<% end %>">3. Complete</li>
+<% end %>
+
+<% if @import.status == 'mapping' %>
+  <div class="d-flex justify-content-between align-items-center bg-light border-top border-bottom text-muted mt-3 sticky-top">
+    <div class="w-10 p-2 text-center">
+      <%= Spree.t('admin.imports.field_required') %>
+    </div>
+    <div class="w-40 p-2">
+      <%= I18n.t('activerecord.attributes.spree/import_mapping.file_column') %>
+    </div>
+    <div class="w-50 p-2">
+      <%= I18n.t('activerecord.attributes.spree/import_mapping.schema_field') %>
+    </div>
+  </div>
+  <div id="mappings" class="mb-5">
+    <%= render collection: @mappings, partial: 'spree/admin/imports/mapping', locals: { options: @mappings_options } %>
+  </div>
+
+  <%= render 'spree/admin/imports/mapping_footer', import: @import %>
+<% else %>
+  <%= turbo_stream_from "import_#{@import.id}_rows" %>
+  <%= turbo_stream_from "import_#{@import.id}_footer" %>
+  <%= turbo_stream_from "import_#{@import.id}_loader" %>
+
+  <div class="d-flex justify-content-between align-items-center bg-light border-top border-bottom text-muted mt-3 sticky-top">
+    <div class="w-10 p-2 text-center">
+      <%= I18n.t('activerecord.attributes.spree/import_row.row_number') %>
+    </div>
+    <div class="w-20 p-2">
+      <%= Spree.t(:status) %>
+    </div>
+    <div class="w-60 p-2">
+      <%= Spree.t(:item) %>
+    </div>
+    <div class="w-10 p-2">
+      <%= Spree.t(:details) %>
+    </div>
+  </div>
+
+  <div id="rows" data-controller="auto-scroll">
+    <%= render collection: @rows, partial: 'spree/admin/imports/row', cached: spree_base_cache_scope, locals: { import: @import } %>
+  </div>
+
+  <div id="loader" data-controller="auto-scroll">
+    <%= render 'spree/admin/imports/loader', import: @import %>
+  </div>
+
+  <%= render 'spree/admin/imports/footer', import: @import %>
+<% end %>

data/app/views/spree/admin/invitations/_invitation.html.erb

@@ -21,32 +21,32 @@
       <span class="badge badge-warning"><%= Spree.t(:expired) %></span>
     <% else %>
       <span class="badge badge-light"><%= Spree.t(:pending) %></span>
-      <p class="text-muted font-size-sm mb-0 mt-2 pl-1">Expires at: <%= local_time(invitation.expires_at) %></p>
+      <p class="text-muted font-size-sm mb-0 mt-2 pl-1">Expires at: <%= spree_time(invitation.expires_at) %></p>
     <% end %>
   </td>
   <td class="w-10">
-    <%= local_time(invitation.created_at) %>
+    <%= spree_time(invitation.created_at) %>
   </td>
   <td class="w-10 actions">
     <% if invitation.pending? && !invitation.expired? %>
-      <div class="dropdown" data-controller="clipboard">
-        <%= hidden_field_tag nil, spree.admin_invitation_url(invitation, token: invitation.token),  data: { clipboard_target: "source" } %>
-
-        <button class="btn btn-sm btn-light" type="button" id="dropdownMenuButton-<%= invitation.id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <%= dropdown do %>
+        <%= dropdown_toggle class: 'btn-light btn-sm' do %>
           <%= icon('dots-vertical', class: 'mr-0') %>
-        </button>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton-<%= invitation.id %>">
+        <% end %>
+        <%= dropdown_menu data: { controller: 'clipboard', 'clipboard-success-content-value': icon('check') + ' ' +Spree.t(:copied) } do %>
+          <%= hidden_field_tag nil, spree.admin_invitation_url(invitation, token: invitation.token),  data: { clipboard_target: "source" } %>
+
           <%= link_to_with_icon 'copy', Spree.t(:copy_link), '#', 
               class: "dropdown-item", 
-              data: { action: "clipboard#copy" } %>
+              data: { action: "clipboard#copy", clipboard_target: "button" } %>
           <%= link_to_with_icon 'send', Spree.t('actions.resend'), spree.resend_admin_invitation_path(invitation), 
               class: "dropdown-item", 
               data: { turbo_method: :put, turbo_confirm: Spree.t(:are_you_sure) } %>
-          <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_invitation_path(invitation), 
-              class: "dropdown-item btn-danger", 
+          <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_invitation_path(invitation),
+              class: "dropdown-item btn-danger",
               data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure) } if can?(:destroy, invitation) %>
-        </div>
-      </div>
+        <% end %>
+      <% end %>
     <% end %>
   </td>
 </tr>

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

@@ -1,4 +1,4 @@
 <%= turbo_render_alerts %>
-<%= turbo_close_modal %>
+<%= turbo_close_dialog %>
 
 <%= turbo_stream.prepend 'invitations', partial: 'spree/admin/invitations/invitation', locals: { invitation: @invitation } %>

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

@@ -7,21 +7,19 @@
 <%= render_admin_partials(:invitations_header_partials) %>
 
 <div class="card-lg">
-  <div class="table-responsive">
-    <table class="table">
-      <thead>
-      <tr>
-        <th class="rounded-lg-top-left"><%= Spree.t(:email) %></th>
-        <th><%= I18n.t('activerecord.attributes.spree/invitation.inviter') %></th>
-        <th><%= Spree.t(:role_id) %></th>
-        <th><%= Spree.t(:status) %></th>
-        <th class="rounded-lg-top-right"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
-        <th></th>
-      </tr>
-      </thead>
-      <tbody id="invitations">
-        <%= render collection: @collection, partial: 'spree/admin/invitations/invitation', as: :invitation %>
-      </tbody>
-    </table>
-  </div>
+  <table class="table">
+    <thead>
+    <tr>
+      <th scope="col" class="rounded-lg-top-left"><%= Spree.t(:email) %></th>
+      <th scope="col"><%= I18n.t('activerecord.attributes.spree/invitation.inviter') %></th>
+      <th scope="col"><%= Spree.t(:role_id) %></th>
+      <th scope="col"><%= Spree.t(:status) %></th>
+      <th scope="col" class="rounded-lg-top-right"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
+      <th scope="col"></th>
+    </tr>
+    </thead>
+    <tbody id="invitations">
+      <%= render collection: @collection, partial: 'spree/admin/invitations/invitation', as: :invitation %>
+    </tbody>
+  </table>
 </div>

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

@@ -1,32 +1,21 @@
-<%= turbo_frame_tag :dialog_modal do %>
+<%= turbo_frame_tag :dialog do %>
   <%= form_for @invitation,
     url: spree.admin_invitations_path,
     data: { controller: "enable-button" } do |f| %>
-    <div class="modal-content">
-      <%= modal_header Spree.t('actions.send_invitation') %>
-      <div class="modal-body">
-        <%= render 'spree/admin/shared/error_messages', target: @invitation %>
-        <div class="form-group">
-          <%= f.label :email, Spree.t(:email) %>
-          <%= f.email_field :email, class: 'form-control', required: :required, data: { 'enable-button-target': 'input' }, placeholder: 'eg. steve@apple.com', autofocus: true %>
-        </div>
-        <% if @roles.any? %>
-          <div class="form-group">
-            <%= f.label :role, Spree.t(:role_id) %>
-            <%= f.select :role_id, @roles.map { |role| [role.name, role.id] }, {}, { data: { controller: 'autocomplete-select', 'enable-button-target': 'input' }, required: true } %>
-          </div>
-        <% end %>
-        <div class="form-group">
-          <%= f.label :expires_at %>
-          <%= f.date_field :expires_at, class: 'form-control', required: true, data: { 'enable-button-target': 'input' } %>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <%= turbo_save_button_tag nil, class: 'btn btn-primary', data: { 'enable-button-target': 'button' } do %>
-          <%= icon 'send' %>
-          <%= Spree.t('actions.send_invitation') %>
-        <% end %>
-      </div>
+    <%= dialog_header Spree.t('actions.send_invitation') %>
+    <div class="dialog-body">
+      <%= render 'spree/admin/shared/error_messages', target: @invitation %>
+      <%= f.spree_email_field :email, required: true, data: { 'enable-button-target': 'input' }, placeholder: 'eg. steve@apple.com', autofocus: true %>
+      <% if @roles.any? %>
+        <%= f.spree_select :role_id, @roles.map { |role| [role.name, role.id] }, { label: Spree.t(:role_id), autocomplete: true, required: true }, { data: { 'enable-button-target': 'input' } } %>
+      <% end %>
+      <%= f.spree_date_field :expires_at, required: true, data: { 'enable-button-target': 'input' } %>
+    </div>
+    <div class="dialog-footer">
+      <%= turbo_save_button_tag nil, class: 'btn btn-primary', data: { 'enable-button-target': 'button' } do %>
+        <%= icon 'send' %>
+        <%= Spree.t('actions.send_invitation') %>
+      <% end %>
     </div>
   <% end %>
 <% end %>

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

@@ -0,0 +1,37 @@
+<%= turbo_frame_tag :drawer do %>
+  <%= drawer_header(Spree.t('admin.show_json')) %>
+  <div class="drawer-body" data-controller="highlight tabs">
+    <ul class="nav nav-pills mb-3">
+      <li class="nav-item">
+        <a class="nav-link active" data-tabs-target="tab" data-action="click->tabs#select"><%= Spree.t('apis.storefront') %></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-tabs-target="tab" data-action="click->tabs#select"><%= Spree.t('apis.platform') %></a>
+      </li>
+    </ul>
+    <div data-tabs-target="panel" class="animate__animated">
+      <% if storefront_serializer_exists?(@object) %>
+        <pre class="m-0"><code data-highlight-target="code" class="language-json d-block overflow-auto" style="height: calc(100dvh - 11rem);"><%= serialize_to_json(@object, api_type: :storefront) %></code></pre>
+      <% else %>
+        <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center flex-column">
+          <%= icon 'map-search', class: 'mb-3 opacity-50', style: 'font-size: 2rem;' %>
+          <p>
+            <%= Spree.t('admin.json_preview.no_api_response') %>
+          </p>
+        </div>
+      <% end %>
+    </div>
+    <div data-tabs-target="panel" class="animate__animated" hidden>
+      <% if platform_serializer_exists?(@object) %>
+        <pre class="m-0"><code data-highlight-target="code" class="language-json d-block overflow-auto" style="height: calc(100dvh - 11rem);"><%= serialize_to_json(@object, api_type: :platform) %></code></pre>
+      <% else %>
+        <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center flex-column">
+          <%= icon 'map-search', class: 'mb-3 opacity-50', style: 'font-size: 2rem;' %>
+          <p>
+            <%= Spree.t('admin.json_preview.no_api_response') %>
+          </p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -1,7 +1,7 @@
-<%= turbo_frame_tag :dialog_modal do %>
-  <div class="modal-content" data-controller="search-picker">
-    <%= modal_header(Spree.t(:add_variant)) %>
-    <div class="modal-body border-bottom">
+<%= turbo_frame_tag :dialog do %>
+  <div data-controller="search-picker">
+    <%= dialog_header(Spree.t(:add_variant)) %>
+    <div class="dialog-body">
       <%= form_with url: spree.admin_variants_search_path, method: :post, data: { controller: 'auto-submit', turbo_frame: '_top' } do |form| %>
         <%= form.hidden_field :omit_ids, value: @order.variant_ids.join(',') %>
         <%= form.hidden_field :param_name, value: 'line_item' %>
@@ -10,14 +10,14 @@
       <% end %>
     </div>
     <%= form_with model: @line_item, url: spree.admin_order_line_items_path(@order), data: {turbo_frame: '_top'} do |form| %>
-      <div class="modal-body p-0">
+      <div class="dialog-body">
         <div id="variants_search_results" class="search-results">
           <p class="text-muted text-center py-5">
             <%= Spree.t(:start_typing_to_search_for_variants) %>
           </p>
         </div>
       </div>
-      <div class="modal-footer">
+      <div class="dialog-footer">
         <div class="d-flex gap-2 m-0 align-items-center mr-auto">
           <%= form.label :quantity, Spree.t(:quantity), class: "mb-0" %>
           <%= form.number_field :quantity, class: "form-control", min: 1 %>

data/app/views/spree/admin/metafield_definitions/_filters.html.erb

@@ -0,0 +1,18 @@
+<%= search_form_for [:admin, search_collection], class: "filter-wrap", data: {controller: "filters auto-submit"} do |f| %>
+  <div class="d-flex">
+    <%= render 'spree/admin/shared/filters_search_bar', param: :multi_search, label: Spree.t(:title) %>
+
+    <%= select_tag 'q[resource_type_eq]',
+          options_for_select(metafield_definition_resource_types, params.dig(:q, :resource_type_eq)),
+          { 
+            include_blank: Spree.t(:all),
+            class: 'custom-select w-20',
+            data: { 
+              filters_target: :input,
+              action: 'auto-submit#submit'
+            }
+          } %>
+  </div>
+  <%= render "spree/admin/shared/filter_badge_template" %>
+  <div data-filters-target="badgesContainer" class="filter-badges-container"></div>
+<% end %>

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

@@ -0,0 +1,44 @@
+<div class="card mb-4">
+  <div class="card-body">
+    <div class="form-group">
+      <%= f.spree_text_field :name, required: true, autofocus: f.object.new_record? %>
+    </div>
+
+    <div class="row">
+      <div class="form-group col-lg-4">
+        <%= f.spree_text_field :namespace, required: true, placeholder: 'eg. custom' %>
+      </div>
+      <div class="form-group col-lg-8">
+        <%= f.spree_text_field :key, required: true, placeholder: 'eg. id' %>
+      </div>
+    </div>
+
+    <% if f.object.new_record? || f.object.metafields.empty? %>
+      <div class="form-group">
+        <%= f.spree_select :resource_type, metafield_definition_resource_types, { include_blank: true, autocomplete: true, label: Spree.t(:resource) }, { required: true } %>
+      </div>
+
+      <div class="form-group">
+        <%= f.spree_select :metafield_type, metafield_definition_types, { include_blank: true, autocomplete: true, label: Spree.t(:type) }, { required: true } %>
+      </div>
+    <% else %>
+      <div class="alert alert-warning">
+        <%= Spree.t('admin.metafield_definitions.edit_warning') %>
+      </div>
+
+      <div class="form-group">
+        <%= f.label :resource_type, Spree.t(:resource) %>
+        <p class="font-weight-bold"><%= f.object.resource_type.demodulize.titleize %></p>
+      </div>
+
+      <div class="form-group">
+        <%= f.label :metafield_type, Spree.t(:type) %>
+        <p class="font-weight-bold"><%= f.object.metafield_type.demodulize.titleize %></p>
+      </div>
+    <% end %>
+
+    <div class="form-group">
+      <%= f.spree_select :display_on, display_on_options(Spree::MetafieldDefinition), { include_blank: true, autocomplete: true }, { required: true } %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+<thead>
+  <tr>
+    <th><%= Spree.t(:key) %></th>
+    <th><%= Spree.t(:name) %></th>
+    <th><%= Spree.t(:resource) %></th>
+    <th><%= Spree.t(:type) %></th>
+    <th><%= Spree.t(:display_on) %></th>
+    <th><%= Spree.t('admin.metafield_definitions.used_in') %></th>
+    <th></th>
+  </tr>
+</thead>

data/app/views/spree/admin/metafield_definitions/_table_row.html.erb

@@ -0,0 +1,22 @@
+<tr id="<%= spree_dom_id(metafield_definition) %>">
+  <td><code><%= metafield_definition.full_key %></code></td>
+  <td><%= metafield_definition.name %></td>
+  <td><%= metafield_definition.resource_type.demodulize.titleize %></td>
+  <td><span class="badge badge-light"><%= metafield_definition.metafield_type.demodulize.titleize %></span></td>
+  <td>
+    <%= form_with model: metafield_definition, url: admin_metafield_definition_path(metafield_definition), method: :patch, data: { controller: 'auto-submit' } do |f| %>
+      <%= f.select :display_on, display_on_options(Spree::MetafieldDefinition), {}, { class: 'custom-select custom-select-sm w-auto', data: { action: 'auto-submit#submit' } } %>
+    <% end %>
+  </td>
+  <td>
+    <% if metafield_definition.metafields.count.positive? %>
+      <%= metafield_definition.metafields.count %>
+      <%= Spree.t(metafield_definition.resource_type.demodulize.pluralize.to_sym) %>
+    <% else %>
+      <span class="text-muted"><%= Spree.t(:not_available) %></span>
+    <% end %>
+  </td>
+  <td class="text-right">
+    <%= link_to_edit(metafield_definition, data: { turbo_frame: '_top' }) %>
+  </td>
+</tr>

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

@@ -0,0 +1 @@
+<%= render 'spree/admin/shared/edit_resource' %>

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

@@ -0,0 +1,9 @@
+<%= content_for :page_title do %>
+  <%= Spree.t(:metafield_definitions) %>
+<% end %>
+
+<%= content_for :page_actions do %>
+  <%= link_to_with_icon 'plus', Spree.t(:new_metafield_definition), new_object_url, class: 'btn btn-primary' %>
+<% end %>
+
+<%= render 'spree/admin/shared/index_table' %>

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

@@ -0,0 +1 @@
+<%= render 'spree/admin/shared/new_resource' %>

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

@@ -0,0 +1 @@
+<%= turbo_render_alerts %>

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

@@ -0,0 +1,43 @@
+<%= turbo_frame_tag :drawer do %>
+  <%= drawer_header(Spree.t(:metafields)) %>
+  <% if @metafields.present? %>
+    <%= form_for @object, url: spree.admin_metafield_path(@object.id, resource_type: model_class.to_s), method: :put do |f| %>
+      <div class="drawer-body">
+        <%= f.fields_for :metafields, @metafields do |metafield_form| %>
+          <%= metafield_form.hidden_field :id %>
+          <%= metafield_form.hidden_field :metafield_definition_id %>
+          <%= metafield_form.hidden_field :type %>
+          <% metafield_definition = metafield_form.object.metafield_definition %>
+          <div class="form-group">
+            <div class="d-flex justify-content-between">
+              <%= metafield_form.label :value do %>
+                <strong><%= metafield_definition.name %></strong>
+                <small class="text-muted mt-2"><code><%= metafield_definition.full_key %></code></small>
+              <% end %>
+
+              <% if metafield_definition.display_on == 'back_end' %>
+                <span data-controller="tooltip">
+                  <%= icon('eye-off', class: 'text-muted') %>
+                  <%= tooltip(Spree.t("admin.display_on_options.#{metafield_definition.display_on}")) %>
+                </span>
+              <% end %>
+            </div>
+            <%= render "spree/admin/metafields/types/#{metafield_form.object.type.demodulize.underscore}", f: metafield_form %>
+          </div>
+        <% end %>
+      </div>
+      <div class="drawer-footer">
+        <%= turbo_save_button_tag %>
+        <%= drawer_discard_button %>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="drawer-body">
+      <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center flex-column">
+        <%= icon 'map-search', class: 'mb-3', style: 'font-size: 2rem;' %>
+        <p>No metafield definitions configured for <%= model_class.name.demodulize.titleize.pluralize %>.</p>
+        <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_metafield_definition_path(resource_type: model_class.to_s), class: 'btn btn-primary ml-3', data: { 'turbo-frame': '_top' } if can?(:create, Spree::MetafieldDefinition) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/metafields/types/_boolean.html.erb

@@ -0,0 +1,4 @@
+<div class="custom-control custom-checkbox">
+  <%= f.check_box :value, class: 'custom-control-input', checked: f.object.value&.to_b %>
+  <%= f.label :value, Spree.t(:say_yes), class: 'custom-control-label' %>
+</div>

data/app/views/spree/admin/metafields/types/_json.html.erb

@@ -0,0 +1,4 @@
+<div data-controller="codemirror" data-codemirror-language-value="json" class="form-control h-auto overflow-hidden p-0">
+  <div data-codemirror-target="editor"></div>
+  <%= f.text_area :value, data: { codemirror_target: 'input' }, class: 'invisible' %>
+</div>

data/app/views/spree/admin/metafields/types/_long_text.html.erb

@@ -0,0 +1 @@
+ <%= f.text_area :value, class: 'form-control', data: { controller: 'textarea-autogrow' } %>

data/app/views/spree/admin/metafields/types/_number.html.erb

@@ -0,0 +1 @@
+<%= f.number_field :value, class: 'form-control' %>

data/app/views/spree/admin/metafields/types/_rich_text.html.erb

@@ -0,0 +1,3 @@
+<div class="trix-container">
+  <%= f.rich_text_area :value %>
+</div>

data/app/views/spree/admin/metafields/types/_short_text.html.erb

@@ -0,0 +1 @@
+<%= f.text_field :value, class: 'form-control' %>

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

@@ -0,0 +1 @@
+<%= turbo_render_alerts :drawer_alerts %>