Disabled stripe-cards input if a already registred card is select

And then re-enabled it, if use decide to register a new card
This commit is contained in:
Jean-Baptiste Bellet
2021-12-20 15:02:27 +01:00
parent 7b6aa99de2
commit d4ec075dfc
2 changed files with 16 additions and 1 deletions

View File

@@ -16,8 +16,18 @@ export default class extends Controller {
selectCard(cardValue) {
if (cardValue == "") {
this.stripeelementsTarget.style.display = "block";
this.getFormElementsArray(this.stripeelementsTarget).forEach((i) => {
i.disabled = false;
});
} else {
this.stripeelementsTarget.style.display = "none";
this.getFormElementsArray(this.stripeelementsTarget).forEach((i) => {
i.disabled = true;
});
}
}
getFormElementsArray(container) {
return Array.from(container.querySelectorAll("input, select, textarea"));
}
}

View File

@@ -13,7 +13,9 @@ describe("StripeCardsController", () => {
<option value="1">Card #1</option>
<option value="2">Card #2</option>
</select>
<div data-stripe-cards-target="stripeelements" id="stripeelements" />
<div data-stripe-cards-target="stripeelements" id="stripeelements" >
<input type="hidden" id="input_1">
</div>
</div>`;
const application = Application.start();
@@ -38,18 +40,21 @@ describe("StripeCardsController", () => {
expect(document.getElementById("stripeelements").style.display).toBe(
"none"
);
expect(document.getElementById("input_1").disabled).toBe(true);
select.value = "2";
select.dispatchEvent(new Event("change"));
expect(document.getElementById("stripeelements").style.display).toBe(
"none"
);
expect(document.getElementById("input_1").disabled).toBe(true);
select.value = "";
select.dispatchEvent(new Event("change"));
expect(document.getElementById("stripeelements").style.display).toBe(
"block"
);
expect(document.getElementById("input_1").disabled).toBe(false);
});
});
});