Change the paymentmethod controller to handle both desc and form

Add tests as well

Update _payment.html.haml

Update _payment.html.haml

app/views/split_checkout/_payment.html.haml

@@ -11,13 +11,18 @@
           name: "order[payments_attributes][][payment_method_id]",
           checked: (payment_method.id == selected_payment_method),
           "data-action": "paymentmethod#selectPaymentMethod",
-          "data-paymentmethod-description": "#{payment_method.description}"
+          "data-paymentmethod-id": "paymentmethod#{payment_method.id}"
         = f.label :payment_method_id, "#{payment_method.name} (#{payment_or_shipping_price(payment_method, @order)})", for: "payment_method_#{payment_method.id}"
 
     = f.error_message_on :payment_method, standalone: true
 
-    %div
-      .panel{"data-paymentmethod-target": "panel", style: "display: none"} 
+    - available_payment_methods.each do |payment_method|
+      .paymentmethod-container{id: "paymentmethod#{payment_method.id}"}
+        - if payment_method.description && !payment_method.description.empty?
+          .paymentmethod-description.panel
+            #{payment_method.description}
+        .paymentmethod-form
+          = render partial: "spree/checkout/payment/#{payment_method.method_type}", :locals => { :payment_method => payment_method }
 
   %div.checkout-substep
     = t("split_checkout.step2.explaination")

app/webpacker/controllers/paymentmethod_controller.js

@@ -1,9 +1,25 @@
 import { Controller } from "stimulus";
 export default class extends Controller {
-  static targets = ["panel"];
+  static targets = ["paymentMethod"];
+
+  connect() {
+    this.hideAll();
+  }
 
   selectPaymentMethod(event) {
-    this.panelTarget.innerHTML = `<span>${event.target.dataset.paymentmethodDescription}</span>`;
-    this.panelTarget.style.display = "block";
+    this.hideAll();
+    const paymentMethodContainerId = event.target.dataset.paymentmethodId;
+    const paymentMethodContainer = document.getElementById(
+      paymentMethodContainerId
+    );
+    paymentMethodContainer.style.display = "block";
+  }
+
+  hideAll() {
+    Array.from(
+      document.getElementsByClassName("paymentmethod-container")
+    ).forEach((e) => {
+      e.style.display = "none";
+    });
   }
 }

spec/javascripts/stimulus/paymentmethod_controller_test.js

@@ -0,0 +1,49 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import paymentmethod_controller from "../../../app/webpacker/controllers/paymentmethod_controller";
+
+describe("PaymentmethodController", () => {
+  describe("#selectPaymentMethod", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div data-controller="paymentmethod">
+         <span id="paymentmethod_1" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod1" />
+         <span id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" />
+         <span id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" />
+         
+         <div class="paymentmethod-container" id="paymentmethod1"></div>
+         <div class="paymentmethod-container" id="paymentmethod2"></div>
+         <div class="paymentmethod-container" id="paymentmethod3"></div>
+       </div>`;
+
+      const application = Application.start();
+      application.register("paymentmethod", paymentmethod_controller);
+    });
+
+    it("fill the right payment description", () => {
+      const paymentMethod1 = document.getElementById("paymentmethod_1");
+      const paymentMethod2 = document.getElementById("paymentmethod_2");
+      const paymentMethod3 = document.getElementById("paymentmethod_3");
+
+      const paymentMethod1Container = document.getElementById("paymentmethod1");
+      const paymentMethod2Container = document.getElementById("paymentmethod2");
+      const paymentMethod3Container = document.getElementById("paymentmethod3");
+
+      expect(paymentMethod1Container.style.display).toBe("none");
+      expect(paymentMethod2Container.style.display).toBe("none");
+      expect(paymentMethod3Container.style.display).toBe("none");
+
+      paymentMethod1.click();
+      expect(paymentMethod1Container.style.display).toBe("block");
+      expect(paymentMethod2Container.style.display).toBe("none");
+      expect(paymentMethod3Container.style.display).toBe("none");
+
+      paymentMethod3.click();
+      expect(paymentMethod1Container.style.display).toBe("none");
+      expect(paymentMethod2Container.style.display).toBe("none");
+      expect(paymentMethod3Container.style.display).toBe("block");
+    });
+  });
+});