Combine WordAds Earnings + Settings into a single page

[rclations]

Changes proposed in this Pull Request

• Combine Ads Earnings & Settings UI into a single display.
• Put ads settings into 2 collapsible cards:
  1. WordAds Account (including Paypal email)
  2. Placement Settings (including whether ads are turned on or off)
• Sites will an active account will have the account card collapsed by default, and the placements card expanded by default. The earnings tables will always display below these.

I left the scaffolding in place for tabs in case one of the other sections will use that in the future.

Testing instructions

Lets start with testing around the UI, make sure everything makes sense and we're happy with the overall direction. Then we can dive into the technicals and likely add some more cleanup.

Here's what you should see while testing:

Application view

WordPress.com Site view

Jetpack site view

[matticbot]

Test live: https://calypso.live/?branch=update/wordads-settings-single-page

[matticbot]

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

Sections (~2492 bytes removed 📉 [gzipped])

name   parsed_size           gzip_size
earn       -9811 B  (-3.6%)    -2297 B  (-3.2%)
stats       -743 B  (-0.1%)     -195 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.

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.

[dbspringer]

I'm curious if we should somehow make the WordAds Account card more noticeable for active members. TBH, I searched around for a bit because it was hiding in plain sight -- or maybe I just intrinsically thought it was the page header.

[dbspringer]

On Jetpack sites the Manage ad placements card's action feels smooth/good, but the placement feels kinda strange. I wonder if we could somehow add it as a button (a la Save Settings) to the upper title card.

[dbspringer]

When I created a new Premium site the card came up correctly and asked if I wanted to join, but then the account card popped closed as soon as I accepted.

[dbspringer]

All in all, I think this is going to be a big improvement. It feels much cleaner/streamlined. Just a couple notes I made above, maybe we can wrangle a designer to help us make the cards a little more blended.

[rclations]

Planning to circle back on this in the next few weeks.

[a8ci18n]

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 30 times:
translate( 'Additional ad placements' ) ES Score: 9
See 1 additional suggestions in the PR translation status page

[github-actions]

This PR has been marked as stale due to lack of activity within the last 30 days.