From a4b9e069d7f7e450bbfbf08b0c79d9286d6ba766 Mon Sep 17 00:00:00 2001
From: Damian Kaczmarczyk <damia2kaczmarczyk@gmail.com>
Date: Fri, 9 Apr 2021 10:49:44 +0200
Subject: [PATCH] Fix SpreeBraintreeVzero loading issues

---
 .../spree/frontend/spree_braintree_vzero.js   |   4 +-
 .../braintree_vzero/_paypal_checkout.html.erb |  20 +-
 .../braintree_vzero/_three_d_secure.html.erb  | 432 +++++++++---------
 3 files changed, 240 insertions(+), 216 deletions(-)

diff --git a/app/assets/javascripts/spree/frontend/spree_braintree_vzero.js b/app/assets/javascripts/spree/frontend/spree_braintree_vzero.js
index 1e3bd980..d827ae41 100644
--- a/app/assets/javascripts/spree/frontend/spree_braintree_vzero.js
+++ b/app/assets/javascripts/spree/frontend/spree_braintree_vzero.js
@@ -46,7 +46,8 @@ SpreeBraintreeVzero = {
   }
 }
 
-$(document).ready(function() {
+$(document).ready(function () {
+  var event = new Event('spreebraintree:ready');
   paymentMethods = $('div[data-hook="checkout_payment_step"] input[type="radio"]').click(function (e) {
     SpreeBraintreeVzero.setSaveAndContinueVisibility();
   });
@@ -65,4 +66,5 @@ $(document).ready(function() {
     SpreeBraintreeVzero.addDeviceData();
   });
   SpreeBraintreeVzero.setSaveAndContinueVisibility();
+  window.dispatchEvent(event);
 })
diff --git a/app/views/spree/braintree_vzero/_paypal_checkout.html.erb b/app/views/spree/braintree_vzero/_paypal_checkout.html.erb
index b3621fb7..780e8fd5 100644
--- a/app/views/spree/braintree_vzero/_paypal_checkout.html.erb
+++ b/app/views/spree/braintree_vzero/_paypal_checkout.html.erb
@@ -9,7 +9,7 @@
 
   <script type="text/javascript">
     // TODO: Investiagate what kind of checkout (if any) steps should be included during paypal express payment
-    window.addEventListener('DOMContentLoaded', function() {
+    function setupBraintreePayPal() {
       var checkoutFormId = '#update-cart';
       var checkout;
       SpreeBraintreeVzero.checkoutFormId = '#update-cart';
@@ -82,6 +82,22 @@
         }
       });
       document.querySelector('#btnOpenFlow').addEventListener('click', function () { checkout.paypal.initAuthFlow(); }, false);
-    });
+    }
+
+    if(document.readyState !== 'loading') {
+      initBraintreePayPal()
+    } else {
+      window.addEventListener('DOMContentLoaded', initBraintreePayPal);
+    }
+
+    function initBraintreePayPal() {
+      if (typeof SpreeBraintreeVzero === "undefined") {
+        window.addEventListener('spreebraintree:ready', setupBraintreePayPal)
+      }
+      else {
+        setupBraintreePayPal()
+      }
+    }
+
   </script>
 <% end %>
diff --git a/app/views/spree/checkout/payment/braintree_vzero/_three_d_secure.html.erb b/app/views/spree/checkout/payment/braintree_vzero/_three_d_secure.html.erb
index 4f05923a..3cacffb7 100644
--- a/app/views/spree/checkout/payment/braintree_vzero/_three_d_secure.html.erb
+++ b/app/views/spree/checkout/payment/braintree_vzero/_three_d_secure.html.erb
@@ -1,252 +1,258 @@
 <script type="text/javascript">
