Fix rerendering the payment methods when shipping address changes

view/frontend/web/js/model/adyen-payment-service.js

@@ -4,6 +4,7 @@
  */
 define(
     [
+        'ko',
         'underscore',
         'Magento_Checkout/js/model/quote',
         'Magento_Customer/js/model/customer',
@@ -11,9 +12,10 @@ define(
         'mage/storage',
         'Adyen_Payment/js/bundle',
     ],
-    function (_, quote, customer, urlBuilder, storage, adyenComponent) {
+    function (ko, _, quote, customer, urlBuilder, storage, adyenComponent) {
         'use strict';
         var checkoutComponent = {};
+        var paymentMethods = ko.observable({})
         return {
             /**
              * Retrieve the list of available payment methods from the server
@@ -73,10 +75,16 @@ define(
                     originKey: originKey,
                     environment: environment,
                     paymentMethodsResponse: paymentMethodsResponse,
+                    showPayButton: false
                 });
+
+                paymentMethods(paymentMethodsResponse.paymentMethods);
             },
             getCheckoutComponent: function() {
                 return checkoutComponent;
+            },
+            getPaymentMethodsObservable: function() {
+                return paymentMethods;
             }
         };
     }

view/frontend/web/js/view/payment/adyen-methods.js

@@ -26,13 +26,15 @@ define(
         'uiComponent',
         'Magento_Checkout/js/model/payment/renderer-list',
         'Adyen_Payment/js/model/adyen-payment-service',
-        'Adyen_Payment/js/model/adyen-configuration'
+        'Adyen_Payment/js/model/adyen-configuration',
+        'Magento_Checkout/js/model/quote'
     ],
     function (
         Component,
         rendererList,
         adyenPaymentService,
-        adyenConfiguration
+        adyenConfiguration,
+        quote
     ) {
         'use strict';
         rendererList.push(
@@ -70,8 +72,15 @@ define(
             initialize: function () {
                 this._super();
 
-                adyenPaymentService.retrieveAvailablePaymentMethods().done(function (response) {
+                if (this.isGooglePayEnabled()) {
+                    var googlepayscript = document.createElement('script');
+                    googlepayscript.src = "https://pay.google.com/gp/p/js/pay.js";
+                    googlepayscript.type = "text/javascript";
+                    document.head.appendChild(googlepayscript);
+                }
 
+                quote.shippingAddress.subscribe(function() {
+                    adyenPaymentService.retrieveAvailablePaymentMethods().done(function (response) {
                         var responseJson = JSON.parse(response);
                         var paymentMethodsResponse = responseJson.paymentMethodsResponse;
 
@@ -104,13 +113,7 @@ define(
                             adyenConfiguration.getCheckoutEnvironment()
                         );
                     })
-
-                if (this.isGooglePayEnabled()) {
-                    var googlepayscript = document.createElement('script');
-                    googlepayscript.src = "https://pay.google.com/gp/p/js/pay.js";
-                    googlepayscript.type = "text/javascript";
-                    document.head.appendChild(googlepayscript);
-                }
+                })
             },
             isGooglePayEnabled: function() {
                 return window.checkoutConfig.payment.adyenGooglePay.active;

view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js

@@ -60,7 +60,6 @@ define(
         var brandCode = ko.observable(null);
         var paymentMethod = ko.observable(null);
         var messageComponents;
-        var shippingAddressCountryCode = quote.shippingAddress().countryId;
         var unsupportedPaymentMethods = ['scheme', 'boleto', 'bcmc_mobile_QR', 'wechatpay', /^bcmc$/, "applepay", "paywithgoogle"];
         /**
          * Shareble adyen checkout component
@@ -78,7 +77,8 @@ define(
             initObservable: function () {
                 this._super()
                     .observe([
-                        'brandCode'
+                        'brandCode',
+                        'paymentListObservable'
                     ]);
                 return this;
             }, initialize: function () {
@@ -86,7 +86,7 @@ define(
                 var self = this;
                 this._super();
 
-                fullScreenLoader.startLoader();
+                var paymentMethodsObservable = adyenPaymentService.getPaymentMethodsObservable();
 
                 /**
                  * Create sherable checkout component
@@ -94,8 +94,21 @@ define(
                  */
                 self.checkoutComponent = adyenPaymentService.getCheckoutComponent();
 
-                var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
+                paymentMethodsObservable.subscribe(function() {
+                    console.log('test');
+                    self.checkoutComponent = adyenPaymentService.getCheckoutComponent();
+                    self.setAdyenHppPaymentMethods();
+                });
+            },
+            getAdyenHppPaymentMethods: function () {
+                return this.paymentListObservable;
+            },
+            setAdyenHppPaymentMethods: function () {
+                var self = this;
+
+                fullScreenLoader.startLoader();
 
+                var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
 
                 // create component needs to be in initialize method
                 var messageComponents = {};
@@ -119,20 +132,6 @@ define(
 
                 self.messageComponents = messageComponents;
 
-                fullScreenLoader.stopLoader();
-            },
-            getAdyenHppPaymentMethods: function () {
-                var self = this;
-                var currentShippingAddressCountryCode = quote.shippingAddress().countryId;
-
-                // retrieve new payment methods if country code changed
-                if (shippingAddressCountryCode != currentShippingAddressCountryCode) {
-                    fullScreenLoader.startLoader();
-                    adyenPaymentService.retrieveAvailablePaymentMethods();
-                    shippingAddressCountryCode = currentShippingAddressCountryCode;
-                    fullScreenLoader.stopLoader();
-                }
-
                 // filter unnecessary field details from checkout component
                 // TODO refactor
                 self.checkoutComponent.paymentMethodsResponse.paymentMethods.forEach(function (paymentMethod, index) {
@@ -147,6 +146,8 @@ define(
                 // Get paymentMethod list with filtered details
                 var paymentMethods = self.checkoutComponent.paymentMethodsResponse.paymentMethods;
 
+                var paymentListObservable = ko.observable([]);
+
                 // Iterate through the payment methods and render them
                 var paymentList = _.reduce(paymentMethods, function (accumulator, value) {
                     if (!self.isPaymentMethodSupported(value.type)) {
@@ -227,9 +228,9 @@ define(
                     return accumulator;
                 }, []);
 
-                return paymentList;
+                self.paymentListObservable(paymentList);
+                fullScreenLoader.stopLoader();
             },
-
             // TODO prefill gender in components where it is available
             getGenderTypes: function () {
                 return _.map(window.checkoutConfig.payment.adyenHpp.genderTypes, function (value, key) {