Adds billing interval switcher in plugin details and plugins browser.

[cpapazoglou]

Changes proposed in this Pull Request

• Adds a new compact prop to <Breadcrumb>, so that we can just display "Back" in smaller breakpoints
• Creates a billing interval switcher component for the Marketplace by composition of two already existing components
• Uses the above component in plugins browser and plugin details
• Note: the placement in plugins browser is not identical to the designs but we can iterate on it on future PRs

Testing instructions

Scenario WPCOM sites with paid plugin

• go to /plugins/[domain]
• inspect the new switcher
• change breakpoint, make sure nothing breaks
• repeat for /plugins/woocommerce-subscriptions/

Scenario WPCOM sites with free plugin

• go to /plugins/woocommerce/
• switcher should not show

Scenario Jetpack Self hosted sites

• go to /plugins/[domain]
• switcher should not show

Before List	After List

Before Details	After Details

Fixes #57102

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-22533
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-22533&env=jetpack

[matticbot]

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

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

name                 parsed_size           gzip_size
entry-gutenboarding       +569 B  (+0.0%)     +124 B  (+0.0%)

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

Sections (~1477 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
plugins                       +4675 B  (+0.8%)    +1420 B  (+0.8%)
woocommerce-installation       +219 B  (+0.1%)      +57 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 (~45 bytes added 📈 [gzipped])

name               parsed_size           gzip_size
async-load-design       +219 B  (+0.0%)      +45 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.

[gcsecsey]

LGTM 🎉

[WBerredo]

There is any chance we can have it in global state(redux)? This would allow us to:

• Keep the period selected when moving between pages.
• Easier usage on down the line components as PluginBrowserItem

[cpapazoglou]

Yes, I had it in mind. Let's do it in a follow up.

[WBerredo]

Thanks for address this, can we change those values to lowercase so we can use them directly when looking on plugin variations?

[cpapazoglou]

Sadly, no

wp-calypso/packages/plans-grid/src/plans-interval-toggle/index.tsx

Lines 79 to 108 in 5f4eb76

	<SegmentedControl>
	<SegmentedControl.Item
	selected={ intervalType === 'MONTHLY' }
	onClick={ () => onChange( 'MONTHLY' ) }
	>
	<span className="plans-interval-toggle__label">{ monthlyLabel }</span>
	</SegmentedControl.Item>
	<SegmentedControl.Item
	selected={ intervalType === 'ANNUALLY' }
	onClick={ () => onChange( 'ANNUALLY' ) }
	>
	<span className="plans-interval-toggle__label">{ annuallyLabel }</span>
	{ /*
	* Check covers both cases of maxMonthlyDiscountPercentage
	* not being undefined and not being 0
	*/ }
	{ intervalType === 'MONTHLY' && maxMonthlyDiscountPercentage && (
	<PopupMessages>
	{ sprintf(
	// translators: will be like "Save up to 30% by paying annually...". Please keep "%%" for the percent sign
	__(
	'Save up to %(maxDiscount)d%% by paying annually and get a free domain for one year',
	__i18n_text_domain__
	),
	{ maxDiscount: maxMonthlyDiscountPercentage }
	) }
	</PopupMessages>
	) }
	</SegmentedControl.Item>

[WBerredo]

LGTM 🚢

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.