Update email comparison page layout

[daledupreez]

Changes proposed in this Pull Request

• This PR replaces Update the email comparison page to use a stacked card layout and embed account creation #51062 with an implementation that uses a new EmailProvidersStackedComparison component to render the new email comparison page layout and embed the relevant creation forms for Email and Google Workspace.
• The design is in pcDL0W-79-p2, and this hews fairly closely to those designs.
• Note that this PR is based on Extract email features into separate file and clean up Titan feature flag code #51298, which extracts the feature lists for the various email providers.
• The feature is protected by the titan/provision-mailboxes feature flag.

Screenshots

Email expanded (the default)

Google Workspace/G Suite expanded

Email Forwarding expanded

Testing instructions

Navigate to the live branch, and then add ?flags=titan/provision-mailboxes to the URL.

• Try to add each of Email, Google Workspace, and Email Forwarding to your account.
• For each provider, check that the error handling is working, and that we track clicks on the expand buttons as well as the "Add " buttons.
• You should verify that the shopping cart entry created for Titan and Google Workspace includes the correct user/mailbox data. (We are addressing some back end bugs for Titan, so full testing here may trip over those issues.)

Related to #51062
Related to #51298

[matticbot]

Test live: https://calypso.live/?branch=update/email-comparison-page-layout

[matticbot]

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

Sections (~1369 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
email      +8668 B  (+2.0%)    +1369 B  (+1.1%)

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.

[hambai]

Okay I tested this and there is one more error that needs fixing, but otherwise the code looks good.

I have a few minor questions/observations:

1. If there is a titan mailbox in the cart already you can't add more mailboxes - you get the following error: Only one email product per domain is supported in the cart at a time but that is a bit confusing as technically we allow you to purchase more than one mailbox at once - but you need to remove the cart item first. Maybe we can improve the error message? Or show the cart button in the email comparison page?
2. I'm a bit confused by the location of the "Remove mailbox" button. Shouldn't it go next to the "Add mailbox" button? Also - nitpicking here - should we disable/hide the "Remove mailbox" button if there is only one mailbox?
3. The actual Titan mailboxes are not rendered in the cart item (contrary to GSuite where users are shown) in the cart line item. I guess we'll fix that in a separate PR (just want to make sure it's on our radar)

[hambai]

This (the addProductsToCart param) should be an array - otherwise it throws an error. I tested it like this and it works:

Suggested change

	.addProductsToCart( fillInSingleCartItemAttributes( cartItem, productsList ) )
	.addProductsToCart( [ fillInSingleCartItemAttributes( cartItem, productsList ) ] )

[daledupreez]

Thanks for reviewing and finding that bug, @hambai! 😳

To respond to your observations:

1. If there is a titan mailbox in the cart already you can't add more mailboxes - you get the following error: Only one email product per domain is supported in the cart at a time but that is a bit confusing as technically we allow you to purchase more than one mailbox at once - but you need to remove the cart item first. Maybe we can improve the error message? Or show the cart button in the email comparison page?

This is a side-effect of D57740-code, which added these checks to ensure that we don't allow Titan and G Suite to be bought together, as well as preventing multiple subscriptions for the same domain. We can definitely improve the messaging!

2. I'm a bit confused by the location of the "Remove mailbox" button. Shouldn't it go next to the "Add mailbox" button? Also - nitpicking here - should we disable/hide the "Remove mailbox" button if there is only one mailbox?

I used this approach for consistency with the G Suite controls on both counts. I am hoping we can improve both of them once we map out a better approach.

3. The actual Titan mailboxes are not rendered in the cart item (contrary to GSuite where users are shown) in the cart line item. I guess we'll fix that in a separate PR (just want to make sure it's on our radar)

I've added a tracking card for this.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5610536

Thank you @daledupreez for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.