solidus_admin 0.2.0 → 0.3.1

data/app/components/solidus_admin/orders/show/component.rb

@@ -29,6 +29,14 @@ class SolidusAdmin::Orders::Show::Component < SolidusAdmin::BaseComponent
     ], " ")
   end
 
+  def turbo_frames
+    %w[
+      edit_order_email_modal
+      edit_order_bill_address_modal
+      edit_order_ship_address_modal
+    ]
+  end
+
   def customer_name(user)
     (
       user.default_user_bill_address ||

data/app/components/solidus_admin/orders/show/email/component.html.erb

@@ -1,18 +1,23 @@
 <div class="<%= stimulus_id %>">
-  <%= render component("orders/show").new(order: @order) %>
-  <%= render component("ui/modal").new(title: t(".title"), close_path: close_path) do |modal| %>
-    <%= form_for @order, url: close_path, html: { id: form_id} do |f| %>
-      <%= render component("ui/forms/field").text_field(f, :email) %>
-      <label class="font-normal text-sm mt-4 block">
-        <%= t('.guest_checkout') %>:
-        <output class="font-semibold text-sm"><%= @order.user ? t('.no') : t('.yes') %></output>
-        <%= render component('ui/toggletip').new(text: t('.guest_checkout_tip'), class: "align-middle") %>
-      </label>
-    <% end %>
+  <%= turbo_frame_tag "edit_order_email_modal" do %>
+    <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+      <%= form_for @order, url: solidus_admin.order_path(@order), html: { id: form_id } do |f| %>
+        <%= render component("ui/forms/field").text_field(f, :email) %>
+        <label class="font-normal text-sm mt-4 block">
+          <%= t('.guest_checkout') %>:
+          <output class="font-semibold text-sm"><%= @order.user ? t('.no') : t('.yes') %></output>
+          <%= render component('ui/toggletip').new(text: t('.guest_checkout_tip'), class: "align-middle") %>
+        </label>
+      <% end %>
 
-    <% modal.with_actions do %>
-      <%= render component("ui/button").new(tag: :a, scheme: :secondary, href: close_path, type: :submit, text: t('.cancel')) %>
-      <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
     <% end %>
   <% end %>
+
+  <%= render component("orders/show").new(order: @order) %>
 </div>

data/app/components/solidus_admin/orders/show/email/component.rb

@@ -8,8 +8,4 @@ class SolidusAdmin::Orders::Show::Email::Component < SolidusAdmin::BaseComponent
   def form_id
     dom_id(@order, "#{stimulus_id}_email_form")
   end
-
-  def close_path
-    @close_path ||= solidus_admin.order_path(@order)
-  end
 end

data/app/components/solidus_admin/orders/show/summary/component.html.erb

@@ -6,7 +6,7 @@
         { label: t('.taxes'), value: number_to_currency(@order.additional_tax_total) },
         { label: t('.shipping'), value: number_to_currency(@order.shipment_total) },
         { label: link_to(t('.add_promo_code'), '#', class: "body-link"), value: number_to_currency(@order.promo_total) },
-        { label: link_to(t('.adjustments'), '#', class: "body-link"), value: number_to_currency(@order.adjustment_total) },
+        { label: link_to(t('.adjustments'), solidus_admin.order_adjustments_path(@order), class: "body-link"), value: number_to_currency(@order.adjustment_total) },
         { label: t('.total'), value: number_to_currency(@order.total), class: 'font-semibold' }
       ]
     ) %>

data/app/components/solidus_admin/payment_methods/index/component.rb

@@ -36,7 +36,7 @@ class SolidusAdmin::PaymentMethods::Index::Component < SolidusAdmin::UI::Pages::
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.payment_methods_path,
         method: :delete,
         icon: 'delete-bin-7-line',

data/app/components/solidus_admin/products/index/component.rb

@@ -29,22 +29,25 @@ class SolidusAdmin::Products::Index::Component < SolidusAdmin::UI::Pages::Index:
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.products_path,
         method: :delete,
         icon: 'delete-bin-7-line',
