[ECP-9940] Observe countyId before mounting the checkout component (#3282)

Author: candemiralp

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

@@ -149,18 +149,28 @@ define(
             },
             // Build AdyenCheckout library and creates the payment method component
             createCheckoutComponent: async function () {
-                if (!this.checkoutComponent) {
-                    const paymentMethodsResponse = adyenPaymentService.getPaymentMethods();
-                    const countryCode = quote.billingAddress().countryId;
-
-                    this.checkoutComponent = await adyenCheckout.buildCheckoutComponent(
-                        paymentMethodsResponse(),
-                        countryCode,
-                        this.handleOnAdditionalDetails.bind(this)
-                    )
-                }
+                const billingAddressObservable = quote.billingAddress;
+                let self = this;
+
+                if (billingAddressObservable() && billingAddressObservable().countryId) {
+                    if (!this.checkoutComponent) {
+                        const paymentMethodsResponse = adyenPaymentService.getPaymentMethods();
+
+                        this.checkoutComponent = await adyenCheckout.buildCheckoutComponent(
+                            paymentMethodsResponse(),
+                            billingAddressObservable().countryId,
+                            this.handleOnAdditionalDetails.bind(this)
+                        )
+                    }
 
-                this.renderCCPaymentMethod();
+                    this.renderCCPaymentMethod();
+                } else {
+                    billingAddressObservable.subscribe(function (updatedBillingAddress) {
+                        if (updatedBillingAddress && updatedBillingAddress.countryId) {
+                            self.createCheckoutComponent();
+                        }
+                    });
+                }
             },
             /**
              * Returns true if card details can be stored

view/frontend/web/js/view/payment/method-renderer/adyen-cc-vault-method.js

@@ -130,18 +130,28 @@ define([
 
         // Build AdyenCheckout library and creates the payment method component
         createCheckoutComponent: async function() {
-            if (!this.checkoutComponent) {
-                const paymentMethodsResponse = adyenPaymentService.getPaymentMethods();
-                const countryCode = quote.billingAddress().countryId;
-
-                this.checkoutComponent = await adyenCheckout.buildCheckoutComponent(
-                    paymentMethodsResponse(),
-                    countryCode,
-                    this.handleOnAdditionalDetails.bind(this)
-                );
-            }
+            const billingAddressObservable = quote.billingAddress;
+            let self = this;
 
-            this.renderCheckoutComponent();
+            if (billingAddressObservable() && billingAddressObservable().countryId) {
+                if (!this.checkoutComponent) {
+                    const paymentMethodsResponse = adyenPaymentService.getPaymentMethods();
+
+                    this.checkoutComponent = await adyenCheckout.buildCheckoutComponent(
+                        paymentMethodsResponse(),
+                        billingAddressObservable().countryId,
+                        this.handleOnAdditionalDetails.bind(this)
+                    );
+                }
+
+                this.renderCheckoutComponent();
+            } else {
+                billingAddressObservable.subscribe(function (updatedBillingAddress) {
+                    if (updatedBillingAddress && updatedBillingAddress.countryId) {
+                        self.createCheckoutComponent();
+                    }
+                });
+            }
         },
 
         handleOnAdditionalDetails: function (result) {

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

@@ -55,6 +55,7 @@ define(
             selectedGiftcardPaymentMethod: ko.observable(null),
             giftcardTitle: ko.observable(null),
             icon: ko.observable(window.checkoutConfig.payment.adyen.giftcard.icon),
+            billingAddressAvailable: ko.observable(false),
 
             initialize: async function () {
                 this._super();
@@ -74,6 +75,8 @@ define(
                     this.fetchGiftcardPaymentMethods(paymentMethodsObserver());
                     this.fetchRedeemedGiftcards();
                 }
+
+                this.billingAddressAvailable(quote.billingAddress() !== null);
             },
 
             addNewGiftcard: function () {

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

@@ -80,6 +80,7 @@ define(
 
                 this._lastGrandTotal = undefined;
 
+                // This event is triggered when the total changes or billing address is added (virtual products)
                 quote.totals.subscribe(function (totals) {
                     if (!totals) {
                         return;
@@ -177,20 +178,24 @@ define(
 
             // Build AdyenCheckout library and creates the payment method component
             createCheckoutComponent: async function(forceCreate = false) {
-                if (!this.checkoutComponent || forceCreate) {
-                    const paymentMethodsResponse = adyenPaymentService.getPaymentMethods();
-                    const countryCode = quote.billingAddress().countryId;
-
-                    this.checkoutComponent = await adyenCheckout.buildCheckoutComponent(
-                        paymentMethodsResponse(),
-                        countryCode,
-                        this.handleOnAdditionalDetails.bind(this),
-                        this.handleOnCancel.bind(this),
-                        this.handleOnSubmit.bind(this),
-                        this.handleOnError.bind(this)
-                    );
+                const billingAddressObservable = quote.billingAddress;
+                let self = this;
 
-                    this.renderCheckoutComponent();
+                if (billingAddressObservable() && billingAddressObservable().countryId) {
+                    if (!this.checkoutComponent || forceCreate) {
+                        const paymentMethodsResponse = adyenPaymentService.getPaymentMethods();
+
+                        this.checkoutComponent = await adyenCheckout.buildCheckoutComponent(
+                            paymentMethodsResponse(),
+                            billingAddressObservable().countryId,
+                            this.handleOnAdditionalDetails.bind(this),
+                            this.handleOnCancel.bind(this),
+                            this.handleOnSubmit.bind(this),
+                            this.handleOnError.bind(this)
+                        );
+
+                        this.renderCheckoutComponent();
+                    }
                 }
             },
 

view/frontend/web/template/payment/giftcard-form.html

@@ -43,6 +43,7 @@
             <!--/ko-->
         </div>
 
+        <!-- ko if: billingAddressAvailable -->
         <div data-bind="attr: {'id': getCode() + '_new_giftcard_wrapper'}">
             <div class="field" data-bind="attr: {'id': getCode() + '_giftcard_button_wrapper'}, visible: canAddNewGiftCard">
                 <button data-bind="click: addNewGiftcard, attr: {'class': 'adyen-checkout__button'}">
@@ -59,6 +60,7 @@
                 </select>
             </div>
         </div>
+        <!-- /ko -->
 
         <h2 data-bind="attr: {'class': 'adyen-giftcard-header'}, visible: giftcardTitle, text: giftcardTitle"></h2>
         <div class="field" data-bind="attr: {'id': 'giftcard-component-wrapper'}"></div>