#5748853 New emails home screen

This is an initial PR to create the new/updated email management screens. @hambai built most of the infrastructure, but we delayed some work to wait for updated designs. The code is heavily based on #50790 but in the end it was easier to start clean and manually move stuff from the old PR.

The PR has been updated to fold in the updated designs in pcDL0W-al-p2, though we still have a ways to go before we get all the elements in.

Changes proposed in this Pull Request

• Add the new emails home screen component
• Introduce separate components for email list, email status, mailbox list, subscription management, etc
• Wire in the new general-purpose REST API for email accounts (implemented in D60197-code) — more on this in the TODO/Known Issues section

Screenshots

The email list:

Email forwards:

Note that the list of email forwards also needs D60279-code to land.

WordPress.com Email:

G Suite:

Known Issues and TODOs

This PR is mostly intended to land the core functionality behind the email/centralized-home feature flag so we can iterate with much smaller patches. It also means we can get some clear feedback from design on how to prioritise remaining tasks.

We still have the following items outstanding:

• Verify that the implementation matches the mobile designs
• Show warnings for the email subscription; it should be similar to how we render domain warnings in the domain management screen
• Add the “no domains” component
• Show the “needs action” state in the email list
• Show the target address and verification button for email forwarding mailboxes
• Implement the mailbox action menu and actions
• Add tracking for all the things
• Show an empty mailbox list when there are no mailboxes set up
• Add loading mailboxes placeholder component
• Move the account/mailbox loading into Redux and the global state
• D60334-code needs to land on the back end to identify G Suite accounts (we currently show Google Workspace due to this bug)

Testing instructions

• Apply D60197-code on your sandbox and ensure that you’re routing requests to your sandbox.
  • If that patch has already been deployed (which should happen early on 2021-04-19), apply D60279-code to your sandbox to add email forwarding addresses.
• Go to http://calypso.localhost:3000/email?flags=email/centralized-home or to /email?flags=email/centralized-home on the calypso.live branch
• Verify general site email page works when there is only one domain for the selected site (i.e. /email/siteSlug.tld)
• Verify that you can see all the active email services for the selected site when you have multiple domains with email services
• Verify that you see a list of domains that don’t have email under the “Other domains” section of the page
  • If you happen to have domains that don’t currently allow email purchases (which are mostly triggered due to the domain being expired or due to it being owned by another user), ensure that the “Add Email” button is not displayed.
• Verify that you can navigate to each service/domain combination, and on each of those pages verify the following:
  • We show an appropriate title (with the exception of G Suite, which is due to a bug addressed by D60334-code)
  • We show the correct logo in the header, and offer subscription management options for WordPress.com Email, G Suite, and Google Workspace, but don’t offer the subscription toggles for email forwarding and Titan purchases from the MVP period. (This last may not be easy to test/verify — we can defer that.)
  • For all providers, we show the list of mailboxes/forwards _(with the possible exception of email forwards, which depend on D60279-code)
  • For all providers, we show a menu item to add a new mailbox, and clicking on the item takes you to the correct page
  • For WordPress.com Email, G Suite, and Google Workspace, we show a “Manage all mailboxes” item with an external link indicator, and clicking on it takes you to the correct admin UI. If you’re running via calypso.localhost, the WordPress.com Email link should not be internal, as we show the iframed control panel in that case.
  • For WordPress.com Email, G Suite, and Google Workspace, we show a “Billing and payment settings” link. Confirm that clicking on the link takes you to the subscription management page.

In general, please keep an eye out for any weirdness/bugs. We’ll likely fix them in follow-up PRs, but it would be good to catch anything like this. (I already tripped over an issue with the VerticalNavItem placeholder display that I fixed in #52028!)