[feature]: Display page level error and disable checkout button when no available payment methods

[sirugh]

If you setup Magento locally and then try to purchase a product you'll see a broken payment method on the checkout and you'll be unable to submit the checkout further.

Replication Steps:

• Install Magento 2.3.5-p1 using composer, install Venia sample data
• On latest develop point your instance to the new composer installation
• Ensure you have the CHECKOUTBRAINTREETOKEN set to something valid
• Navigate to a product page, add it to cart, then visit /checkout
• Complete the shipping address and method
• (x) Notice the payment method is skipped and renders as an empty box and pressing "Review Order" disables the button but nothing happens (After [feature]: Display "no payment method available" message if no allowed or configured payment methods are present #2855 there will be an error message instead of empty box)


Acceptance Criteria

• When no payment methods are available, an error is displayed in the payment information section([feature]: Display "no payment method available" message if no allowed or configured payment methods are present #2855)
• When no payment methods are available, a page level error is displayed
• When no payment methods are available, the "review order" button is disabled (greyed out) before any user action.

Test Plan

• Verify error message is displayed in the Payment Information section, when no payment methods are available
• Verify error message is displayed at the page level, when no payment methods are available
• Verify the "Review Order" button is disabled when no payment methods are available

Developer Notes

• I'm not sure how to repro the issue with invalid backend config, but you can repro in checkout by turning availablePaymentMethods into an empty array in your local code. A page level error and disabling the review order button will take some additional queries to check for valid methods at the checkout page level.

[m2-assistant]

Hi @sirugh. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[ankurvr]

@sirugh As per the screenshot shown the title "Checkout" (check below) is not there in current design. Do you want me to add that too?

[ankurvr]

@sirugh Can you please also verify and approve the form error message for Guest user and Logged in user both in terms of UI?

[sirugh]

@magento export issue to Jira project PWA as Story

[magento-engcom-team]

✅ Jira issue (https://jira.corp.magento.com/browse/PWA-1280) is successfully created for this issue.

[ankurvr]

@sirugh Can i still continue working on this issue after after creating internal Jira ticket? Or it will be taken care by Magento team from here?

[sirugh]

You can still work on this, of course! Can you rebase and handle the merge conflicts? Also there was some initial feedback given.