Display custom licensing prompt dialog upon connecting Jetpack #7490336

Completes: 1202796695664022-as-1202796695664096/f
Project Thread: p1HpG7-gBI-p2

This PR Updates the licensing prompt dialog to reflect the changes as given in the new Figma design

Proposed Changes

• Enhance LicensingPromptDialog and make it backward compatible.
• Create a new UserLicensesDialog component inside client/my-sites/plans/jetpack-plans/product-store and wire it up
• Hide existing dialog behind feature-flag
• Disable jetpack/pricing-page-rework-v1 feature for the development environment as discussed here: p1661157546673919-slack-C03RCHNVC0H

Testing Instructions

1. Goto https://cloud.jetpack.com/pricing and purchase a product e.g. Backup but do not activate it for any site
2. Boot up this PR by running git fetch && git checkout update/licensing-prompt-dialog
3. Run yarn start and open http://calypso.localhost:3000/
4. Create a JN site
5. While connecting Jetpack, pause on the plans page i.e. https://wordpress.com/jetpack/connect/plans/:site
6. Copy the above URL and open it in another tab after replacing https://wordpress.com with http://calypso.localhost:3000
7. Confirm that you see the license prompt dialog on both and both look the same.
8. Now in the tab with calypso.localhost URL add &flags=jetpack/pricing-page-rework-v1 to the URL and hit enter. It will enable the feature flag.
9. Confirm that you see the new licensing prompt dialog.
10. Confirm that you see the license activation banner at the top
11. Confirm that the design is as defined in Figma
12. Now again goto https://cloud.jetpack.com/pricing and purchase another product e.g. Security but do not activate it for any site.
13. Reload the pages mentioned in step 4 and 5
14. Confirm the above steps for multiple pending licenses. Please note the Slack conversation (below) for that.

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)?

Figma: m0y1jHTuDpvMPkFsOJBoNP-fi-3669%3A110210
Slack conversation: p1661150917743419-slack-C03RCHNVC0H

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • 0-as-1202796695664096