+        require_confirmation: true,
       },
       {
-        display_name: t('.batch_actions.discontinue'),
+        label: t('.batch_actions.discontinue'),
         action: solidus_admin.discontinue_products_path,
         method: :put,
         icon: 'pause-circle-line',
+        require_confirmation: true,
       },
       {
-        display_name: t('.batch_actions.activate'),
+        label: t('.batch_actions.activate'),
         action: solidus_admin.activate_products_path,
         method: :put,
         icon: 'play-circle-line',
+        require_confirmation: true,
       },
     ]
   end
@@ -63,9 +66,9 @@ class SolidusAdmin::Products::Index::Component < SolidusAdmin::UI::Pages::Index:
   def filters
     Spree::OptionType.all.map do |option_type|
       {
-        presentation: option_type.presentation,
+        label: option_type.presentation,
         combinator: 'or',
-        attribute: "variants_option_values",
+        attribute: "option_values_id",
         predicate: "in",
         options: option_type.option_values.pluck(:name, :id),
       }

data/app/components/solidus_admin/products/show/component.html.erb

@@ -100,9 +100,20 @@
 
       <%= page_with_sidebar_aside do %>
         <%= render component('ui/panel').new(title: "Publishing") do %>
-          <%= render component("ui/forms/field").text_field(f, :available_on, hint: t(".available_on_html"), type: :date) %>
-          <%= render component("ui/forms/field").text_field(f, :discontinue_on, hint: t(".discontinue_on_html"), type: :date) %>
-
+          <%= render component("ui/forms/field").text_field(
+            f,
+            :available_on,
+            hint: t(".available_on_html"),
+            type: :date,
+            value: f.object.available_on&.to_date
+          ) %>
+          <%= render component("ui/forms/field").text_field(
+            f,
+            :discontinue_on,
+            hint: t(".discontinue_on_html"),
+            type: :date,
+            value: f.object.discontinue_on&.to_date
+          ) %>
           <label class="flex gap-2 items-center">
             <%= render component("ui/forms/checkbox").new(
               name: "#{f.object_name}[promotionable]",

data/app/components/solidus_admin/products/status/component.rb

@@ -5,6 +5,7 @@ class SolidusAdmin::Products::Status::Component < SolidusAdmin::BaseComponent
     available: :green,
     discontinued: :yellow,
     deleted: :red,
+    unavailable: :yellow
   }.freeze
 
   def self.from_product(product)
@@ -13,8 +14,10 @@ class SolidusAdmin::Products::Status::Component < SolidusAdmin::BaseComponent
         :deleted
       elsif product.discontinued?
         :discontinued
-      else
+      elsif product.available?
         :available
+      else
+        :unavailable
       end
 
     new(status: status)

data/app/components/solidus_admin/products/status/component.yml

@@ -2,3 +2,4 @@ en:
   available: 'Available'
   discontinued: 'Discontinued'
   deleted: 'Deleted'
+  unavailable: 'Unavailable'

data/app/components/solidus_admin/properties/index/component.rb

@@ -29,7 +29,7 @@ class SolidusAdmin::Properties::Index::Component < SolidusAdmin::UI::Pages::Inde
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.properties_path,
         method: :delete,
         icon: 'delete-bin-7-line',

data/app/components/solidus_admin/refund_reasons/edit/component.html.erb

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag :edit_refund_reason_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @refund_reason, url: solidus_admin.refund_reason_path(@refund_reason), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <%= render component("ui/forms/field").text_field(f, :code, class: "required") %>
+        <label class="flex gap-2 items-center">
+          <%= hidden_field_tag "#{f.object_name}[active]", "0" %>
+          <%= render component("ui/forms/checkbox").new(
+            name: "#{f.object_name}[active]",
+            value: "1",
+            checked: f.object.active
+          ) %>
+          <span class="font-semibold text-xs ml-2"><%= Spree::RefundReason.human_attribute_name :active %></span>
+          <%= render component("ui/toggletip").new(text: t(".hints.active")) %>
+        </label>
+      </div>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= render component("refund_reasons/index").new(page: @page) %>

