Premium content block: Add a warning message for invalid plans

[BogdanUngureanu]

When a Premium content block is configured with an invalid plan (subscription), the user is not aware that there's a problem with it. To handle this, we can add a warning message that would inform the user that the block is currently in an invalid state.

Fixes Automattic/wp-calypso#49103

Changes proposed in this Pull Request:

• Added a warning message at the top of the block
• Changed the plan (subscription) description with the message "Subscription not found".

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

• On Atomic, use Jetpack beta to switch to this branch
• On Simple, apply D73590-code on your sandbox
• Create a new Premium Content Block
• Connect it to Stripe (I think you'll need to create a Stripe test account :( )
• Configure the subscription in the controls and save the post
• Use incognito and go to the post you just published. Make sure that when you click on the "Subscribe" button the Stripe payment form is loaded
• Back in the editor, enable the Code Editor
• In the content, replace the "selectedPlanId" attribute with a non-existing plan.
• Exit the Code Editor and you should be able to see a warning message saying that the plan is invalid.

Before

After

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello BogdanUngureanu! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D73590-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: February 1, 2022.
• Scheduled code freeze: January 24, 2022.

[dsas]

This fixes the linked issue when changing the selectedPlanId attribute 👍 . It doesn't fix the problem when changing the planId attribute on the jetpack/recurring-payments block.

Screen.Capture.on.2022-01-25.at.10-35-50.mp4

[BogdanUngureanu]

@dsas, thanks for the review, nice finding. I've looked into it and noticed that when you switch back to the visual editor, the block will automatically refresh the planId of the inner block(recurring block) to the correct one. However, in order to persist the changes, the user will have to manually press the update button, which imo, it's not clear that that the operation is needed.

It looks like this might be an edge-case and would require a lot more thought on how to deal with this scenario, what do you think if we handle in a different PR/issue? 🤔

[dsas]

what do you think if we handle in a different PR/issue? 🤔

Definitely the right move 👍 this PR fixes a bigger and more likely scenario so shouldn't be held up on that smaller issue.

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D73590-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[BogdanUngureanu]

Deployed on WPCOM in r239318-wpcom