Plans: Color PlanThankYouCard based on plan

[ebinnion]

This PR is meant to colorize the plans thank you card, and use the PlanIcon component, based on the type of plan the user has purchased. It is an improvement that @rickybanister suggested.

You can view @rickybanister's mocks here: p6TEKc-105-p2

Here are some screenshots for how things currently look in this PR.

Note: In all screenshots, you'll notice the name of the plan and pricing is off. This is because I manually changed the plan type to get the screenshots. Further, the auto-config list below the thank you card should only show for Jetpack sites in the development environment. Lastly, you'll notice that there the background for the icons doesn't stand out. We'll need to fix this before merging.

Free Plan

Personal Plan

Premium Plan

Business Plan

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/plans-thank-you-icons-colors

[beaulebens]

Neat! A couple things I noticed from the screenshots above vs the mocks:

1. Shouldn't they all have a circle around the pencil/pen icon?
2. On the Personal Plan one, there's an icon/emoji floating over the pen icon, but I wouldn't expect that to be the case (I'd expect the pen/circle combo to be the "highest" thing in the design).
3. I think the checkmarks down the bottom are supposed to match the main color of the specific plan (yellow, purple, etc)

I'll let @rickybanister handle the rest :)

[ebinnion]

Shouldn't they all have a circle around the pencil/pen icon?

I had noticed that and mentioned it in the top comment. @rickybanister suggested that either that header or the icon would need to be darkened by 10%, and that he'd need to try it out to know.

On the Personal Plan one, there's an icon/emoji floating over the pen icon, but I wouldn't expect that to be the case (I'd expect the pen/circle combo to be the "highest" thing in the design).

Good catch. I'll look into that!

I think the checkmarks down the bottom are supposed to match the main color of the specific plan (yellow, purple, etc)

👍 . I'll handle this in another PR since it's another component that handles the auto-config.

[ebinnion]

I pushed a commit so that the background icons are in the background and do not overlap the plan icon or text.

[ebinnion]

Updated screenshots after making sure the PlanIcon has a background and that the background icons stay in the background.

[rickybanister]

Coming along nicely—I haven't tested yet, but do we have the progress bar implemented while we set things up?

[ebinnion]

I have not yet implemented the progress bar. I plan on doing that in another PR.

[rickybanister]

This seems ready to merge (design-wise) in that case.

[ebinnion]

At this point, I've finished rebasing after #11702 went in. I also made sure to do some testing and grab screenshots for how this will change the current implementation of the WPCOM plan thank you card usage.

Here are those:

cc @danhauk @drewblaisdell @gziolo who seem to have worked on PlanThankYouCard and ThankYouCard so far.

cc @lezama and @enejb for code review.

[rickybanister]

Beautiful!

cc @shaunandrews since this was his original design.

[lezama]

Code looks good to me.

Probably not from this PR but I noticed that it works with a site_id and a receiptId of another site that I own. Also confirmed that it doesn't work with a random receiptId.

[lezama]

🚢

[gziolo]

Code changes look good 👍

Probably not from this PR but I noticed that it works with a site_id and a receiptId of another site that I own.

Yes, it needs to behave this way to make sure it also works with the PayPal flow where we redirect from the different site to the thank you page :)

@danhauk Should we use different color also for domain purchases? We can create a follow up if we agree on something.

[gziolo]

I'm wondering if we can create mixin that would take care of all color changes to simplify this file.

Something along those lines:

.plan-thank-you-card.is-free-plan {
    @include thank-you-card-color( $blue-medium );
}

[gziolo]

Probably not from this PR but I noticed that it works with a site_id and a receiptId of another site that I own.

@lezama Now I see what you mean, you can enter whatever you want as site_id and it is still going to work.

[gziolo]

I introduced mixin with a314f20 to save some lines in CSS file :) If you don't like it, you can simply remove my commit :)

I tested all 3 paid plans and it all works as expected.

I have only one concern. We probably should display different copy when upgrading plan. I don't think this one fits well when you upgrade from Premium to Business:

In such case the site most likely isn't new. Should we open a follow up PR? /cc @ranh

[gziolo]

LGTM 👍

[ranh]

Thanks for the ping @gziolo. I agree that this message doesn't make much sense if you're getting a plan for an existing site (either going from free to paid or upgrading to higher level plan).

The focus of this part of the message is not the plan at all, rather the "new site". So it seems this is specific to NUX.

In fact the plan is described as just something that had to be "taken care of", which is a very strange thing to tell users here. Should we try for a more positive message?

I can suggest different copy if needed, but just want to get a better idea of what we would want to say.

[rickybanister]

@gziolo and @danhauk and @ranh I'd suggest the 'free' blue-medium color for the domain purchase, and perhaps we put back in place the checkmark icon (or perhaps a domain-specific icon) for those. Our focus was to make the card match the plan and didn't consider the domain.

[ebinnion]

@gziolo Very nice with the mixin! Great idea. ;)

I'm going to go ahead and merge as the copy changes are pre-existing and this card should only be showing for new WPCOM users that purchase a WPCOM plan. We can address domain-specific purchase styling and copy in another PR.

[gziolo]

We can address domain-specific purchase styling and copy in another PR.

Yes, we will discuss if stay with green or change to blue for /domains flow.

if ( isNewUser && wasDotcomPlanPurchased ) {

I figured out why I was seeing new thank you page when upgrading plan. We check account creation date. I don't think it is going to happen to users, it would be rather super edge case.