Add tier and price info to the Jetpack Search block on the plans page by DavidRothstein · Pull Request #40306 · Automattic/wp-calypso

DavidRothstein · 2020-03-19T20:52:37Z

Changes proposed in this Pull Request

Makes the Jetpack Search block on the /plans/[site] and jetpack/connect/... pages show information about the site's search tier and number of search records (and the corresponding price that the user will be charged if they go through and buy it).
A large part of the code here is for querying a new sites/[site]/products endpoint on the server, so that Calypso can obtain the site-specific price and tier info for Jetpack Search. This code is based pretty heavily on the existing code in Calypso for querying the sites/[site]/plans endpoint.

Testing instructions

D38944-code is required on the server side to test this. (Portions of that will need to be deployed before this can be merged.)
Go to /plans and select an already-connected Jetpack site. You should see something like this for the Jetpack Search block (the arrow shows the key part -- the info in this section should reflect your actual search usage as determined by the server):
You can also connect a new Jetpack site, and within the plan selection page there you should see similar information:

Note that the design and wording here aren't fully finalized, but I based the text in current version on some internal mockups at p6TEKc-3jA-p2.

matticbot · 2020-03-19T20:52:39Z

Test live: https://calypso.live/?branch=add/jetpack-search-plans-page-tier-info

matticbot · 2020-03-19T20:53:12Z

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

Webpack Runtime (~64 bytes removed 📉 [gzipped])

Details

