Highlight incompatible payment gateways in the C&C Blocks

[tarhi-saad]

Current behavior

Currently, while using our Blocks, the shopper is not warned whether one of his payment gateways is incompatible with the C&C Blocks. Without any explanation, he will only notice that his payment gateway is missing if he checks the Checkout Block page on the front end. This can cause confusion and frustration!

Expected behavior

Based on the results from the research spike: pdFofs-mB-p2, we decided to start implementing detecting payment gateways in the C&C Blocks and showing a notice for it:

• Implement the logic for detecting payment gateways in the C&C Blocks editor pages
• Show a notice at the top on the settings sidebar with the list of incompatible gateways (The design is available here: pca54o-4Hm-p2#comment-4760)
• Hide the Update page settings notice while the notification for incompatible payment gateways is visible.
• Hide the general incompatibility notice in favor of these more useful contextual notices. When the user dismisses it, we can show it again if it was not dismissed.
• Capitalizing the label for the button on the page settings notification (see image):

Screenshots

Current:

Expected:

[elizaan36]

hey @tarhi-saad 👋 Just updated the screenshot above and commented on #7412 with a small tweak to the placement of the icon. This is to align with usage of the WP notice component.