#7770919 Stats: Add highlights to Ads page

Proposed Changes

Add highlights section to top of Ads page.

The first pass at getting the highlights working. Uses the existing data from the store and formats it for display.

• Adds new highlights section at the top of the page
• Tooltip should show correct payout/status notices
• Hides old Totals section (below chart)

Does not yet:

• use correct icon data
• remove the previous implementation

I’d like to address these in follow up PRs.

Testing Instructions

• Visit the Calypso Live link.
• View a site with WordAds enabled.
• Visit Stats → Ads and confirm highlights are shown correctly.
• Confirm things work correctly on smaller screen sizes.
• Confirm hover works correctly with the tooltip.

If you need to compare with the old Totals section, you can enable it via the React dev tools. Select the WordAdsEarnings component and toggle the showTotalsSection property.

The new code is only active on non-production domains so it can safely be merged as is.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Related to #72045.