From 7437c6a6d79567a0e22eb4e5fc75de579258e458 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 26 Nov 2021 10:21:49 +0100
Subject: [PATCH] Add a stripe controller that show/hide stripe form if saved
 cards or not

---
 .../controllers/stripe_controller.js          | 21 +++++++
 .../stimulus/stripe_controller_test.js        | 55 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 app/webpacker/controllers/stripe_controller.js
 create mode 100644 spec/javascripts/stimulus/stripe_controller_test.js

diff --git a/app/webpacker/controllers/stripe_controller.js b/app/webpacker/controllers/stripe_controller.js
new file mode 100644
index 0000000000..0d388ee991
--- /dev/null
+++ b/app/webpacker/controllers/stripe_controller.js
@@ -0,0 +1,21 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["stripeelements", "select"];
+
+  connect() {
+    this.selectCard(this.selectTarget.value);
+  }
+
+  onSelectCard(event) {
+    this.selectCard(event.target.value);
+  }
+
+  selectCard(cardValue) {
+    if (cardValue == "") {
+      this.stripeelementsTarget.style.display = "block";
+    } else {
+      this.stripeelementsTarget.style.display = "none";
+    }
+  }
+}
diff --git a/spec/javascripts/stimulus/stripe_controller_test.js b/spec/javascripts/stimulus/stripe_controller_test.js
new file mode 100644
index 0000000000..d3cd70833f
--- /dev/null
+++ b/spec/javascripts/stimulus/stripe_controller_test.js
@@ -0,0 +1,55 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import stripe_controller from "../../../app/webpacker/controllers/stripe_controller";
+
+describe("StripeController", () => {
+  beforeEach(() => {
+    document.body.innerHTML = `<div data-controller="stripe">
+       <select data-action="change->stripe#onSelectCard" id="select">
+        <option value="">Blank</option>
+        <option value="1">Card #1</option>
+        <option value="2">Card #2</option>
+       </select>
+       <div data-stripe-target="stripeelements" id="stripeelements" />
+      </div>`;
+
+    const application = Application.start();
+    application.register("stripe", stripe_controller);
+  });
+  describe("#connect", () => {
+    it("initialize with the right display state", () => {
+      const select = document.getElementById("select");
+      select.value = "";
+      select.dispatchEvent(new Event("change"));
+      expect(document.getElementById("stripeelements").style.display).toBe(
+        "block"
+      );
+    });
+  });
+  describe("#selectCard", () => {
+    it("fill the right payment container", () => {
+      const select = document.getElementById("select");
+      select.value = "1";
+      select.dispatchEvent(new Event("change"));
+
+      expect(document.getElementById("stripeelements").style.display).toBe(
+        "none"
+      );
+
+      select.value = "2";
+      select.dispatchEvent(new Event("change"));
+      expect(document.getElementById("stripeelements").style.display).toBe(
+        "none"
+      );
+
+      select.value = "";
+      select.dispatchEvent(new Event("change"));
+      expect(document.getElementById("stripeelements").style.display).toBe(
+        "block"
+      );
+    });
+  });
+});