From d4ec075dfccfe0babc918ab03861d5d46bddd734 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 20 Dec 2021 15:02:27 +0100
Subject: [PATCH] Disabled stripe-cards input if a already registred card is
 select

And then re-enabled it, if use decide to register a new card
---
 app/webpacker/controllers/stripe_cards_controller.js   | 10 ++++++++++
 .../stimulus/stripe_cards_controller_test.js           |  7 ++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/controllers/stripe_cards_controller.js b/app/webpacker/controllers/stripe_cards_controller.js
index 03eb1ef4ec..5ac7a34285 100644
--- a/app/webpacker/controllers/stripe_cards_controller.js
+++ b/app/webpacker/controllers/stripe_cards_controller.js
@@ -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"));
+  }
 }
diff --git a/spec/javascripts/stimulus/stripe_cards_controller_test.js b/spec/javascripts/stimulus/stripe_cards_controller_test.js
index 98b590861a..44679a1e81 100644
--- a/spec/javascripts/stimulus/stripe_cards_controller_test.js
+++ b/spec/javascripts/stimulus/stripe_cards_controller_test.js
@@ -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);
     });
   });
 });