From 33c156bb5511fde0814792b1e388bf3004cae8de Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Dec 2021 15:23:21 +0000
Subject: [PATCH] Extract (arrow) functions for callbacks used by event
 listeners and reduce variable assignments

---
 .../payment/_stripe_sca.html.haml             |  2 +-
 .../controllers/stripe_controller.js          | 78 +++++++++----------
 2 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/app/views/split_checkout/payment/_stripe_sca.html.haml b/app/views/split_checkout/payment/_stripe_sca.html.haml
index 17c0f9b52a..f75a3b2aa8 100644
--- a/app/views/split_checkout/payment/_stripe_sca.html.haml
+++ b/app/views/split_checkout/payment/_stripe_sca.html.haml
@@ -12,7 +12,7 @@
       %label
         = t('split_checkout.step2.form.stripe.use_new_card')
 
-    %div{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}", "data-stripe-target": "stripeElementsForm" }
+    %div{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}" }
       .stripe-card
         = hidden_field_tag "order[payments_attributes][][source_attributes][first_name]", @order.bill_address.first_name
         = hidden_field_tag "order[payments_attributes][][source_attributes][last_name]", @order.bill_address.last_name
diff --git a/app/webpacker/controllers/stripe_controller.js b/app/webpacker/controllers/stripe_controller.js
index 35e1d7b29a..6e072c7058 100644
--- a/app/webpacker/controllers/stripe_controller.js
+++ b/app/webpacker/controllers/stripe_controller.js
@@ -1,7 +1,7 @@
 import { Controller } from "stimulus"
 
 export default class extends Controller {
-  static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId", "stripeElementsForm" ];
+  static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId" ];
   static styles = {
     base: {
       fontFamily: "Roboto, Arial, sans-serif",
@@ -14,54 +14,52 @@ export default class extends Controller {
   };
 
   connect() {
-    const stripe = Stripe(this.data.get("key"));
-    const elements = stripe.elements();
-    const form = this.pmIdTarget.form;
-    const error_container = this.cardErrorsTarget;
-    const exp_month_field = this.expMonthTarget;
-    const exp_year_field = this.expYearTarget;
-    const brand_field = this.brandTarget;
-    const last4_field = this.last4Target;
-    const pm_id_field = this.pmIdTarget;
-    const stripeElementsForm = this.stripeElementsFormTarget;
+    this.parentForm = this.pmIdTarget.form;
 
-    const stripe_element = elements.create("card", {
+    // Initialize Stripe JS
+    this.stripe = Stripe(this.data.get("key"));
+    this.stripeElement = this.stripe.elements().create("card", {
       style: this.constructor.styles,
       hidePostalCode: true
     });
 
-    // Mount Stripe Elements JS to the field and add form validations
-    stripe_element.mount(this.cardElementTarget);
-    stripe_element.addEventListener("change", event => {
-      if (event.error) {
-        error_container.textContent = event.error.message;
+    // Mount Stripe Elements JS to the form field
+    this.stripeElement.mount(this.cardElementTarget);
+
+    this.parentForm.addEventListener("submit", this.stripeSubmit);
+    this.stripeElement.addEventListener("change", this.updateErrors);
+  }
+
+  // Before the form is submitted we send the card details directly to Stripe (via StripeJS),
+  // and receive a token which represents the card object, and add that token into the form.
+  stripeSubmit = (event) => {
+    if(!this.stripeSelected()) { return }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.stripe.createPaymentMethod({type: "card", card: this.stripeElement}).then(response => {
+      if (response.error) {
+        this.updateErrors(response);
       } else {
-        error_container.textContent = "";
+        this.pmIdTarget.setAttribute("value", response.paymentMethod.id);
+        this.expMonthTarget.setAttribute("value", response.paymentMethod.card.exp_month);
+        this.expYearTarget.setAttribute("value", response.paymentMethod.card.exp_year);
+        this.brandTarget.setAttribute("value", response.paymentMethod.card.brand);
+        this.last4Target.setAttribute("value", response.paymentMethod.card.last4);
+
+        this.parentForm.submit();
       }
     });
+  }
 
-    // Before the form is submitted we send the card details directly to Stripe (via StripeJS),
-    // and receive a token which represents the card object, and add that token into the form.
-    form.addEventListener("submit", event => {
-      if(!this.stripeSelected()) { return }
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      stripe.createPaymentMethod({type: "card", card: stripe_element}).then(response => {
-        if (response.error) {
-          error_container.textContent = response.error.message;
-        } else {
-          pm_id_field.setAttribute("value", response.paymentMethod.id);
-          exp_month_field.setAttribute("value", response.paymentMethod.card.exp_month);
-          exp_year_field.setAttribute("value", response.paymentMethod.card.exp_year);
-          brand_field.setAttribute("value", response.paymentMethod.card.brand);
-          last4_field.setAttribute("value", response.paymentMethod.card.last4);
-
-          form.submit();
-        }
-      });
-    });
+  // Update validation messages from Stripe shown in the form
+  updateErrors = (data) => {
+    if (data.error) {
+      this.cardErrorsTarget.textContent = data.error.message;
+    } else {
+      this.cardErrorsTarget.textContent = "";
+    }
   }
 
   // Boolean; true if Stripe is shown / currently selected