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,47 +72,48 @@ define(
             initialize: function () {
                 this._super();
 
-                adyenPaymentService.retrieveAvailablePaymentMethods().done(function (response) {
-
-                    var responseJson = JSON.parse(response);
-                    var paymentMethodsResponse = responseJson.paymentMethodsResponse;
-                    
-                    // TODO check if this is still required or if can be outsourced for the generic component, or checkout can create a ratepay component
-                    /*if (!!window.checkoutConfig.payment.adyenHpp) {
-                        if (JSON.stringify(paymentMethods).indexOf("ratepay") > -1) {
-
-                          var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
-                           var dfValueRatePay = self.getRatePayDeviceIdentToken();
-
-                           window.di = {
-                               t: dfValueRatePay.replace(':', ''),
-                               v: ratePayId,
-                               l: 'Checkout'
-                           };
-
-                           // Load Ratepay script
-                           var ratepayScriptTag = document.createElement('script');
-                           ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
-                           ratepayScriptTag.type = "text/javascript";
-                           document.body.appendChild(ratepayScriptTag);
-                        }
-                    }*/
-
-                    // Initialises adyen checkout main component with default configuration
-                    adyenPaymentService.initCheckoutComponent(
-                        paymentMethodsResponse,
-                        adyenConfiguration.getOriginKey(),
-                        adyenConfiguration.getLocale(),
-                        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);
                 }
+
+                quote.shippingAddress.subscribe(function() {
+                    adyenPaymentService.retrieveAvailablePaymentMethods().done(function (response) {
+                        var responseJson = JSON.parse(response);
+                        var paymentMethodsResponse = responseJson.paymentMethodsResponse;
+
+                        // TODO check if this is still required or if can be outsourced for the generic component, or checkout can create a ratepay component
+                        /*if (!!window.checkoutConfig.payment.adyenHpp) {
+                            if (JSON.stringify(paymentMethods).indexOf("ratepay") > -1) {
+
+                              var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
+                               var dfValueRatePay = self.getRatePayDeviceIdentToken();
+
+                               window.di = {
+                                   t: dfValueRatePay.replace(':', ''),
+                                   v: ratePayId,
+                                   l: 'Checkout'
+                               };
+
+                               // Load Ratepay script
+                               var ratepayScriptTag = document.createElement('script');
+                               ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
+                               ratepayScriptTag.type = "text/javascript";
+                               document.body.appendChild(ratepayScriptTag);
+                            }
+                        }*/
+
+                        // Initialises adyen checkout main component with default configuration
+                        adyenPaymentService.initCheckoutComponent(
+                            paymentMethodsResponse,
+                            adyenConfiguration.getOriginKey(),
+                            adyenConfiguration.getLocale(),
+                            adyenConfiguration.getCheckoutEnvironment()
+                        );
+                    })
+                })
             },
             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) {