data/app/components/solidus_admin/refund_reasons/edit/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::RefundReasons::Edit::Component < SolidusAdmin::BaseComponent
+  def initialize(page:, refund_reason:)
+    @page = page
+    @refund_reason = refund_reason
+  end
+
+  def form_id
+    dom_id(@refund_reason, "#{stimulus_id}_edit_refund_reason_form")
+  end
+end

data/app/components/solidus_admin/refund_reasons/edit/component.yml

@@ -0,0 +1,8 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  title: "Edit Refund Reason"
+  cancel: "Cancel"
+  submit: "Update Refund Reason"
+  hints:
+    active: "When checked, this refund reason will be available for selection when adding refunds to orders."

data/app/components/solidus_admin/refund_reasons/index/component.rb

@@ -14,14 +14,21 @@ class SolidusAdmin::RefundReasons::Index::Component < SolidusAdmin::RefundsAndRe
   end
 
   def row_url(refund_reason)
-    spree.edit_admin_refund_reason_path(refund_reason)
+    spree.edit_admin_refund_reason_path(refund_reason, _turbo_frame: :edit_refund_reason_modal)
   end
 
-  def actions
+  def turbo_frames
+    %w[
+      new_refund_reason_modal
+      edit_refund_reason_modal
+    ]
+  end
+
+  def page_actions
     render component("ui/button").new(
       tag: :a,
       text: t('.add'),
-      href: spree.new_admin_refund_reason_path,
+      href: solidus_admin.new_refund_reason_path, data: { turbo_frame: :new_refund_reason_modal },
       icon: "add-line",
       class: "align-self-end w-full",
     )
@@ -30,7 +37,7 @@ class SolidusAdmin::RefundReasons::Index::Component < SolidusAdmin::RefundsAndRe
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.refund_reasons_path,
         method: :delete,
         icon: 'delete-bin-7-line',

data/app/components/solidus_admin/refund_reasons/new/component.html.erb

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag :new_refund_reason_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @refund_reason, url: solidus_admin.refund_reasons_path, html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <%= render component("ui/forms/field").text_field(f, :code, class: "required") %>
+        <label class="flex gap-2 items-center">
+          <%= render component("ui/forms/checkbox").new(
+              name: "#{f.object_name}[active]",
+              value: "1",
+              checked: f.object.active
+            ) %>
+            <span class="font-semibold text-xs ml-2"><%= Spree::RefundReason.human_attribute_name :active %></span>
+          <%= render component("ui/toggletip").new(text: t(".hints.active")) %>
+        </label>
+      </div>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render component("refund_reasons/index").new(page: @page) %>

data/app/components/solidus_admin/refund_reasons/new/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::RefundReasons::New::Component < SolidusAdmin::BaseComponent
+  def initialize(page:, refund_reason:)
+    @page = page
+    @refund_reason = refund_reason
+  end
+
+  def form_id
+    dom_id(@refund_reason, "#{stimulus_id}_new_refund_reason_form")
+  end
+end

data/app/components/solidus_admin/refund_reasons/new/component.yml

@@ -0,0 +1,6 @@
+en:
+  title: "New Refund Reason"
+  cancel: "Cancel"
+  submit: "Add Refund Reason"
+  hints:
+    active: "When checked, this refund reason will be available for selection when refunding orders."

data/app/components/solidus_admin/return_reasons/edit/component.html.erb

@@ -0,0 +1,26 @@
+<%= turbo_frame_tag :edit_return_reason_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @return_reason, url: solidus_admin.return_reason_path(@return_reason), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <label class="flex gap-2 items-center">
+          <%= hidden_field_tag "#{f.object_name}[active]", "0" %>
+          <%= render component("ui/forms/checkbox").new(
+            name: "#{f.object_name}[active]",
+            value: "1",
+            checked: f.object.active
+          ) %>
+          <span class="font-semibold text-xs ml-2"><%= Spree::ReturnReason.human_attribute_name :active %></span>
+          <%= render component("ui/toggletip").new(text: t(".hints.active")) %>
+        </label>
+      </div>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= render component("return_reasons/index").new(page: @page) %>

