Seller experience: Make options requirement aware of current site plan

[nelsonec87]

Changes proposed in this Pull Request

• Changed the simple path requirement (it's not free)
• Show a different message when the current site already fulfils the requirement.

Testing instructions

• Access start/setup-site/intent?siteSlug=<SITE SLUG>&flags=seller-experience (which enables the seller-experience feature flag)

• Click the "Start Selling" button

• Click "Continue"

• Check the new view

• With Free plan:
  

• Paid Plan:
  

• Business or eCommerce plans:
  

• The link should take you to the plans page.

Fixes #60710

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-26428

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name                                    parsed_size           gzip_size
async-load-signup-steps-store-features       +342 B  (+0.4%)     +123 B  (+0.5%)

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.

[kwight]

Let's also handle the case when users have already paid for a plan – any paid plan for simple, the business plan for Woo: #60710 (comment)

[nelsonec87]

I've used a ternary operator inside the component markup because the logic is simple and it seems easy to read.
Does anyone feel differently about it?

{ isPaidPlan
	? translate( 'Included in your plan' )
	: translate( 'Requires a {{a}}paid plan{{/a}}', {
			components: {
				a: <a href={ `/plans/${ siteSlug }` } />,
			},
	} ) }

[kwight]

I've used a ternary operator inside the component markup because the logic is simple and it seems easy to read.

Sure, looks good. 👍

[kwight]

Tests Great! I tried three sites: free, Premium, and Business, and got the variations I expected. ✨

Just tidy up the chaining and sort the failed test, then 🚢

[a8ci18n]

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

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

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.