-  window.addEventListener('DOMContentLoaded', function() {
+  if(document.readyState !== 'loading') {
+    setupThreeDSecure()
+  } else {
+    window.addEventListener('DOMContentLoaded', setupThreeDSecure);
+  }
+
+  function setupThreeDSecure() {
     $('#order_payments_attributes__payment_method_id_<%= payment_method.id %>').click(function (e) {
-      var threeDSecure;
-      var checkoutFormId = "<%= payment_method.preferred_checkout_form_id %>"
-      var formId = "#" + checkoutFormId;
+    var threeDSecure;
+    var checkoutFormId = "<%= payment_method.preferred_checkout_form_id %>"
+    var formId = "#" + checkoutFormId;
+
+    var clientToken = "<%= payment_method.client_token(@order) %>";
+
+    <% if hosted %>
+    var hf, threeDS;
+    var hostedFieldsContainer = document.getElementById('hosted-fields');
+    <% elsif dropin %>
+    var dropin;
+    <% end %>
+
+    var payBtn = document.getElementsByName('commit')[0];
+    var payGroup = $('.pay-group');
+
+    $('.credit-card-pay-success').css('display', 'none');
+    $('.credit-card-pay-errors').css('display', 'none');
+
+    var billingFields = [
+      'email',
+    ].reduce(function (fields, fieldName) {
+      var field = fields[fieldName] = {
+        input: document.getElementById(fieldName),
+        help: document.getElementById('help-' + fieldName)
+      };
+
+      field.input.addEventListener('focus', function() {
+        clearFieldValidations(field);
+      });
 
-      var clientToken = "<%= payment_method.client_token(@order) %>";
+      return fields;
+    }, {});
 
-      <% if hosted %>
-      var hf, threeDS;
-      var hostedFieldsContainer = document.getElementById('hosted-fields');
-      <% elsif dropin %>
-      var dropin;
-      <% end %>
-
-      var payBtn = document.getElementsByName('commit')[0];
-      var payGroup = $('.pay-group');
-
-      $('.credit-card-pay-success').css('display', 'none');
-      $('.credit-card-pay-errors').css('display', 'none');
-
-      var billingFields = [
-        'email',
-      ].reduce(function (fields, fieldName) {
-        var field = fields[fieldName] = {
-          input: document.getElementById(fieldName),
-          help: document.getElementById('help-' + fieldName)
-        };
-
-        field.input.addEventListener('focus', function() {
-          clearFieldValidations(field);
-        });
+    function clearFieldValidations (field) {
+      field.help.innerText = '';
+      field.help.parentNode.classList.remove('has-error');
+    }
 
-        return fields;
-      }, {});
+    function validateBillingFields() {
+      var isValid = true;
 
-      function clearFieldValidations (field) {
-        field.help.innerText = '';
-        field.help.parentNode.classList.remove('has-error');
-      }
+      Object.keys(billingFields).forEach(function (fieldName) {
+        var fieldEmpty = false;
+        var field = billingFields[fieldName];
 
-      function validateBillingFields() {
-        var isValid = true;
+        if (field.optional) {
+          return;
+        }
 
-        Object.keys(billingFields).forEach(function (fieldName) {
-          var fieldEmpty = false;
-          var field = billingFields[fieldName];
+        fieldEmpty = field.input.value.trim() === '';
 
-          if (field.optional) {
-            return;
-          }
+        if (fieldEmpty) {
+          isValid = false;
+          field.help.innerText = "<%= Spree.t(:required) %>";
+          field.help.parentNode.classList.add('has-error');
+        } else {
+          clearFieldValidations(field);
+        }
+      });
+
+      return isValid;
+    }
+
+    function start() {
+      getClientToken();
+    }
 
-          fieldEmpty = field.input.value.trim() === '';
+    function getClientToken() {
+      onFetchClientToken(clientToken);
+    }
 
-          if (fieldEmpty) {
-            isValid = false;
-            field.help.innerText = "<%= Spree.t(:required) %>";
-            field.help.parentNode.classList.add('has-error');
-          } else {
-            clearFieldValidations(field);
+    function setupComponents (clientToken) {
+      return Promise.all([
+        braintree.hostedFields.create({
+          authorization: clientToken,
+          styles: {
+            input: {
+              'font-size': '14px',
+              'font-family': 'monospace'
+            }
+          },
+          fields: {
+            number: {
+              <% if payment_method.respond_to?(:preferred_number_selector) && payment_method.preferred_number_selector.present? %>
+                selector: "<%= payment_method.preferred_number_selector %>"
+              <% else %>
+                selector: '#hosted-fields-number'
+              <% end %>
+            },
+            cvv: {
+              <% if payment_method.respond_to?(:preferred_cvv_selector) && payment_method.preferred_cvv_selector.present? %>
+                selector: "<%= payment_method.preferred_cvv_selector %>"
+              <% else %>
+                selector: '#hosted-fields-cvv'
+              <% end %>
+            },
+            expirationDate: {
+              <% if payment_method.respond_to?(:preferred_expiration_date_selector) && payment_method.preferred_expiration_date_selector.present? %>
+                selector: "<%= payment_method.preferred_expiration_date_selector %>"
+              <% else %>
+                selector: '#hosted-fields-expiration-date'
+              <% end %>
+            }
           }
-        });
+        }),
+        braintree.threeDSecure.create({
+          authorization: clientToken,
+          version: 2
+        })
+      ]);
+    }
+
+    function setupDropin (clientToken) {
+      return braintree.dropin.create({
+        authorization: clientToken,
+        container: '#drop-in',
+        threeDSecure: true
+      })
+    }
+
+    function onFetchClientToken(clientToken) {
+      <% if hosted %>
+      return setupComponents(clientToken).then(function(instances) {
+        hf = instances[0];
+        threeDS = instances[1];
+        <% elsif dropin %>
+        return setupDropin(clientToken).then(function(instance) {
+          dropin = instance;
+          <% end %>
 
-        return isValid;
+          setupForm();
+        }).catch(function (err) {
+          console.log('component error:', err);
+        });
       }
 
-      function start() {
-        getClientToken();
+      function setupForm() {
+        enablePayNow();
       }
 
-      function getClientToken() {
-        onFetchClientToken(clientToken);
+      function enablePayNow() {
+        payBtn.value = "<%= Spree.t(:save_and_continue) %>";
+        payBtn.removeAttribute('disabled');
       }
 
-      function setupComponents (clientToken) {
-        return Promise.all([
-          braintree.hostedFields.create({
-            authorization: clientToken,
-            styles: {
-              input: {
-                'font-size': '14px',
-                'font-family': 'monospace'
+      function showErrors(err) {
+        if (err) {
+          if (err.details && err.details.invalidFields) {
+            const invalidFields = []
+            Object.keys(err.details.invalidFields).forEach(function (key) {
+              if (key === "expirationDate") {
+                invalidFields.push("expiration")
+              } else {
+                invalidFields.push(key)
               }
-            },
-            fields: {
-              number: {
-                <% if payment_method.respond_to?(:preferred_number_selector) && payment_method.preferred_number_selector.present? %>
-                  selector: "<%= payment_method.preferred_number_selector %>"
-                <% else %>
-                  selector: '#hosted-fields-number'
-                <% end %>
-              },
-              cvv: {
-                <% if payment_method.respond_to?(:preferred_cvv_selector) && payment_method.preferred_cvv_selector.present? %>
-                  selector: "<%= payment_method.preferred_cvv_selector %>"
-                <% else %>
-                  selector: '#hosted-fields-cvv'
-                <% end %>
-              },
-              expirationDate: {
-                <% if payment_method.respond_to?(:preferred_expiration_date_selector) && payment_method.preferred_expiration_date_selector.present? %>
-                  selector: "<%= payment_method.preferred_expiration_date_selector %>"
-                <% else %>
-                  selector: '#hosted-fields-expiration-date'
-                <% end %>
-              }
-            }
-          }),
-          braintree.threeDSecure.create({
-            authorization: clientToken,
-            version: 2
-          })
-        ]);
-      }
+            })
+            const errorString = invalidFields.join(", ")
+            const linkingVerb = invalidFields.length > 1 ? "are" : "is"
 
-      function setupDropin (clientToken) {
-        return braintree.dropin.create({
-          authorization: clientToken,
-          container: '#drop-in',
-          threeDSecure: true
-        })
+            $('.credit-card-pay-errors').text("Card " + errorString + " " + linkingVerb + " incorrect.")
+          }
+        }
+        payGroup.addClass('hidden');
+        payGroup.css('display', 'none');
+        $('.credit-card-pay-success').css('display', 'none');
+        $('.credit-card-pay-errors').css('display', 'block');
       }
 
-      function onFetchClientToken(clientToken) {
+      function showSuccess() {
+        payGroup.addClass('hidden');
+        payGroup.css('display', 'none');
         <% if hosted %>
-        return setupComponents(clientToken).then(function(instances) {
-          hf = instances[0];
-          threeDS = instances[1];
-          <% elsif dropin %>
-          return setupDropin(clientToken).then(function(instance) {
-            dropin = instance;
-            <% end %>
-
-            setupForm();
-          }).catch(function (err) {
-            console.log('component error:', err);
-          });
-        }
+        hostedFieldsContainer.style.display = 'none';
+        <% end %>
+        $('.credit-card-pay-success').css('display', 'block');
+        $('.credit-card-pay-errors').css('display', 'none');
+      }
+
+      payBtn.addEventListener('click', function(event) {
+        event.preventDefault()
+        payBtn.setAttribute('disabled', 'disabled');
+        payBtn.value = "<%= Spree.t(:processing_credit_card) %>";
+
+        var billingIsValid = validateBillingFields();
 
-        function setupForm() {
+        if (!billingIsValid) {
           enablePayNow();
-        }
 
-        function enablePayNow() {
-          payBtn.value = "<%= Spree.t(:save_and_continue) %>";
-          payBtn.removeAttribute('disabled');
+          return;
         }
-
-        function showErrors(err) {
-          if (err) {
-            if (err.details && err.details.invalidFields) {
-              const invalidFields = []
-              Object.keys(err.details.invalidFields).forEach(function (key) {
-                if (key === "expirationDate") {
-                  invalidFields.push("expiration")
-                } else {
-                  invalidFields.push(key)
-                }
+        <% if hosted %>
+        hf.tokenize().then(function (payload) {
+          return threeDS.verifyCard({
+            onLookupComplete: function (data, next) {
+              next();
+            },
+            nonce: payload.nonce,
+            bin: payload.details.bin,
+            <% elsif dropin %>
+            dropin.requestPaymentMethod({
+              threeDSecure: {
+                <% end %>
+                amount: "<%= @order.total %>",
+                email: billingFields.email.input.value,
+                <% if hosted %>
               })
-              const errorString = invalidFields.join(", ")
-              const linkingVerb = invalidFields.length > 1 ? "are" : "is"
-
-              $('.credit-card-pay-errors').text("Card " + errorString + " " + linkingVerb + " incorrect.")
-            }
+          }).then(function (payload) {
+            <% elsif dropin %>
           }
-          payGroup.addClass('hidden');
-          payGroup.css('display', 'none');
-          $('.credit-card-pay-success').css('display', 'none');
-          $('.credit-card-pay-errors').css('display', 'block');
-        }
-
-        function showSuccess() {
-          payGroup.addClass('hidden');
-          payGroup.css('display', 'none');
-          <% if hosted %>
-          hostedFieldsContainer.style.display = 'none';
-          <% end %>
-          $('.credit-card-pay-success').css('display', 'block');
-          $('.credit-card-pay-errors').css('display', 'none');
-        }
-
-        payBtn.addEventListener('click', function(event) {
-          event.preventDefault()
-          payBtn.setAttribute('disabled', 'disabled');
-          payBtn.value = "<%= Spree.t(:processing_credit_card) %>";
-
-          var billingIsValid = validateBillingFields();
-
-          if (!billingIsValid) {
+        }, function(err, payload) {
+          if (err) {
+            console.log('tokenization error:');
+            console.log(err);
+            dropin.clearSelectedPaymentMethod();
             enablePayNow();
 
             return;
           }
-          <% if hosted %>
-          hf.tokenize().then(function (payload) {
-            return threeDS.verifyCard({
-              onLookupComplete: function (data, next) {
-                next();
-              },
-              nonce: payload.nonce,
-              bin: payload.details.bin,
-              <% elsif dropin %>
-              dropin.requestPaymentMethod({
-                threeDSecure: {
-                  <% end %>
-                  amount: "<%= @order.total %>",
-                  email: billingFields.email.input.value,
-                  <% if hosted %>
-                })
-            }).then(function (payload) {
-              <% elsif dropin %>
-            }
-          }, function(err, payload) {
-            if (err) {
-              console.log('tokenization error:');
-              console.log(err);
-              dropin.clearSelectedPaymentMethod();
-              enablePayNow();
-
-              return;
-            }
-            <% end %>
+          <% end %>
 
-            if (!payload.liabilityShifted) {
-              console.log('Liability did not shift', payload);
-              showErrors();
-              return;
-            }
+          if (!payload.liabilityShifted) {
+            console.log('Liability did not shift', payload);
+            showErrors();
+            return;
+          }
 
-            console.log('verification success:', payload);
-            showSuccess();
-            $(formId).append("<input type='hidden' name='braintree_last_two' value=" + payload.details.lastTwo + ">");
-            $(formId).append("<input type='hidden' name='braintree_card_type' value=" + payload.details.cardType.replace(/\s/g, "") + ">");
-            $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + payload.nonce + ">");
-            $(formId).append("<input type='hidden' name='payment_method_nonce' value=" + payload.nonce + ">");
-            setTimeout(function () {
-              $(payBtn).attr("disabled", false)
-              $('#checkout form').submit()
-            }, 200);
-            <% if hosted %>
-          }).catch(function (err) {
-            enablePayNow();
-            showErrors(err);
-            <% end %>
-          });
+          console.log('verification success:', payload);
+          showSuccess();
+          $(formId).append("<input type='hidden' name='braintree_last_two' value=" + payload.details.lastTwo + ">");
+          $(formId).append("<input type='hidden' name='braintree_card_type' value=" + payload.details.cardType.replace(/\s/g, "") + ">");
+          $(formId).append("<input type='hidden' name='order[payments_attributes][][braintree_nonce]' value=" + payload.nonce + ">");
+          $(formId).append("<input type='hidden' name='payment_method_nonce' value=" + payload.nonce + ">");
+          setTimeout(function () {
+            $(payBtn).attr("disabled", false)
+            $('#checkout form').submit()
+          }, 200);
+          <% if hosted %>
+        }).catch(function (err) {
+          enablePayNow();
+          showErrors(err);
+          <% end %>
         });
-
-        start();
       });
-  });
+
+      start();
+    });
+  }
 </script>