Use Generic Components for Google Pay (#845)

Co-authored-by: marcoss <marcos.silvagarcia@adyen.com>

view/frontend/web/css/styles.css

@@ -1638,3 +1638,15 @@
     overflow:auto;
     padding-top: 0;
 }
+
+/**
+ * Configuration for Google Pay
+ */
+#googlePay.disabled {
+    cursor: pointer;
+    opacity: 0.75;
+}
+
+#googlePay.disabled > * {
+    pointer-events: none;
+}

view/frontend/web/js/view/payment/method-renderer/adyen-google-pay-method.js

@@ -34,7 +34,6 @@ define(
       'Magento_Checkout/js/model/full-screen-loader',
       'mage/url',
       'Magento_Vault/js/view/payment/vault-enabler',
-      'adyenCheckout',
       'Adyen_Payment/js/bundle',
     ],
     function(
@@ -48,17 +47,10 @@ define(
         fullScreenLoader,
         url,
         VaultEnabler,
-        AdyenCheckout,
-        AdyenComponent,
+        AdyenComponent
     ) {
       'use strict';
 
-      /**
-       * Shareble adyen checkout component
-       * @type {AdyenCheckout}
-       */
-      var checkoutComponent;
-
       return Component.extend({
         self: this,
         defaults: {
@@ -90,8 +82,8 @@ define(
             'googlePayAllowed',
           ]);
           return this;
-        }, initialize: function() {
-          var self = this;
+        },
+        initialize: function() {
           this.additionalValidators = additionalValidators;
           this.vaultEnabler = new VaultEnabler();
           this.vaultEnabler.setPaymentCode(this.getVaultCode());
@@ -125,8 +117,7 @@ define(
             },
 
             // Payment
-            amount: self.formatAmount(quote.totals().grand_total,
-                self.getFormat()),
+            amount: self.formatAmount(quote.totals().grand_total, self.getFormat()),
             currency: quote.totals().quote_currency_code,
             totalPriceStatus: 'FINAL',
 
@@ -154,21 +145,19 @@ define(
             buttonType: 'long', // long/short
             showButton: true, // show or hide the Google Pay button
           });
-          var promise = googlepay.isAvailable();
-          promise.then(function(success) {
+          googlepay.isAvailable().then(function() {
             self.googlePayAllowed(true);
             googlepay.mount(self.googlePayNode);
-            $(self.googlePayNode).find('button').prop('disabled', true);
+            self.googlePayNode.addEventListener('click', function () {
+                self.validate();
+            });
           }, function(error) {
             console.log(error);
             self.googlePayAllowed(false);
           });
         },
         isGooglePayAllowed: function() {
-          if (this.googlePayAllowed()) {
-            return true;
-          }
-          return false;
+          return !!this.googlePayAllowed();
         },
         getMerchantAccount: function() {
           return window.checkoutConfig.payment.adyenGooglePay.merchantAccount;
@@ -211,12 +200,12 @@ define(
         },
             /**
              * Return the formatted currency. Adyen accepts the currency in multiple formats.
-             * @param $amount
-             * @param $currency
+             * @param amount
+             * @param format
              * @return string
              */
             formatAmount: function (amount, format) {
-                return Math.round(amount * (Math.pow(10, format)))
+                return Math.round(amount * (Math.pow(10, format))).toString();
             },
             isVaultEnabled: function () {
                 return this.vaultEnabler.isVaultEnabled();
@@ -230,8 +219,8 @@ define(
             getCheckoutEnvironment: function () {
                 return window.checkoutConfig.payment.adyenGooglePay.checkoutEnvironment;
             },
-            onPaymentMethodContentChange: function (data, event) {
-                $(this.googlePayNode).find('button').prop('disabled', !this.validate());
+            onPaymentMethodContentChange: function () {
+                $(this.googlePayNode).toggleClass('disabled', !this.validate());
             }
         });
     }

view/frontend/web/template/payment/google-pay-form.html

@@ -51,7 +51,7 @@
             <!--/ko-->
         </div>
         <div class="field number googlePay">
-            <div class="checkout-component-dock" afterRender="renderGooglePay()" data-bind="attr: { id: 'googlePay'}">
+            <div class="checkout-component-dock disabled" afterRender="renderGooglePay()" data-bind="attr: { id: 'googlePay'}">
                 <!-- ko ifnot: isGooglePayAllowed() -->
                 Google Pay is not available
                 <!--/ko--></div>