Jetpack Search: Display in plans page

[jsnmoon]

Partially addressees #39858. Design is not final and will be iterated upon.

Changes proposed in this Pull Request

• Add support for showing Jetpack Search product in /plans via a feature gate.

Testing instructions

1. Spin up this branch locally.

2. Navigate to /plans and select a Jetpack site without any plan subscriptions. You should see something like this at the bottom:

3. Navigate to /plans and select a Jetpack site with a plan that includes Jetpack Backups. You should see something like this:

4. Navigate to /plans in wp-calypso for a Jetpack site without any Jetpack plans. Alternatively, you can add a flags=-jetpack/search-product query string to the URL. You should see something like this:

5. Repeat step 4 for a Jetpack site with a Jetpack plan that includes Backups. It should look like this:

[matticbot]

Test live: https://calypso.live/?branch=add/jetpack-search-plans-part-1

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-main                 +1015 B  (+0.1%)     +184 B  (+0.0%)
entry-login                +1015 B  (+0.1%)     +201 B  (+0.1%)
entry-jetpack-cloud        +1015 B  (+0.1%)     +179 B  (+0.0%)
entry-domains-landing      +1015 B  (+0.2%)     +177 B  (+0.1%)

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

Sections (~152 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
plans                 +339 B  (+0.1%)      +76 B  (+0.1%)
jetpack-connect       +339 B  (+0.1%)      +76 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.

Async-loaded Components (~152 bytes added 📈 [gzipped])

name                           parsed_size           gzip_size
async-load-signup-steps-plans       +339 B  (+0.2%)      +75 B  (+0.2%)
async-load-design-blocks            +333 B  (+0.0%)      +77 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[gibrown]

LGTM other than not needing the trial stuff.

[tyxla]

I'm going to review this one too soon, but in the meantime, I think @Automattic/jetpack-voyager should also take a look at it as they've been working on it recently.

[keoshi]

Works exactly as expected! 🙌

Trial constants have been removed

[gibrown]

LGTM and still working.

[tyxla]

The code looks great! I've left a minor comment, nothing blocking.

Ready to 🚢 !

[tyxla]

I re-ran the ICFY job because it was failing the first time.

[jsnmoon]

Thanks for the review, @tyxla! I'll be sure to tag @Automattic/jetpack-voyager in our future work on this going forward.

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.