A4A: Display Pressable plan usage information

[cleacos]

Resolves: https://github.com/Automattic/automattic-for-agencies-dev/issues/1124

Proposed Changes

This PR adds the current Pressable plan usage overview to the Marketplace > hosting section:

Desktop

Mobile

Purchases > Licenses section

Agency without Pressable usage data

If an A4A Pressable agency doesn't have usage data, for instance, the first day because the usage information is not available until the next day, we have to display this case with ? as value

Testing Instructions

• Check the code
• Launch a horizon live site and check the design
• I hardcoded the usage data for testing purposes, but once it's reviewed and before merge this, I'll get the data from the agency object.

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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122278

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122278&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122278&env=a8c-for-agencies

[matticbot]

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

App Entrypoints (~12 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               -526 B  (-0.0%)      -12 B  (-0.0%)
entry-main                  -526 B  (-0.0%)      -12 B  (-0.0%)
entry-subscriptions          -28 B  (-0.0%)       -3 B  (-0.0%)
entry-login                  -28 B  (-0.0%)       -3 B  (-0.0%)
entry-domains-landing        -28 B  (-0.0%)       -3 B  (-0.0%)
entry-browsehappy            -28 B  (-0.0%)       -3 B  (-0.0%)

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

Sections (~4314 bytes added 📈 [gzipped])

name                               parsed_size            gzip_size
a8c-for-agencies-purchases           +109682 B  (+17.3%)   +27366 B  (+14.0%)
a8c-for-agencies-marketplace           +5399 B   (+0.7%)    +1103 B   (+0.5%)
a8c-for-agencies-client                 -132 B   (-0.0%)     -133 B   (-0.0%)
site-purchases                           -28 B   (-0.0%)      -36 B   (-0.0%)
settings-jetpack                         -28 B   (-0.0%)     -104 B   (-0.1%)
scan                                     -28 B   (-0.0%)     -159 B   (-0.1%)
purchases                                -28 B   (-0.0%)      -36 B   (-0.0%)
plans                                    -28 B   (-0.0%)      -36 B   (-0.0%)
jetpack-social                           -28 B   (-0.0%)      -36 B   (-0.0%)
jetpack-search                           -28 B   (-0.0%)     -144 B   (-0.1%)
jetpack-connect                          -28 B   (-0.0%)      -36 B   (-0.0%)
jetpack-cloud-settings                   -28 B   (-0.0%)     -104 B   (-0.1%)
jetpack-cloud-pricing                    -28 B   (-0.0%)      -36 B   (-0.0%)
jetpack-cloud-plugin-management          -28 B   (-0.0%)     -159 B   (-0.0%)
jetpack-cloud-partner-portal             -28 B   (-0.0%)      -95 B   (-0.0%)
jetpack-cloud-manage-pricing             -28 B   (-0.0%)      -87 B   (-0.1%)
jetpack-cloud-features-comparison        -28 B   (-0.0%)      -36 B   (-0.0%)
jetpack-cloud-agency-sites-v2            -28 B   (-0.0%)      -30 B   (-0.0%)
domains                                  -28 B   (-0.0%)      -36 B   (-0.0%)
checkout                                 -28 B   (-0.0%)      -36 B   (-0.0%)
backup                                   -28 B   (-0.0%)     -159 B   (-0.0%)
a8c-for-agencies-sites                   -28 B   (-0.0%)     -159 B   (-0.0%)
staging-site                             -13 B   (-0.0%)      -55 B   (-0.0%)
hosting                                  -13 B   (-0.0%)      -55 B   (-0.0%)

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.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a/display-pressable-usage-info on your sandbox.

[madebynoam]

Thanks, @cleacos, lgtm!

[travisw]

Tested a few scenarios and can confirm that it's showing proper usage data. 🚀

Existing agency with existing license and sites

wpcom username: travwalter

New agency with new license and site - shows ? with no usage data available yet

wpcom username: travisa8ctesting2024a4atesting15gmailcom

I also confirmed that the limits shown match what's shown on the checkout page

New agency without Pressable licenses - usage component not shown

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[a8ci18n]

Translation for this Pull Request has now been finished.