PP-11638 Move client-side logging for wallet available

We were logging that wallet payment methods were shown to the end user
fewer times than they were being selected.

Move where we log whether the the wallet methods are available to the
same place we add the classes to make the buttons visible. What was
probably happening was a race condition between the JavaScript that
shows the button and the JavaScript that checks whether the button is
shown to log the message.

Remove the code that just sends some Google Analytics events as we
do not use Google Analytics currently, and have not for some time.

Additionally, log when we remove the Wallet buttons because our
scripts haven't loaded properly.

app/assets/javascripts/browsered/web-payments/index.js

@@ -10,20 +10,6 @@ const { sendLogMessage } = require('../helpers')
 const paymentMethodForms = Array.prototype.slice.call(document.getElementsByClassName('web-payments-container'))
 const standardMethodForm = document.getElementById('card-details')
 
-const initApplePayIfAvailable = () => {
-  if (document.body.classList.contains('apple-pay-available')) {
-    ga('send', 'event', 'Apple Pay', 'Enabled', 'Apple pay available on this device')
-    sendLogMessage(window.chargeId, 'ApplePayAvailable')
-  }
-}
-
-const initGooglePayIfAvailable = () => {
-  if (document.body.classList.contains('google-pay-available')) {
-    ga('send', 'event', 'Google Pay', 'Enabled', 'Google pay available on this device')
-    sendLogMessage(window.chargeId, 'GooglePayAvailable')
-  }
-}
-
 const setupEventListener = () => {
   if (window.PaymentRequest || window.ApplePaySession) {
     paymentMethodForms.forEach(form => {
@@ -52,18 +38,6 @@ const setupEventListener = () => {
 }
 
 const init = provider => {
-  switch (provider) {
-    case 'apple':
-      initApplePayIfAvailable()
-      break
-    case 'google':
-      initGooglePayIfAvailable()
-      break
-    default:
-      initApplePayIfAvailable()
-      initGooglePayIfAvailable()
-      break
-  }
   setupEventListener()
 }
 

app/controllers/client-side-logging.controller.js

@@ -11,7 +11,8 @@ const LOG_CODES = {
   ApplePayMerchantValidationError: 'Error completing Apple Pay merchant validation',
   GooglePayAvailable: 'Google Pay is available on this device',
   GooglePayStarted: 'User chose Google Pay method',
-  GooglePayAborted: 'Google Pay attempt aborted by user'
+  GooglePayAborted: 'Google Pay attempt aborted by user',
+  WebPaymentScriptNotLoaded: 'Wallet payments buttons removed as scripts failed to load'
 }
 
 function log (req, res) {

app/views/charge.njk

@@ -46,6 +46,7 @@
       {% if allowApplePay %}
         if (window.ApplePaySession && window.ApplePaySession.canMakePayments() && window.ApplePaySession.supportsVersion(4)) {
           document.body.classList.add('apple-pay-available')
+          window.payScripts.helpers.sendLogMessage(window.chargeId, 'ApplePayAvailable')
         }
       {% endif %}
       {% if allowGooglePay %}
@@ -54,6 +55,7 @@
           googleAvailableRequest.then(function (canMakeGooglePayPayment) {
             if (canMakeGooglePayPayment) {
               document.body.classList.add('google-pay-available')
+              window.payScripts.helpers.sendLogMessage(window.chargeId, 'GooglePayAvailable')
             }
           })
         }
@@ -64,6 +66,7 @@
           if (!window.payScripts.webPayments) {
             document.body.classList.remove('apple-pay-available')
             document.body.classList.remove('google-pay-available')
+            window.payScripts.helpers.sendLogMessage(window.chargeId, 'WebPaymentScriptNotLoaded')
           }
         })
       {% endif %}