Email: Create Titan Mail checkout flow

[eltongo]

Changes proposed in this Pull Request

This PR creates the checkout flow for Titan Mail.

Testing instructions

• Enable the titan/phase-2 flag by appending ?flags=titan/phase-2 to the Calypso URL
• Try to add Titan Mail to one of your domains, it should lead to this form where you need to specify the quantity:

Verify that Cancel button works as expected by sending you to the /email page, and the Continue button adds the product to the cart.

[matticbot]

Test live: https://calypso.live/?branch=add/titan-checkout

[matticbot]

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

App Entrypoints (~22 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +85 B  (+0.0%)      +22 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~5193 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
email                     +19118 B  (+5.5%)    +4968 B  (+5.2%)
checkout                    +802 B  (+0.1%)     +204 B  (+0.1%)
site-purchases              +349 B  (+0.0%)      +82 B  (+0.0%)
purchases                   +349 B  (+0.0%)      +78 B  (+0.0%)
domains                     +349 B  (+0.0%)      +84 B  (+0.0%)
woocommerce                 +322 B  (+0.0%)      +61 B  (+0.0%)
themes                      +322 B  (+0.1%)      +71 B  (+0.1%)
theme                       +322 B  (+0.1%)      +71 B  (+0.1%)
signup                      +322 B  (+0.1%)      +71 B  (+0.1%)
settings-writing            +322 B  (+0.1%)      +71 B  (+0.0%)
settings-security           +322 B  (+0.1%)      +71 B  (+0.1%)
settings-performance        +322 B  (+0.1%)      +71 B  (+0.1%)
settings-jetpack            +322 B  (+0.1%)      +71 B  (+0.1%)
settings-discussion         +322 B  (+0.1%)      +71 B  (+0.1%)
settings                    +322 B  (+0.1%)      +71 B  (+0.0%)
plans                       +322 B  (+0.0%)      +71 B  (+0.0%)
marketing                   +322 B  (+0.1%)      +71 B  (+0.0%)
jetpack-search              +322 B  (+0.2%)      +71 B  (+0.2%)
jetpack-connect             +322 B  (+0.0%)      +71 B  (+0.0%)
jetpack-cloud-pricing       +322 B  (+0.1%)      +71 B  (+0.1%)
home                        +322 B  (+0.1%)      +71 B  (+0.1%)
help                        +322 B  (+0.1%)      +71 B  (+0.0%)
export                      +322 B  (+0.1%)      +71 B  (+0.1%)
customize                   +322 B  (+0.1%)      +71 B  (+0.1%)
activity                    +322 B  (+0.1%)      +71 B  (+0.0%)
account-close               +322 B  (+0.1%)      +71 B  (+0.1%)

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

Async-loaded Components (~269 bytes added 📈 [gzipped])

name                                                              parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal                        +802 B  (+0.1%)     +204 B  (+0.1%)
async-load-design-blocks                                               +322 B  (+0.0%)      +65 B  (+0.0%)
async-load-design                                                      +322 B  (+0.0%)      +71 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice       +322 B  (+0.7%)      +71 B  (+0.6%)
async-load-calypso-blocks-inline-help-popover                          +322 B  (+0.1%)      +71 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[klimeryk]

From a functional point of view, LGTM. I tested without the feature flag and did not notice any regressions.
The only functional nitpick is about how these products are rendered in the shopping cart:

We need to include the domain part somewhere in there, otherwise it's completely unclear which one if for which domain. It's also not visible how many items (emails) you're buying and I think that's a very useful information to include. Apologies if this is already on your radar 🙇

Code-wise, there's the suggestion about using selectors, but that's pending Payton's feedback. Since this is behind a feature flag, it should be to safe to merge as-is and iterate, especially if it's blocking further PRs.

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.