diff --git a/app/views/checkout/_voucher_section.html.haml b/app/views/checkout/_voucher_section.html.haml
index df1837fb1d..0f7fb12f53 100644
--- a/app/views/checkout/_voucher_section.html.haml
+++ b/app/views/checkout/_voucher_section.html.haml
@@ -1,7 +1,7 @@
%div#voucher-section
.checkout-title
= t("checkout.step2.voucher.apply_voucher")
- .checkout-input{"data-controller": "toggle-button-disabled"}
+ .checkout-input{"data-controller": "toggle-control"}
= form_with url: voucher_adjustments_path, model: @order, method: :post, data: { remote: true } do |form|
- if voucher_adjustment.present?
.two-columns-inputs.voucher
@@ -18,8 +18,8 @@
- else
.two-columns-inputs
%div.checkout-input
- = form.text_field :voucher_code, value: params.dig(:order, :voucher_code), data: { action: "input->toggle-button-disabled#inputIsChanged" }, placeholder: t("checkout.step2.voucher.placeholder"), class: "voucher"
+ = form.text_field :voucher_code, value: params.dig(:order, :voucher_code), data: { action: "input->toggle-control#enableIfPresent" }, placeholder: t("checkout.step2.voucher.placeholder"), class: "voucher"
= form.error_message_on :voucher_code
%div.checkout-input
- = form.submit t("checkout.step2.voucher.apply"), disabled: true, class: "button cancel voucher-button", "data-disable-with": false, data: { "toggle-button-disabled-target": "button" }
+ = form.submit t("checkout.step2.voucher.apply"), disabled: true, class: "button cancel voucher-button", "data-disable-with": false, data: { "toggle-control-target": "control" }
diff --git a/app/webpacker/controllers/toggle_button_disabled_controller.js b/app/webpacker/controllers/toggle_button_disabled_controller.js
deleted file mode 100644
index 7ef9233217..0000000000
--- a/app/webpacker/controllers/toggle_button_disabled_controller.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Controller } from "stimulus";
-
-// Since Rails 7 it adds "data-disabled-with" property to submit, you'll need to add
-// 'data-disable-with="false' for this to function as expected, ie:
-//
-//
-//
-export default class extends Controller {
- static targets = ["button"];
-
- connect() {
- if (this.hasButtonTarget) {
- this.buttonTarget.disabled = true;
- }
- }
-
- inputIsChanged(e) {
- if (e.target.value !== "") {
- this.buttonTarget.disabled = false;
- } else {
- this.buttonTarget.disabled = true;
- }
- }
-}
diff --git a/app/webpacker/controllers/toggle_control_controller.js b/app/webpacker/controllers/toggle_control_controller.js
index c9a64d9b29..81828d3514 100644
--- a/app/webpacker/controllers/toggle_control_controller.js
+++ b/app/webpacker/controllers/toggle_control_controller.js
@@ -17,7 +17,14 @@ export default class extends Controller {
}
}
- //todo: can a new method disableIfBlank replace ButtonDisabledController?
+ enableIfPresent(event) {
+ const input = event.currentTarget;
+ const enable = !!this.#inputValue(input);
+
+ this.controlTargets.forEach((target) => {
+ target.disabled = !enable;
+ });
+ }
//todo: can a new method toggleDisplay replace ToggleController?
//todo: can toggleDisplay with optional chevron-target replace RemoteToggleController?
diff --git a/spec/javascripts/stimulus/toggle_button_disabled_controller_test.js b/spec/javascripts/stimulus/toggle_button_disabled_controller_test.js
deleted file mode 100644
index 2c367fdb11..0000000000
--- a/spec/javascripts/stimulus/toggle_button_disabled_controller_test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { Application } from "stimulus"
-import toggle_button_disabled_controller from "../../../app/webpacker/controllers/toggle_button_disabled_controller"
-
-describe("ButtonEnableToggleController", () => {
- beforeAll(() => {
- const application = Application.start()
- application.register("toggle-button-disabled", toggle_button_disabled_controller)
- })
-
- beforeEach(() => {
- document.body.innerHTML = `
-
- `
- })
-
- describe("#connect", () => {
- it("disables the target submit button", () => {
- const submit = document.getElementById("test-submit")
- expect(submit.disabled).toBe(true)
- })
-
- describe("when no button present", () => {
- beforeEach(() => {
- document.body.innerHTML = `
-
- `
- })
-
- // I am not sure if it's possible to manually trigger the loading/connect of the controller to
- // try catch the error, so leaving as this. It will break if the missing target isn't handled
- // properly
- it("doesn't break", () => {})
- })
- })
-
- describe("#formIsChanged", () => {
- let input
- let submit
-
- beforeEach(() => {
- input = document.getElementById("test-input")
- submit = document.getElementById("test-submit")
- })
-
- describe("when the input value is not empty", () => {
- it("enables the target button", () => {
- input.value = "test"
- input.dispatchEvent(new Event("input"));
-
- expect(submit.disabled).toBe(false)
- })
- })
-
- describe("when the input value is empty", () => {
- it("disables the target button", () => {
- // setting up state where target button is enabled
- input.value = "test"
- input.dispatchEvent(new Event("input"));
-
- input.value = ""
- input.dispatchEvent(new Event("input"));
-
- expect(submit.disabled).toBe(true)
- })
- })
- })
-})
diff --git a/spec/javascripts/stimulus/toggle_control_controller_test.js b/spec/javascripts/stimulus/toggle_control_controller_test.js
index f56686fe9d..6de74b1a54 100644
--- a/spec/javascripts/stimulus/toggle_control_controller_test.js
+++ b/spec/javascripts/stimulus/toggle_control_controller_test.js
@@ -61,4 +61,31 @@ describe("ToggleControlController", () => {
});
});
});
+ describe("#enableIfPresent", () => {
+ describe("with input", () => {
+ beforeEach(() => {
+ document.body.innerHTML = `
+
+
+
`;
+ });
+
+ it("Enables when input is filled", () => {
+ input.value = "a"
+ input.dispatchEvent(new Event("input"));
+
+ expect(control.disabled).toBe(false);
+ });
+
+ it("Disables when input is emptied", () => {
+ input.value = "test"
+ input.dispatchEvent(new Event("input"));
+
+ input.value = ""
+ input.dispatchEvent(new Event("input"));
+
+ expect(control.disabled).toBe(true);
+ });
+ });
+ });
});