From 7320a1714cc0bd2e0dff1569c3c53503df41bbd0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 18 Jan 2023 11:40:28 +0100
Subject: [PATCH] Instead of selecting the controller, send an event handled by
 stripe-cards

Using a query selector to find controller in order to call method could be dangerous as the DOM can change. Using an event should be more robust.
---
 .../payment/_stripe_sca.html.haml               |  2 +-
 .../controllers/paymentmethod_controller.js     | 17 ++++++-----------
 .../controllers/stripe_cards_controller.js      |  5 +++++
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/views/split_checkout/payment/_stripe_sca.html.haml b/app/views/split_checkout/payment/_stripe_sca.html.haml
index ba451ff37d..24448c7346 100644
--- a/app/views/split_checkout/payment/_stripe_sca.html.haml
+++ b/app/views/split_checkout/payment/_stripe_sca.html.haml
@@ -1,4 +1,4 @@
-%div{"data-controller": "stripe-cards"}
+%div{"data-controller": "stripe-cards", "data-paymentid": "#{payment_method.id}" }
   - if @saved_credit_cards.any?
     .checkout-input
       %label
diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js
index b7a1b27e8d..00e607f333 100644
--- a/app/webpacker/controllers/paymentmethod_controller.js
+++ b/app/webpacker/controllers/paymentmethod_controller.js
@@ -12,17 +12,12 @@ export default class extends Controller {
 
   selectPaymentMethod(event) {
     this.setPaymentMethod(event.target.dataset.paymentmethodId);
-
-    const stripeCardSelector =
-      this.application.getControllerForElementAndIdentifier(
-        document
-          .querySelector(
-            `[data-paymentmethod-id="${event.target.dataset.paymentmethodId}"]`
-          )
-          .querySelector('[data-controller="stripe-cards"]'),
-        "stripe-cards"
-      );
-    stripeCardSelector?.initSelectedCard();
+    // Send an event to the right (ie. the one with the same paymentmethodId)
+    // StripeCardsController to initialize the form elements with the selected card
+    const customEvent = new CustomEvent("stripecards:initSelectedCard", {
+      detail: event.target.dataset.paymentmethodId,
+    });
+    document.dispatchEvent(customEvent);
   }
 
   setPaymentMethod(paymentMethodContainerId) {
diff --git a/app/webpacker/controllers/stripe_cards_controller.js b/app/webpacker/controllers/stripe_cards_controller.js
index 98c657867b..2b36f58bfa 100644
--- a/app/webpacker/controllers/stripe_cards_controller.js
+++ b/app/webpacker/controllers/stripe_cards_controller.js
@@ -7,6 +7,11 @@ export default class extends Controller {
 
   connect() {
     this.initSelectedCard();
+    document.addEventListener("stripecards:initSelectedCard", (e) => {
+      if (e.detail == `paymentmethod${this.element.dataset.paymentid}`) {
+        this.initSelectedCard();
+      }
+    });
   }
 
   initSelectedCard() {