data/app/components/solidus_admin/return_reasons/edit/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::ReturnReasons::Edit::Component < SolidusAdmin::BaseComponent
+  def initialize(page:, return_reason:)
+    @page = page
+    @return_reason = return_reason
+  end
+
+  def form_id
+    dom_id(@return_reason, "#{stimulus_id}_edit_return_reason_form")
+  end
+end

data/app/components/solidus_admin/return_reasons/edit/component.yml

@@ -0,0 +1,8 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  title: "Edit Return Reason"
+  cancel: "Cancel"
+  submit: "Update Return Reason"
+  hints:
+    active: "When checked, this return reason will be available for selection when returning orders."

data/app/components/solidus_admin/return_reasons/index/component.rb

@@ -14,13 +14,31 @@ class SolidusAdmin::ReturnReasons::Index::Component < SolidusAdmin::RefundsAndRe
   end
 
   def row_url(return_reason)
-    spree.edit_admin_return_reason_path(return_reason)
+    spree.edit_admin_return_reason_path(return_reason, _turbo_frame: :edit_return_reason_modal)
+  end
+
+  def turbo_frames
+    %w[
+      new_return_reason_modal
+      edit_return_reason_modal
+    ]
+  end
+
+  def page_actions
+    render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: solidus_admin.new_return_reason_path,
+      data: { turbo_frame: :new_return_reason_modal },
+      icon: "add-line",
+      class: "align-self-end w-full",
+    )
   end
 
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.return_reasons_path,
         method: :delete,
         icon: 'delete-bin-7-line',

data/app/components/solidus_admin/return_reasons/new/component.html.erb

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag :new_return_reason_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @return_reason, url: solidus_admin.return_reasons_path, html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <label class="flex gap-2 items-center">
+          <%= hidden_field_tag "#{f.object_name}[active]", "0" %>
+          <%= render component("ui/forms/checkbox").new(
+            name: "#{f.object_name}[active]",
+            value: "1",
+            checked: f.object.active
+          ) %>
+          <span class="font-semibold text-xs ml-2"><%= Spree::ReturnReason.human_attribute_name :active %></span>
+          <%= render component("ui/toggletip").new(text: t(".hints.active")) %>
+        </label>
+      </div>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render component("return_reasons/index").new(page: @page) %>

data/app/components/solidus_admin/return_reasons/new/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::ReturnReasons::New::Component < SolidusAdmin::BaseComponent
+  def initialize(page:, return_reason:)
+    @page = page
+    @return_reason = return_reason
+  end
+
+  def form_id
+    dom_id(@return_reason, "#{stimulus_id}_new_return_reason_form")
+  end
+end

data/app/components/solidus_admin/return_reasons/new/component.yml

@@ -0,0 +1,8 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  title: "New Return Reason"
+  cancel: "Cancel"
+  submit: "Add Return Reason"
+  hints:
+    active: "When checked, this return reason will be available for selection when returning orders."

data/app/components/solidus_admin/roles/edit/component.html.erb

@@ -0,0 +1,33 @@
+<%= turbo_frame_tag :edit_role_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @role, url: solidus_admin.role_path(@role), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <%= render component("ui/forms/field").text_field(f, :description) %>
+      </div>
+
+      <% if permission_set_options.present? %>
+        <h3 class="text-l py-4 font-semibold text-gray-900">
+          <%= t(".choose_permissions") %>
+        </h3>
+      <% end %>
+
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:order], row_title: t('.orders'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:product], row_title: t('.products'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:stock], row_title: t('.stock'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:user], row_title: t('.customers'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:restricted_stock], row_title: t('.restricted_stock'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:configuration], row_title: t('.settings'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:other], row_title: t('.other'), form: f, method: :permission_set_ids, layout: :subsection) %>
+
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render component("roles/index").new(page: @page) %>

