diff --git a/app/reflexes/cancel_orders_reflex.rb b/app/reflexes/cancel_orders_reflex.rb
index 10876d018f..472a87bf39 100644
--- a/app/reflexes/cancel_orders_reflex.rb
+++ b/app/reflexes/cancel_orders_reflex.rb
@@ -2,8 +2,18 @@
 
 class CancelOrdersReflex < ApplicationReflex
   def confirm(params)
-    OrdersBulkCancelService.new(params, current_user).call
+    cancelled_orders = OrdersBulkCancelService.new(params, current_user).call
+
     cable_ready.dispatch_event(name: "modal:close")
-    # flash[:success] = Spree.t(:order_updated)
+
+    cancelled_orders.each do |order|
+      cable_ready.replace(
+        selector: dom_id(order),
+        html: render(partial: "spree/admin/orders/table_row", locals: { order: order })
+      )
+    end
+
+    cable_ready.broadcast
+    morph :nothing
   end
 end
diff --git a/app/services/orders_bulk_cancel_service.rb b/app/services/orders_bulk_cancel_service.rb
index 2f51709eeb..7a69b9dac5 100644
--- a/app/services/orders_bulk_cancel_service.rb
+++ b/app/services/orders_bulk_cancel_service.rb
@@ -9,11 +9,14 @@ class OrdersBulkCancelService
   end
 
   def call
+    updated = []
     editable_orders.where(id: @order_ids).find_each do |order|
       order.send_cancellation_email = @send_cancellation_email
       order.restock_items = @restock_items
       order.cancel
+      updated << order
     end
+    updated
   end
 
   private
diff --git a/app/views/spree/admin/orders/messages/_cancel_orders.html.haml b/app/views/spree/admin/orders/messages/_cancel_orders.html.haml
index 00d30d1eed..ca9093665d 100644
--- a/app/views/spree/admin/orders/messages/_cancel_orders.html.haml
+++ b/app/views/spree/admin/orders/messages/_cancel_orders.html.haml
@@ -1,10 +1,10 @@
 .modal-message
-  .form
+  %form{ "data-cancel-orders-target": "extraParams" }
     %input{ type: "checkbox", name: "send_cancellation_email", value: "1", id: "send_cancellation_email", checked: "true" }
     %label{ for: "send_cancellation_email" }
       = t("js.admin.orders.cancel_the_order_send_cancelation_email")
     %br
-    %input{ type: "checkbox", name: "restock_items", id: "restock_items", checked: "true" }
+    %input{ type: "checkbox", name: "restock_items", value: "1", id: "restock_items", checked: "true" }
     %label{ for: "restock_items" }
       = t("js.admin.orders.restock_items")
     .margin-bottom-30
diff --git a/app/webpacker/controllers/cancel_orders_controller.js b/app/webpacker/controllers/cancel_orders_controller.js
index a017edda2b..8ede1134a1 100644
--- a/app/webpacker/controllers/cancel_orders_controller.js
+++ b/app/webpacker/controllers/cancel_orders_controller.js
@@ -1,27 +1,27 @@
-import ApplicationController from "./application_controller";
+import BulkActionsController from "./bulk_actions_controller";
+
+export default class extends BulkActionsController {
+  static targets = ["extraParams"]
 
-export default class extends ApplicationController {
   connect() {
     super.connect();
   }
 
   confirm() {
-    const send_cancellation_email = document.querySelector("#send_cancellation_email").checked;
-    const restock_items = document.querySelector("#restock_items").checked;
-    const order_ids = [];
+    let data = { order_ids: super.getOrdersIds() };
 
-    document
-      .querySelectorAll("#listing_orders input[name='order_ids[]']:checked")
-      .forEach((checkbox) => {
-        order_ids.push(checkbox.value);
-      });
+    if (this.hasExtraParamsTarget) {
+      Object.assign(data, this.extraFormData())
+    }
 
-    const params = {
-      order_ids: order_ids,
-      send_cancellation_email: send_cancellation_email,
-      restock_items: restock_items,
-    };
+    this.stimulate("CancelOrdersReflex#confirm", data);
+  }
 
-    this.stimulate("CancelOrdersReflex#confirm", params);
+  // private
+
+  extraFormData() {
+    if (this.extraParamsTarget.constructor.name !== "HTMLFormElement") { return {} }
+
+    return Object.fromEntries(new FormData(this.extraParamsTarget).entries())
   }
 }