Place order button is disabled after re-render of payment component

[rakibabu]

Description

There is a bug in the checkout that prevents people from clicking the place order button when the customer makes a modification in the shipping method or details (see video). The button is by default disabled, even though there is a saved active state for a payment method.

Tested scenarios

Schermopname.2024-02-06.om.12.06.55.mov

1. Go to step 3 'Payment' in the checkout and choose a payment method (excluding credit card or PayPal).
2. Go back to step 2 'Shipping'.
3. Return to step 3 'Payment' via the 'Next' button.
4. Now, the button of the selected payment method no longer works unless you switch to a different payment method.

Fixes

This code fix ensures that when the component is re-rendered, it checks whether a billing address is set. If it is set, the button is activated. This check is necessary because no onchange event is triggered.

[hossam-adyen]

Hi @rakibabu, thanks for your valuable contribution for this case, place order button is disabled as the shopper didn't select a bank yet, once the shopper select a bank, place order button will be active.

Since there is no need to change, I'm going to close this one

[rakibabu]

Hi @hossam-adyen ,

Thanks for testing with IDEAL, other payment methods (like giro pay) have the same problem. So there is a issue here. Please reopen this.

[hossam-adyen]

Hi @rakibabu, thanks for highlight the issue with other payment methods, I left one comment, if you adapt it, this PR could be a good fix, looking forward for more contributions 👍

[hossam-adyen]

How about?

Suggested change

	this.isPlaceOrderAllowed(false);
	this.isPlaceOrderAllowed(quote.billingAddress() != null);
	let configuration = this.buildComponentConfiguration(this.paymentMethod(), this.paymentMethodsExtraInfo());
	this.mountPaymentMethodComponent(this.paymentMethod(), configuration);
	this.isPlaceOrderAllowed(false);
	const configuration = this.buildComponentConfiguration(
	this.paymentMethod(),
	this.paymentMethodsExtraInfo()
	);
	this.mountPaymentMethodComponent(this.paymentMethod(), configuration).then(
	function() {
	const hasBillingAddress = quote.billingAddress() !== null
	this.isPlaceOrderAllowed(hasBillingAddress);
	}
	);

And you need to convert mountPaymentMethodComponent() function to be async, and await for adyenCheckout .mountPaymentMethodComponent like:

            mountPaymentMethodComponent: async function (paymentMethod, configuration)
           {
            .
            .
            .
                    this.paymentComponent = await adyenCheckout.mountPaymentMethodComponent(
                        self.checkoutComponent,
                        self.getTxVariant(),
                        configuration,
                        containerId
                    );
            

[rakibabu]

Hi @hossam-adyen,

Thank you for brainstorming on this issue. There were still some edge cases, and they have been resolved with your suggestions.

[embolden]

I ran across this issue while debugging why isPlaceOrderActionAllowed was false for a non-Adyen payment method and I tried your solution.

I'm getting Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isPlaceOrderAllowed').

Switching the callback to an arrow function retained the proper this context and resolved the TypeError.

Suggested change

	function() {
	const hasBillingAddress = quote.billingAddress() !== null
	this.isPlaceOrderAllowed(hasBillingAddress);
	}
	() => {
	const hasBillingAddress = quote.billingAddress() !== null
	this.isPlaceOrderAllowed(hasBillingAddress);
	}

[rutgerrademaker]

Thanks for this PR! I can confirm this is still an issue on the 9.5 version of the module
We encountered the issue with the German method for Giropay

[rikwillems]

@hossam-adyen I can confirm this is still an issue in the most recent module. The proposed fix solves the issue and make the place order button usable again.