CIAB: add Woo Hosted Plans stepper flow

[michaeldcain]

Fixes: https://linear.app/a8c/issue/SHILL-929/ciab-create-checkout-flow-for-ciab

Proposed Changes

This adds a basic stepper flow, based on the plans-upgrade flow, that allows a Woo Hosted (CIAB) site to pick a paid plan and be directed to Checkout. As part of the work, it adds the basic plumbing to render the Woo Hosted plans grid, which can be used by different flows.

Why are these changes being made?

When a CIAB site is provisioned with a free trial, the user will be prompted to upgrade their site through a Stepper flow. A previous version of this exists in #106279, but a plans-specific flow was requested after internal review.

Testing Instructions

• Visit wpcalypso.wordpress.com/ciab/sites
• Create a new site using the button in the top right
• With the new CIAB site address, visit the stepper flow: calypso.localhost:3000/setup/woo-hosted-plans?siteSlug={yourciabsiteaddress}
• Verify that you are shown the Woo Hosted Basic and Pro plans
• Verify that selected a plan redirects the user to Checkout

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-162581&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/woo-hosted-plans-flow on your sandbox.

[matticbot]

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

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

name                    parsed_size           gzip_size
entry-stepper                +272 B  (+0.0%)      +93 B  (+0.0%)
entry-reauth-required        +142 B  (+0.0%)      +69 B  (+0.0%)
entry-main                   +142 B  (+0.0%)      +69 B  (+0.0%)
entry-login                  +141 B  (+0.0%)      +83 B  (+0.0%)
entry-subscriptions          +105 B  (+0.0%)      +52 B  (+0.0%)
entry-domains-landing        +105 B  (+0.0%)      +52 B  (+0.0%)
entry-dashboard-dotcom       +105 B  (+0.0%)      +52 B  (+0.0%)
entry-dashboard-ciab         +105 B  (+0.0%)      +52 B  (+0.0%)
entry-browsehappy            +105 B  (+0.0%)      +52 B  (+0.1%)

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

Sections (~1541 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
woo-hosted-plans                  +3216 B    (new)    +1414 B    (new)
async-step-unified-plans           +317 B  (+0.0%)     +105 B  (+0.0%)
plans                               +98 B  (+0.0%)      +40 B  (+0.0%)
plugins                             +72 B  (+0.0%)      +28 B  (+0.0%)
jetpack-app                         +72 B  (+0.0%)      +28 B  (+0.0%)
staging-site                        +26 B  (+0.0%)      +12 B  (+0.0%)
sites-dashboard                     +26 B  (+0.0%)      +12 B  (+0.0%)
site-settings                       +26 B  (+0.0%)      +12 B  (+0.0%)
site-performance                    +26 B  (+0.0%)      +12 B  (+0.0%)
site-monitoring                     +26 B  (+0.0%)      +12 B  (+0.0%)
site-logs                           +26 B  (+0.0%)      +12 B  (+0.0%)
overview                            +26 B  (+0.0%)      +12 B  (+0.0%)
hosting                             +26 B  (+0.0%)      +12 B  (+0.0%)
github-deployments                  +26 B  (+0.0%)      +12 B  (+0.0%)
domains                             +26 B  (+0.0%)      +12 B  (+0.0%)
checkout                            +11 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-marketplace        +11 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-client             +11 B  (+0.0%)      +10 B  (+0.0%)

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

name                                                      parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected                +235 B  (+0.0%)      +80 B  (+0.0%)
async-load-signup-steps-plans                                  +235 B  (+0.0%)      +83 B  (+0.1%)
async-load-calypso-blocks-product-purchase-features-list        +78 B  (+0.2%)      +12 B  (+0.1%)

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.

[zaguiini]

Can we get rid of this property now that we're hiding the logo if logo={ null }?

[zaguiini]

I much prefer hiding the logo when it's explicitly null rather than using the hideLogo boolean.

[michaeldcain]

now that we're hiding the logo if logo={ null }

I removed that from this diff, but can switch back if you want.

I originally went with the null value for the logo prop, but the rendering logic was clunky. You can see it in 7636cec. Checking for the explicit null value, since logo could also be undefined felt strange, so I pinged @sirbrillig for his thoughts. He made a really good case for the prop - effectively that it's better to have a prop have a singular purpose instead of trying to represent different states. In this case logo is used to declare which logo to use, while hideLogo is used to declare whether or not to show a logo.

@zaguiini since y'all maintain the stepper flow I'll defer to you, but do you still feel that the logo={ null } is the way to go?

[zaguiini]

Yes, hideLogo is indeed more explicit. Let's remove the comment in the logo type definition, then. 👍🏻

[michaeldcain]

oh 🤦🏻 - I lost that in a forced rebase. I'll update it - thanks!

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Hi @michaeldcain, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

• Pick a plan for your store
• Select a plan to launch your store
• Your free trial ends soon - select a plan to keep your online store.

Thank you in advance!