Customer Home: Add a welcome banner.

[kwight]

Add a welcoming banner to Customer Home, so that users that have never been redirected there before can understand why they're there and how the page can help them.

Fixes #39178

Testing Instructions

• Load this branch and select a site's Customer Home ("My Home") page.
• Enable logging for Tracks in the console with localStorage.debug = 'calypso:analytics:*'.
• Open DevTools' Network tab.
• Click the X to close.
• Verify a successful POST call to /me/preferences was made.
• Confirm in the console that the Tracks event fired.
• To retest, use the WP.com API console to POST to /me/preferences with {"dismissible-card-home-welcome-banner-dismissed":null} in the calypso_preferences body.

[matticbot]

Test live: https://calypso.live/?branch=add/customer-home-welcome-banner

[gwwar]

Thanks @kwight, giving tentative approval here 👍

Verified that the banner dismisses as a user preference, and dispatches the expected analytics.

I think the following screens are okay, but might be visually a lot to process:

1. New User, launches site:

2. New User completes checklist:

As an aside, what do folks think about adding white-space:no-wrap to the buttons on the page. It looks pretty weird when they wrap to two lines:

With nowrap:

[lcollette]

I agree with @gwwar. Those screens are a lot to process visually.

The congratulatory messages should ideally be using the same component. It's a bit strange that they're in different locations with their own visual styles. Can we align those, @danhauk?

I'm also questioning whether both the welcome and congratulatory banners should be displayed together. If you've reached the launched your site step, is a welcome banner still relevant?

As an aside, what do folks think about adding white-space:no-wrap to the buttons on the page.

We should definitely do that. :)

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~297 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home       +969 B  (+0.3%)     +297 B  (+0.4%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[danhauk]

I'm also questioning whether both the welcome and congratulatory banners should be displayed together. If you've reached the launched your site step, is a welcome banner still relevant?

I agree. If there's a congratulatory banner present we should mark the welcome banner as dismissed so it doesn't show up. I'm not sure this will really be an issue if we add an age check to only show the welcome banner for users who have older sites as mentioned in #39557 (comment), but it's best to add that check to be safe.

@kwight Can we also suppress any upsells to give priority to this welcome banner and avoid stacking large banner cards? Things like this:

[kwight]

As an aside, what do folks think about adding white-space:no-wrap to the buttons on the page. It looks pretty weird when they wrap to two lines

Yep, agree; #39609 for consideration. @lcollette

[kwight]

To summarize our conditions, we display the welcome banner if:

• there is no congratulatory banner to be shown, and
• the user was created before 2019-08-06, and
• the user has not dismissed it (handled by the component automatically)

Also, we only display the upsell banner if we are not displaying the welcome banner.

I think I've got that all covered now 👍

[gwwar]

Thanks Kirk, this is good to go after removing the site launch check.

[lcollette]

Thanks, Kirk!