Refactor Pricing Plan block to use variants

[msurdi-a8c]

Proposed Changes

This Pull Request refactors the previously multiple times registered Pricing Plan block to use the variations API which greatly simplifies the code and prevents some issues we have found regarding inconsistent titles and description in the editor settings UI after plans configurations are changed.

Testing Instructions

• Run yarn dev --sync in apps/happy-blocks to sync code to your sandbox
• On your sandbox, edit wp-content/themes/a8c/supportforums/editor/gutenberg-wpcom.php and add to the function supportforums_gutenberg_setup_frontend before return $settings; line:

$settings['iso']['blocks']['allowBlocks'][] = 'happy-blocks/pricing-plans';

• On that same file, remove all other Pricing Plans registrations (lines starting with $settings['iso']['blocks']['allowBlocks'][] = 'happy-blocks/*... leaving just the new one.
• Create a new topic, in the editor press / and search for "Upgrade" block.
• Focus the block, and in the block settings pane (gear icon) pre-select one of the available plans. Ensure the block updates to the selected plan in the editor, then pre-select a billing option (yearly/monthly) for the user.
• Submit the post, ensure the block loads in the Post view and shows the correct plan and the pre-selected billing option.
• Repeat the previous steps for the four pricing plans to check all of them render correctly in the view.

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Related to #

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-50452

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-50452&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[lezama]

looks much cleaner 🙌

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7649619

Hi @msurdi-a8c, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

• Upgrade Personal
• Upgrade Pricing Plan
• Pricing Plan upgrade block
• Upgrade to Personal pricing plan
• Upgrade to Premium pricing plan
• Upgrade to Business pricing plan
• Upgrade to eCommerce pricing plan

Thank you in advance!

[a8ci18n]

Translation for this Pull Request has now been finished.