Search: Add pricing and tier information to Plans page

[jsnmoon]

Jetpack equivalent to Automattic/wp-calypso#40306.

Changes proposed in this Pull Request:

• Adds support for /sites/<id>/products API route via <QuerySiteProducts />, site-products state handling, and jetpack/v4/site/products local API route.
• Adds handling for showing Search plan tiers
• Adds handling for showing Search plan prices

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• Yes, this adds support for showing Search plan tiers to the wp-admin Jetpack plans page. This is being merged into a feature branch, however.

Testing instructions:

1. You must apply Phabricator diff 153244 to your sandbox. This is a variant of D38944-code.

2. Apply changes from this PR to your Jetpack installation. If you're running a dockerized instance, you may need to update your extra_hosts to properly sandbox the WPCOM API.

3. Navigate to the Jetpack Plans page at /wp-admin/admin.php?page=jetpack#/plans.

4. Ensure that both the record counts and the tier information render as expected.

Proposed changelog entry for your changes:

• None for now.

[jsnmoon]

@keoshi: Due to the slower response times for the Tiers API, I split out the loading states for Backups and Search. Unfortunately, that means this is now possible:

Should I unify the loading states for Backups and Search so that we could avoid this misalignment?

[gibrown]

Minor copy/design comments...

[jsnmoon]

• Updated to include monthly and yearly pricing options. The monthly upgrade button doesn't redirect correctly at the moment.
• Added a snippet about how much the customer is saving or would save using the yearly pricing option.

[DavidRothstein]

Looks pretty good to me (with the caveat that I didn't actually test it). However, I think there's one thing that may be broken -- see inline comment.

[keoshi]

@jsnmoon

Should I unify the loading states for Backups and Search so that we could avoid this misalignment?

I don't if there's prior art in doing something like this or a best practice in terms of performance, but I'd personally much rather see them show up at the same time, yes! :)

[gibrown]

This is looking good to me, I think we are waiting for the wp.com deploy anyways, so will hold off on a final review until that lands.

[DavidRothstein]

I think in one of the earlier comments you mentioned this component got slower to load (due to the extra API endpoint)...

I think you can actually eliminate this products property from the component (and the isFetchingProducts property below) and just pass siteProducts in to SingleProductBackup instead -- this should work fine since the two have the same structure (and for Jetpack Backup, the exact same data).

In that case, you can probably also avoid calling QueryProducts on this page entirely, which would avoid having to hit that API endpoint at all.

[gibrown]

Tested this along with D40938 and it seems to all work well. The redirects are currently not working because we need to move the search plans to staging, but they all look correct based on inspection.