solidusio · chaimann · Jun 24, 2025 · Jun 24, 2025 · Jun 24, 2025 · Jun 24, 2025
@@ -0,0 +1,12 @@
+<%= render component("ui/modal").new(
+  title: t(".title"),
+  open: false,
+  id: "confirm"
+) do |modal| %>
+  <% modal.with_actions do %>
+    <form method="dialog">
+      <%= render component("ui/button").new(scheme: :secondary, text: t(".cancel"), class: "confirm-cancel") %>
+    </form>
+    <%= render component("ui/button").new(text: t(".confirm"), id: "confirm-accept", scheme: :danger) %>
+  <% end %>
+<% end %>
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Component wrapper for confirmation dialog to use with rolemodel/turbo-confirm.
+#
+# The modal is rendered in the layout initially hidden.
+# To have it open to confirm user's action, place the "data-turbo-confirm" on the submitter (or any other element that
+# supports "data-turbo-confirm" attribute: form, link with "data-turbo-method") with the text you want to have in the
+# modal title:
+#   <form>
+#     <button type=submit data-turbo-confirm="Are you sure?">Submit</button>
+#   </form>
+#
+#   <form data-turbo-confirm="Confirm saving">
+#   </form>
+#
+# You can add more details in the body of the modal using "data-confirm-details" attribute:
+#   <button data-turbo-confirm="Are you sure?" data-confirm-details="This cannot be undone.">Submit</button>
+#
+# To customize "Confirm" button text use "data-confirm-button" attribute:
+#   <button data-turbo-confirm="This action is not reversible" data-confirm-button="Proceed">Submit</button>
+#
+# For more details see https://github.com/RoleModel/turbo-confirm.
+
+class SolidusAdmin::Layout::Confirm::Component < SolidusAdmin::BaseComponent
+end
@@ -0,0 +1,4 @@
+en:
+  cancel: "Cancel"
+  confirm: "Confirm"
+  title: "Are you sure?"
@@ -62,8 +62,7 @@
                       size: :s,
                       title: t("spree.delete"),
                       icon: 'close-line',
-                      "data-controller": "confirm",
-                      "data-confirm-text-value": t("spree.are_you_sure"),
+                      "data-turbo-confirm": t("spree.are_you_sure")
                     ) %>
                   <% end %>
                 </td>

@@ -143,8 +143,7 @@
           tag: :button,
           text: t(".delete"),
           scheme: :danger,
-          "data-action": "click->#{stimulus_id}#confirmDelete",
-          "data-#{stimulus_id}-message-param": t(".delete_confirmation"),
+          "data-turbo-confirm": t(".delete_confirmation")
         ) %>
       <% end %>
     <% end %>

@@ -11,7 +11,7 @@
     <div class="min-w-[40rem] max-h-screen pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">
 
       <header class="flex items-center justify-between p-4 sticky top-0 bg-inherit">
-        <h3 class="text-xl font-semibold text-gray-900">
+        <h3 class="text-xl font-semibold text-gray-900 modal-title">
           <%= @title %>
         </h3>
         <form method="dialog">
@@ -23,9 +23,7 @@
         </form>
       </header>
 
-      <div class="p-4">
-        <%= content %>
-      </div>
+      <div class="p-4 empty:hidden modal-body"><%= content %></div>
 
       <% if actions? %>
         <footer class="p-4 flex gap-2 justify-end sticky bottom-0 bg-inherit">

@@ -1,7 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static values = {
+    openOnConnect: { type: Boolean, default: true }
+  };
+
   connect() {
-    this.element.showModal()
+    if (this.openOnConnectValue) {
+      this.element.showModal();
+    }
   }
 }
@@ -3,10 +3,10 @@
 class SolidusAdmin::UI::Modal::Component < SolidusAdmin::BaseComponent
   renders_one :actions
 
-  def initialize(title:, close_path: nil, open: false, **attributes)
+  def initialize(title:, close_path: nil, open: true, **attributes)
     @title = title
     @close_path = close_path
     @attributes = attributes
-    @attributes[:open] = open
+    @attributes.merge! stimulus_value(name: "open-on-connect", value: open)
   end
 end
@@ -15,6 +15,7 @@ export default class extends Controller {
     "batchHeader",
     "tableBody",
     "selectedRowsCount",
+    "batchActionButton",
   ]
 
   static classes = ["selectedRow"]
@@ -123,19 +124,6 @@ export default class extends Controller {
     return this.checkboxTargets.filter((checkbox) => checkbox.checked)
   }
 
-  confirmAction(event) {
-    const message = event.params.message
-      .replace("${count}", this.selectedRows().length)
-      .replace(
-        "${resource}",
-        this.selectedRows().length > 1 ? event.params.resourcePlural : event.params.resourceSingular
-      )
-
-    if (!confirm(message)) {
-      event.preventDefault()
-    }
-  }
-
   render() {
     const selectedRows = this.selectedRows()
 
@@ -172,5 +160,15 @@ export default class extends Controller {
         checkbox.checked = true
       else if (selectedRows.length > 0) checkbox.indeterminate = true
     })
+
+    // Update confirmation text
+    this.batchActionButtonTargets.forEach((button) => {
+      button.dataset.confirmDetails = button.dataset.confirmationTemplate
+        .replace("${count}", selectedRows.length)
+        .replace(
+          "${resource}",
+          this.selectedRows().length > 1 ? button.dataset.resourcePlural : button.dataset.resourceSingular,
+        );
+    });
   }
 }
@@ -117,13 +117,15 @@ def render_batch_action_button(batch_action)
     }
 
     if batch_action.require_confirmation