name      parsed_size           gzip_size
manifest       -291 B  (-0.2%)      -64 B  (-0.2%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

Details

name                   parsed_size           gzip_size
entry-main                 +1818 B  (+0.1%)     +356 B  (+0.1%)
entry-login                +1127 B  (+0.1%)     +298 B  (+0.1%)
entry-gutenboarding        +1127 B  (+0.0%)     +304 B  (+0.0%)
entry-domains-landing      +1127 B  (+0.2%)     +298 B  (+0.2%)

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

Sections (~1499 bytes removed 📉 [gzipped])

Details

name             parsed_size           gzip_size
plans                -1768 B  (-0.4%)     -813 B  (-0.7%)
jetpack-connect      +1447 B  (+0.3%)     +629 B  (+0.4%)
email                  -80 B  (-0.0%)     -655 B  (-0.9%)
domains                -80 B  (-0.0%)     -660 B  (-0.3%)

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 (~925 bytes added 📈 [gzipped])

Details

name                           parsed_size           gzip_size
async-load-design-blocks           +1447 B  (+0.1%)     +521 B  (+0.1%)
async-load-signup-steps-plans       +559 B  (+0.3%)     +377 B  (+0.8%)
async-load-design                    +37 B  (+0.0%)      +27 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.

DavidRothstein · 2020-03-19T20:53:55Z

+						// This is a catch-all tier with prices increasing
+						// proportionally per million records, so define fake
+						// tiers here to show the user what they will actually
+						// pay and why.


Not entirely sure if this is how we want to display things for sites with 1,000,000+ records, but it seemed like the simplest way to do it for now.

In general I wouldn't expose the tier numbers to end users, but instead just say what they can go up to. But that is all design and copy I think so this looks fine as is.

Yeah, I was just copying it from the older designs -- it can definitely be changed. I guess maybe the idea was that it's useful to get the concept of different "tiers" into the text somehow, though, so the user can see how we're charging for things.

gibrown

This is all working for me. Minor comments (and design thoughts I kept to myself) that could be addressed later. I think it needs @jsnmoon and/or @AnnaMag to do a better code review than I trust myself to give.

gibrown · 2020-03-19T22:42:30Z

+						// This is a catch-all tier with prices increasing
+						// proportionally per million records, so define fake
+						// tiers here to show the user what they will actually
+						// pay and why.


In general I wouldn't expose the tier numbers to end users, but instead just say what they can go up to. But that is all design and copy I think so this looks fine as is.

gibrown · 2020-03-19T22:43:43Z

-			optionsLabel: translate( 'Select a product option:' ),
+			optionsLabelCallback: productObject => {
+				return translate(
+					'Your current site record size: %(numberOfRecords)s record',


Can the api response give us info of whether this is an estimate or not?

Yes, if we need that information, we can add it to the API and use it here. Let's see if we need it once someone figures out what the final wording should be.

jsnmoon

This looks good and tests well; state handling works as expected.

Having some extra 👀 on the ProductSelector component would be nice before 🚢 -- that's the part I'm least confident about.

DavidRothstein

Thanks for the review!

DavidRothstein · 2020-03-26T19:24:29Z

Hm, it looks like #40402 (for Jetpack Scan) made a bunch of changes to how these product blocks display when there is only one radio option. This affects Jetpack Search too.

So after rebasing this pull request it will no longer work well (the tier info and number of search records are no longer shown).

Will need to figure out what the final design is going to look like, I guess.

DavidRothstein · 2020-03-27T03:07:19Z

Actually, it's possible to work around the above problem with a pretty simple set of changes, so I'm pushing that up now just to get it working again with the latest code on the master branch.

This is now back to displaying as shown in the screenshots in the PR description.

gibrown

Looks good and tests well. Some UX and copy stuff we need to polish but I think we should land this as is.

…back.

DavidRothstein added Jetpack [Feature] Plans & Upgrades All of the plans on WordPress.com and flow for upgrading plans. [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Jetpack Search labels Mar 19, 2020

DavidRothstein requested review from gibrown and jsnmoon March 19, 2020 20:52

DavidRothstein commented Mar 19, 2020

View reviewed changes

a8ci18n reviewed Mar 19, 2020

View reviewed changes

Comment thread client/state/sites/products/actions.js

gibrown requested a review from AnnaMag March 19, 2020 21:07

gibrown reviewed Mar 19, 2020

View reviewed changes

jsnmoon approved these changes Mar 23, 2020

View reviewed changes

Comment thread client/state/sites/products/reducer.js

Comment thread client/lib/products-values/constants.js Outdated

Comment thread client/state/sites/products/actions.js

Comment thread client/state/sites/products/README.md

DavidRothstein commented Mar 24, 2020

View reviewed changes

Comment thread client/lib/products-values/constants.js Outdated

Comment thread client/state/sites/products/actions.js

Comment thread client/state/sites/products/reducer.js

jsnmoon mentioned this pull request Mar 25, 2020

Search: Add pricing and tier information to Plans page Automattic/jetpack#15125

Merged

DavidRothstein force-pushed the add/jetpack-search-plans-page-tier-info branch from 2bc7a20 to 0f5de35 Compare March 27, 2020 03:07

DavidRothstein added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 27, 2020

gibrown approved these changes Mar 27, 2020

View reviewed changes

gibrown added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 27, 2020

DavidRothstein added 4 commits March 27, 2020 13:32

Add tier and price info to the Jetpack Search block on the plans page

284b2af

Fix tests

914fcbf

Use compact format for tierNumber argument, based on code review feed…

9845575

…back.

Restore ability to display a single radio button.

59a3274

DavidRothstein force-pushed the add/jetpack-search-plans-page-tier-info branch from 0f5de35 to 59a3274 Compare March 27, 2020 17:33

gibrown mentioned this pull request Mar 27, 2020

Search: Add search plan to dashboard Automattic/jetpack#15153

Merged

2 tasks

gibrown merged commit ae9a744 into master Mar 28, 2020

gibrown deleted the add/jetpack-search-plans-page-tier-info branch March 28, 2020 16:26

matticbot removed the [Status] Ready to Merge label Mar 28, 2020

tyxla mentioned this pull request Nov 8, 2021

WPCOM: Migrate wpcom.undocumented() site products to wpcom.req #57765

Merged

tyxla mentioned this pull request Feb 7, 2022

State: Cleanup unused site products cleanup state #60894

Merged

Conversation

DavidRothstein commented Mar 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request

Testing instructions

Uh oh!

matticbot commented Mar 19, 2020

Uh oh!

matticbot commented Mar 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DavidRothstein Mar 19, 2020

Choose a reason for hiding this comment

Uh oh!

gibrown Mar 19, 2020

Choose a reason for hiding this comment

Uh oh!

DavidRothstein Mar 20, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gibrown left a comment

Choose a reason for hiding this comment

Uh oh!

gibrown Mar 19, 2020

Choose a reason for hiding this comment

Uh oh!

gibrown Mar 19, 2020

Choose a reason for hiding this comment

Uh oh!

DavidRothstein Mar 20, 2020

Choose a reason for hiding this comment

Uh oh!

jsnmoon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DavidRothstein left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DavidRothstein commented Mar 26, 2020

Uh oh!

DavidRothstein commented Mar 27, 2020

Uh oh!

gibrown left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

DavidRothstein commented Mar 19, 2020 •

edited

Loading

matticbot commented Mar 19, 2020 •

edited

Loading