Automattic for Agencies: Add 'Licenses' menu item

[yashwin]

Resolves https://github.com/Automattic/jetpack-genesis/issues/239

Proposed Changes

This PR adds:

• New "Licenses" menu item
• Section for Licenses

Testing Instructions

• Open the Calypso live link > Verify the /licenses URL is not accessible.
• Switch to the branch git checkout add/a4a-licenses-menu-item.
• Start the server by running yarn start-a8c-for-agencies.
• Verify that you can now see a new menu item for Licenses > Click the menu item and verify that you can see the below page:

Pre-merge Checklist

• [x] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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)?
• [x] 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[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper              +1692 B  (+0.1%)     +184 B  (+0.0%)
entry-main                 +1692 B  (+0.1%)     +203 B  (+0.0%)
entry-subscriptions         +178 B  (+0.0%)      +84 B  (+0.0%)
entry-login                 +178 B  (+0.0%)      +84 B  (+0.0%)
entry-domains-landing       +178 B  (+0.0%)      +84 B  (+0.0%)
entry-browsehappy           +178 B  (+0.1%)      +84 B  (+0.2%)

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

Sections (~3182 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
a8c-for-agencies-purchases      +190895 B    (new)   +60876 B    (new)
a8c-for-agencies-plugins          +1473 B  (+0.8%)     +422 B  (+0.7%)
a8c-for-agencies-overview         +1473 B  (+0.8%)     +423 B  (+0.7%)
a8c-for-agencies-marketplace      +1473 B  (+0.3%)     +432 B  (+0.3%)
settings-jetpack                   -300 B  (-0.1%)      -28 B  (-0.0%)
home                               +196 B  (+0.0%)     +495 B  (+0.1%)
site-purchases                     -103 B  (-0.0%)      -29 B  (-0.0%)
purchases                          -103 B  (-0.0%)      -29 B  (-0.0%)
jetpack-search                     +103 B  (+0.0%)      +29 B  (+0.0%)
email                               -90 B  (-0.0%)     -153 B  (-0.1%)
domains                             -90 B  (-0.0%)       +2 B  (+0.0%)
activity                            -52 B  (-0.0%)      +58 B  (+0.0%)
a8c-for-agencies-sites              +51 B  (+0.0%)      +40 B  (+0.1%)
scan                                -39 B  (-0.0%)     -136 B  (-0.1%)
backup                              -39 B  (-0.0%)      +16 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

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a-licenses-menu-item on your sandbox.

[jkguidaven]

Can we confirm with design where the menu should appear? My guess is under Purchases as the Figma design did not show it in the main menu.

[yashwin]

Can we confirm with design where the menu should appear? My guess is under Purchases as the Figma design did not show it in the main menu.

Thanks for the review, @jkguidaven! I noticed this and thought it was missed. Anyway, let's verify.

@jeffgolenski: Could you please let us know where should the Licenses page be?

[yashwin]

Can we confirm with design where the menu should appear? My guess is under Purchases as the Figma design did not show it in the main menu.

Thanks for the review, @jkguidaven! I noticed this and thought it was missed. Anyway, let's verify.

@jeffgolenski, @keoshi: Could you please let us know where should the Licenses page be?

[keoshi]

Good point!

We could replicate Jetpack Manage, but I wonder if Licenses are treated differently in A4A, since they're purchased in “Marketplace” first.

@jeffgolenski Do you have any idea here? Are we treating “Licenses” as part of a larger section (like “Purchases”) or keeping it as a top-level item? Not totally convinced, but I like the idea of putting it inside “Purchases” maybe.

Also cc'ing @simonktnga8c in case there's a bigger strategic move here that I'm not considering.

[jeffgolenski]

@yashwin @keoshi @simonktnga8c @jkguidaven

• I personally think we should build the license purchasing under the "marketplace" tab as seen in this flow starting to take shape
• For licensing management I'd say move that under purchases.

We outlined the info architecture here: JcgXpF2SI5nPG2vfFDDoFZ-fi-4446_27868. To me it makes the most sense to designate the marketplace (future purchases) from the products already purchased early on so we can expand this in the future.

I imagine we'll eventually have the "purchases" area outline products, hosting, extensions, add-ons, and more.

[simonktnga8c]

What @jeffgolenski said :)

[yashwin]

Thanks everyone for the feedback!

Thanks for the review & feedback, @jkguidaven!

I have made the changes accordingly. Could you please take another look? Thanks!