Plans: First pass at adding ProgressBar to PlanThankYouCard for Jetpack sites

[ebinnion]

This PR is meant to add a colorized ProgressBar to the JetpackThankYouCard component. It relies on #11865 being merged first.

You can view @rickybanister's mocks for colorized thank you pages here: p6TEKc-105-p2

Screenshots will come after I merge the other PR. Screenshots below.

cc @lezama @enejb for code review.

To test:

• You can test the WPCOM plans flow by creating a new user and following the NUX flow
• For Jetpack, you can purchase a plan for your Jetpack site, and then you should land on the auto-config flow
• You can test previous purchases by going to: http://calypso.localhost:3000/checkout/thank-you/:siteId:/:receiptId:

[matticbot]

Test live: https://calypso.live/?branch=update/progress-bar-plan-colors

[ebinnion]

Here are some screenshots of how the ProgressBar looks when integrated into the colorized plan cards:

Note: These are not all personal plans. I manually changed the plan slug to test out the color schemes. Green would be premium and purple would be business.

Here's a demo video of the ProgressBar in action:

[ebinnion]

Here's a video after fixing the logic for generating how much progress has been made. Notice that the progress actually starts at 0 now.

[ebinnion]

I tested the new WPCOM user flow for regressions, and all looks well. 👍

[ebinnion]

I tweaked the ProgressBar colors after some feedback from @rickybanister in Slack. Here are updated screenshots.

[rickybanister]

That looks perfect @ebinnion! You're too fast.

[folletto]

This is great! Well done y'all!

[lezama]

couldn't this be just action={ action }?

[ebinnion]

Not in this case. renderAction is a reference to a function, and we need to invoke it.

[lezama]

nice work!