Add support for products on My Plan page and update layout to match mocks

[delawski]

This PR adds a support for products to the My Plan page and adjusts the page header area layout to match the new designs.

Please note that this PR doesn't add the action buttons like "Manage Plan" or "Manage Purchase". They need to be added in a follow-up PR.

Before

After

Fixes n/a

Changes proposed in this Pull Request:

• Migrate MyPlanCard from Calypso
• Refactor MyPlanHeader so that it supports both plans and products
• Update MyPlanHeader layout to match the latest mock-ups

Testing instructions:

• Go to /wp-admin/admin.php?page=jetpack#/my-plan
• Check if each plan information is displayed there (free and paid plans)
• Check if both Jetpack Backup information is displayed there along with the plan information.

Proposed changelog entry for your changes:

• Add MyPlanCard card
• Refactor MyPlanHeader so that it supports both plans and products

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: December 3, 2019.
Scheduled code freeze: November 26, 2019

Generated by 🚫 dangerJS against 6ffd538

[robertf4]

Excellent work @delawski! I like the code and everything tested well for me so I think this is good to 🚢

[tyxla]

LGTM, let's ship this 🚢

[enejb]

I tested this as well and it worked as expected

[enejb]

Just wanted to note that calypso uses a different Free plan icon.

I don't think this should hold this PR but we should address this in the future.

[delawski]

I was confused about the icons in Jetpack. There is a PlanIcon component that renders yet different icons than what we have here, on My Plan page, and in Calypso. I think this needs some attention and improvements in the future.