[ECP-9679] DisableButtonPlaceOrder() check does not perform when Magewire loading overlay is still active

[jsmyth98]

Describe the bug
On Hyva Magento checkout pages, if the adyen-cc or adyen-cc-vault payment methods fully render before the Magewire loading screen disappears, then the onChange function will fail to disable the place order button in situations where the state is not valid.

To Reproduce
Steps to reproduce the behaviour:

1. Go to checkout page
2. Enter customer, address and shipping details
3. Choose Adyen card payment option
4. Change shipping method or any other element of the checkout form that invokes the Magewire loading overlay
5. Repeat process until you see the Adyen card payment option fully render before the Magewire overlay disappears
6. Once Magewire overlay disappears, you will notice the place order button has not been disabled

Expected behavior
Place order button should be disabled if the customer has not entered their card details yet.

Magento version
2.4.6

Plugin version
1.0.0-rc1

Screenshots

Desktop (please complete the following information):

• Tested on latest Chrome and Microsoft Edge versions - bug appears on both.

Smartphone (please complete the following information):

• Tested on Safari iOS 18.0.1 - bug cannot be reproduced here.

Additional context
We have a temporary fix in place for this in two files:

• adyen/module-hyva-checkout/view/frontend/templates/payment/method-renderer/adyen-cc-method.phtml
• adyen/module-hyva-checkout/view/frontend/templates/payment/method-renderer/adyen-cc-vault-method.phtml

Fix performs by expanding the onChange function to wait for the Magewire overlay to disappear, before we perform the !state.isValid check.

onChange: function(state, component) { let overlayExists = true; let magewireOverlayParent = document.getElementById("magewire-loader"); if (!magewireOverlayParent || !magewireOverlayParent.firstElementChild) { overlayExists = false; } else { let magewireOverlay = magewireOverlayParent.firstElementChild; } let isAdyenCCActionCompleted = false; const waitForDisplayNone = () => { const magewireOverlayStyle = window.getComputedStyle(magewireOverlay); if (magewireOverlayStyle.display === 'none') { if (!isAdyenCCActionCompleted) { if (!state.isValid) { hyvaCheckout.navigation.disableButtonPlaceOrder(); } else { creditCardHandler.clearMessage(); hyvaCheckout.navigation.enableButtonPlaceOrder(); } isAdyenCCActionCompleted = true; } } else { if (!isAdyenCCActionCompleted) { setTimeout(waitForDisplayNone, 1000); } } }; if(overlayExists){ waitForDisplayNone(); } else { if (!state.isValid) { hyvaCheckout.navigation.disableButtonPlaceOrder(); } else { creditCardHandler.clearMessage(); hyvaCheckout.navigation.enableButtonPlaceOrder(); } } },

[olga-adyen]

Hi @jsmyth98,

Thanks so much for reaching out and contributing to our Hyva project. We’ve created an internal issue to address this and will prioritize it based on our bandwidth.

Please feel free to submit a merge request if you have a fix or enhancement—we’ll happily review it.
Critical bugs and security issues are our top priority. Thank you for your support and patience!

Best regards,
Adyen