A4A > Agency Tier: Implement tier permission check

[yashwin]

Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1303

Proposed Changes

This PR implements a tier permission check, allowing users to view the page only if it is accessible.

Note: MC tool links are in the issue mentioned above.

Testing Instructions

• Remove your agency tier if it is already set from the Agency MC tool and enable the Partner Directory for your agency using the Partner Directory MC tool.
• Open the A4A live link > Go to Partner Directory > Verify that the below UI is shown. Clicking on the Learn more button should take you to /agency-tier. Verify it looks good on mobile views, too. Screenshots at the bottom.

• Update your agency tier to Emerging Partner using the MC tool > Refresh the UI and verify that the permissions error is displayed as shown above.

• Change the agency tier to Agency Partner > Refresh the UI and verify that the permissions error is no longer showing and that you can view the Partner Directory.

• Change the agency tier to Pro Agency Partner > Refresh the UI and verify that the permissions error is no longer showing and that you can view the Partner Directory.

Small screens:

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-122333

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[yashwin]

We are mainly replacing the context's primary content with the error content.

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper               +419 B  (+0.0%)      +99 B  (+0.0%)
entry-main                  +419 B  (+0.0%)      +89 B  (+0.0%)
entry-subscriptions          +63 B  (+0.0%)      +69 B  (+0.0%)
entry-login                  +63 B  (+0.0%)      +69 B  (+0.0%)
entry-domains-landing        +63 B  (+0.0%)      +69 B  (+0.0%)
entry-browsehappy            +63 B  (+0.0%)      +69 B  (+0.1%)

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

Sections (~13535 bytes added 📈 [gzipped])

name                                parsed_size             gzip_size
a8c-for-agencies                       +49491 B  (+953.0%)   +14643 B  (+767.5%)
a8c-for-agencies-partner-directory      +3309 B    (+0.7%)    +1173 B    (+0.8%)
a8c-for-agencies-team                   +3304 B    (+0.4%)     +937 B    (+0.4%)
a8c-for-agencies-settings               +3304 B    (+1.8%)    +1072 B    (+1.8%)
a8c-for-agencies-referrals              +3304 B    (+0.3%)     +922 B    (+0.3%)
a8c-for-agencies-purchases              +3304 B    (+0.4%)    +1118 B    (+0.5%)
a8c-for-agencies-plugins                +3304 B    (+2.1%)    +1081 B    (+2.1%)
a8c-for-agencies-client                 +3304 B    (+0.3%)     +927 B    (+0.3%)
a8c-for-agencies-sites                  +2896 B    (+0.1%)     +631 B    (+0.1%)
a8c-for-agencies-overview               +2495 B    (+0.3%)     +587 B    (+0.2%)
a8c-for-agencies-migrations             +2495 B    (+1.2%)     +766 B    (+1.2%)
a8c-for-agencies-marketplace            +2495 B    (+0.3%)     +783 B    (+0.3%)
a8c-for-agencies-agency-tier            +2495 B    (+1.3%)     +758 B    (+1.2%)
account                                  -196 B    (-0.0%)     -319 B    (-0.1%)
stats                                    -103 B    (-0.0%)     -388 B    (-0.1%)
themes                                    -34 B    (-0.0%)       -9 B    (-0.0%)
theme                                     -34 B    (-0.0%)      -13 B    (-0.0%)
reader                                    -34 B    (-0.0%)       -4 B    (-0.0%)
plugins                                   -34 B    (-0.0%)       -3 B    (-0.0%)
plans                                     -34 B    (-0.0%)       -5 B    (-0.0%)
jetpack-cloud-plugin-management           -34 B    (-0.0%)       -3 B    (-0.0%)
home                                      -34 B    (-0.0%)       -4 B    (-0.0%)
domains                                   -34 B    (-0.0%)       -5 B    (-0.0%)
subscribers                               +28 B    (+0.0%)       +9 B    (+0.0%)
earn                                      +28 B    (+0.0%)       +9 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.

[madebynoam]

Looks good, thanks, @yashwin .

One request: Can you add text-wrap: balance; to the headline?
It will make it a bit nicer:

[yashwin]

Looks good, thanks, @yashwin .

One request: Can you add text-wrap: balance; to the headline? It will make it a bit nicer:

Thanks for the review, @madebynoam!

I noticed a while back and was fixing the same :D

[matticbot]

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

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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a/agency-tier/access-control on your sandbox.

[cleacos]

It works as expected.

LGTM!

[a8ci18n]

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

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 @yashwin for including a screenshot in the description! This is really helpful for our translators.