data/app/components/solidus_admin/roles/edit/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Roles::Edit::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::PermissionSetsHelper
+
+  def initialize(page:, role:)
+    @page = page
+    @role = role
+  end
+
+  def form_id
+    dom_id(@role, "#{stimulus_id}_edit_role_form")
+  end
+
+  private
+
+  def permission_set_options
+    @permission_set_options ||= organize_permissions(permission_sets: Spree::PermissionSet.all, view_label: t(".view"), edit_label: t(".edit"))
+  end
+end

data/app/components/solidus_admin/roles/edit/component.yml

@@ -0,0 +1,19 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  title: "Edit Role"
+  cancel: "Cancel"
+  submit: "Update Role"
+  edit: "Edit"
+  view: "View"
+  name_placeholder: "Enter a clear role name"
+  description_placeholder: "Enter a brief description"
+  choose_permissions: "Choose permissions"
+  orders: "Orders"
+  products: "Products"
+  stock: "Stock"
+  restricted_stock: "Restricted Stock"
+  customers: "Customers"
+  promotions: "Promotions"
+  settings: "Settings"
+  other: "Other permissions"

data/app/components/solidus_admin/roles/index/component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Roles::Index::Component < SolidusAdmin::UsersAndRoles::Component
+  def model_class
+    Spree::Role
+  end
+
+  def search_key
+    :name_cont
+  end
+
+  def search_url
+    solidus_admin.roles_path
+  end
+
+  def row_url(role)
+    solidus_admin.edit_role_path(role, _turbo_frame: :edit_role_modal)
+  end
+
+  def page_actions
+    render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: solidus_admin.new_role_path, data: { turbo_frame: :new_role_modal },
+      icon: "add-line",
+    )
+  end
+
+  def turbo_frames
+    %w[
+      new_role_modal
+      edit_role_modal
+    ]
+  end
+
+  def batch_actions
+    [
+      {
+        label: t('.batch_actions.delete'),
+        action: solidus_admin.roles_path,
+        method: :delete,
+        icon: 'delete-bin-7-line',
+      },
+    ]
+  end
+
+  def scopes
+    [
+      { name: :all, label: t('.scopes.all'), default: true },
+      { name: :admin, label: t('.scopes.admin') },
+    ]
+  end
+
+  def filters
+    []
+  end
+
+  def columns
+    [
+      {
+        header: :role,
+        data: :name,
+      },
+      {
+        header: :description,
+        data: :description,
+      }
+    ]
+  end
+end

data/app/components/solidus_admin/roles/index/component.yml

@@ -0,0 +1,6 @@
+en:
+  batch_actions:
+    delete: "Delete"
+  scopes:
+    admin: "Admin"
+    all: "All"

data/app/components/solidus_admin/roles/new/component.html.erb

@@ -0,0 +1,33 @@
+<%= turbo_frame_tag :new_role_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @role, url: solidus_admin.roles_path, html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required", placeholder: t(".name_placeholder")) %>
+        <%= render component("ui/forms/field").text_field(f, :description, placeholder: t(".description_placeholder")) %>
+      </div>
+
+      <% if permission_set_options.present? %>
+        <h3 class="text-l py-4 font-semibold text-gray-900">
+          <%= t(".choose_permissions") %>
+        </h3>
+      <% end %>
+
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:order], row_title: t('.orders'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:product], row_title: t('.products'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:stock], row_title: t('.stock'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:user], row_title: t('.customers'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:restricted_stock], row_title: t('.restricted_stock'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:configuration], row_title: t('.settings'), form: f, method: :permission_set_ids) %>
+      <%= render component("ui/checkbox_row").new(options: permission_set_options[:other], row_title: t('.other'), form: f, method: :permission_set_ids, layout: :subsection) %>
+
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render component("roles/index").new(page: @page) %>