-      params["data-action"] = "click->#{stimulus_id}#confirmAction"
-      params["data-#{stimulus_id}-message-param"] = t(
+      params["data-turbo-confirm"] = t(".are_you_sure")
+      params["data-confirmation-template"] = t(
         ".action_confirmation",
         action: batch_action.label.downcase
       )
-      params["data-#{stimulus_id}-resource-singular-param"] = @data.singular_name.downcase
-      params["data-#{stimulus_id}-resource-plural-param"] = @data.plural_name.downcase
+      params["data-confirm-button"] = batch_action.label
+      params["data-resource-singular"] = @data.singular_name.downcase
+      params["data-resource-plural"] = @data.plural_name.downcase
+      params.merge! stimulus_target("batchActionButton")
     end
 
     render component("ui/button").new(**params)

@@ -1,4 +1,5 @@
 en:
+  are_you_sure: "Are you sure?"
   no_resources_found: "No %{resources} found"
   rows_selected: 'selected'
   select_all: 'Select all'

@@ -16,8 +16,9 @@
             text: t('.clear_key'),
             scheme: :secondary,
             type: :submit,
-            "data-action": "click->#{stimulus_id}#confirm",
-            "data-#{stimulus_id}-message-param": t(".confirm_clear_key"),
+            "data-turbo-confirm": t(".confirm.title"),
+            "data-confirm-details": t(".confirm.clear.details"),
+            "data-confirm-button": t(".confirm.clear.button"),
           ) %>
         <% end %>
 
@@ -26,8 +27,9 @@
             text: t('.regenerate_key'),
             scheme: :secondary,
             type: :submit,
-            "data-action": "click->#{stimulus_id}#confirm",
-            "data-#{stimulus_id}-message-param": t(".confirm_regenerate_key"),
+            "data-turbo-confirm": t(".confirm.title"),
+            "data-confirm-details": t(".confirm.regenerate.details"),
+            "data-confirm-button": t(".confirm.regenerate.button")
           ) %>
         <% end %>
       </div>

@@ -6,5 +6,11 @@ en:
   clear_key: Clear key
   regenerate_key: Regenerate key
   hidden: Hidden
-  confirm_clear_key: Are you sure you want to clear this user's API key? It will invalidate the existing key.
-  confirm_regenerate_key: Are you sure you want to regenerate this user's API key? It will invalidate the existing key.
+  confirm:
+    title: Are you sure?
+    clear:
+      details: Are you sure you want to clear this user's API key? It will invalidate the existing key.
+      button: Clear
+    regenerate:
+      details: Are you sure you want to regenerate this user's API key? It will invalidate the existing key.
+      button: Regenerate
@@ -2,3 +2,4 @@ import "@hotwired/turbo-rails"
 import "vendor/custom_elements"
 import "solidus_admin/controllers"
 import "solidus_admin/web_components/solidus_select"
+import "solidus_admin/turbo-confirm"
@@ -0,0 +1,16 @@
+import TC from "@rolemodel/turbo-confirm"
+
+TC.start({
+  animationDuration: 0,
+  messageSlotSelector: ".modal-title",
+  contentSlots: {
+    body: {
+      contentAttribute: "confirm-details",
+      slotSelector: ".modal-body"
+    },
+    acceptText: {
+      contentAttribute: "confirm-button",
+      slotSelector: "#confirm-accept"
+    }
+  }
+});
@@ -36,5 +36,7 @@
         <%= render component("ui/toast").new(text: message, scheme: key.to_sym == :error ? :error : :default) %>
       <% end %>
     </div>
+
+    <%= render component("layout/confirm").new %>
   </body>
 </html>
@@ -21,3 +21,6 @@
 pin "tom-select", to: "https://ga.jspm.io/npm:[email protected]/dist/esm/tom-select.complete.js"
 pin "@orchidjs/sifter", to: "https://ga.jspm.io/npm:@orchidjs/[email protected]/dist/esm/sifter.js"
 pin "@orchidjs/unicode-variants", to: "https://ga.jspm.io/npm:@orchidjs/[email protected]/dist/esm/index.js"
+
+pin "@rolemodel/turbo-confirm", to: "vendor/@rolemodel--turbo-confirm.js" # @2.1.1
+pin "solidus_admin/turbo-confirm", to: "solidus_admin/rolemodel/turbo-confirm.js"
@@ -61,6 +61,12 @@ def clear_search
           find('button[aria-label="Clear"]').click
         end
       end
+
+      def accept_turbo_confirm(title)
+        yield
+        dialog = find("dialog", text: title)
+        within(dialog) { find_button(id: "confirm-accept").click }
+      end
     end
   end
 end
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# @component "ui/modal"
+class SolidusAdmin::Layout::Confirm::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  # @param title text
+  # @param body text
+  # @param button text
+  def overview(title: "Are you sure?", body: "You are about to delete something. This cannot be undone.", button: "Confirm")
+    render_with_template(locals: { title:, body:, button: })
+  end
+end
@@ -0,0 +1,18 @@
+<section>
+  <div class="mb-8 text-lg">
+    <form>
+      <%= render component("ui/button").new(
+        type: :submit,
+        scheme: :secondary,
+        text: "Summon confirmation modal",
+        data: {
+          "turbo-confirm": title,
+          "confirm-details": body,
+          "confirm-button": button
+        }
+      ) %>
+    </form>
+  </div>
+
+  <%= render current_component.new %>
+</section>
@@ -11,8 +11,4 @@ def with_text
   def with_form
     render_with_template
   end
-
-  def with_actions
-    render_with_template
-  end
 end
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::Layout::Confirm::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end