Migrate Stepper flows to the new API

[alshakero]

Related to #

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-9ac8a55f25ba40c18667a27a79012344caae3b25

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-9ac8a55f25ba40c18667a27a79012344caae3b25&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-9ac8a55f25ba40c18667a27a79012344caae3b25&env=a8c-for-agencies

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-main                 +1074 B  (+0.0%)     +465 B  (+0.1%)
entry-subscriptions        +1022 B  (+0.1%)     +460 B  (+0.1%)
entry-login                 +901 B  (+0.0%)     +379 B  (+0.1%)
entry-domains-landing       +791 B  (+0.1%)     +346 B  (+0.2%)
entry-browsehappy           +791 B  (+0.4%)     +346 B  (+0.5%)
entry-stepper               +289 B  (+0.0%)     +290 B  (+0.1%)

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

Sections (~4262 bytes added 📈 [gzipped])

name                                parsed_size            gzip_size
migration-flow                         +22194 B  (+67.3%)    +6674 B  (+57.5%)
stats                                   -1297 B   (-0.1%)    +1165 B   (+0.4%)
link-in-bio-tld-flow                    -1071 B   (-0.1%)    -1299 B   (-0.2%)
update-design-flow                       -815 B   (-0.1%)    -1071 B   (-0.3%)
hundred-year-plan                        -556 B   (-1.1%)      -14 B   (-0.1%)
reader                                   +490 B   (+0.0%)     +601 B   (+0.1%)
home                                     +448 B   (+0.0%)    +1072 B   (+0.2%)
signup                                   -389 B   (-0.1%)      -18 B   (-0.0%)
onboarding-flow                          +389 B   (+1.7%)      +61 B   (+0.8%)
domains                                  -355 B   (-0.0%)    -1986 B   (-0.3%)
a8c-for-agencies-client                  +329 B   (+0.0%)     +990 B   (+0.3%)
site-setup-wg                            +305 B   (+0.2%)       -1 B   (-0.0%)
site-setup-flow                          +305 B   (+0.2%)       -1 B   (-0.0%)
connect-domain                           +300 B   (+1.1%)      +85 B   (+1.2%)
a8c-for-agencies-migrations              +265 B   (+0.0%)     +900 B   (+0.3%)
a8c-for-agencies-marketplace             +265 B   (+0.0%)    +1096 B   (+0.4%)
copy-site-flow                           -255 B   (-0.0%)     -445 B   (-0.2%)
newsletter-post-setup-flow               -234 B   (-0.1%)      -29 B   (-0.0%)
link-in-bio-post-setup-flow              -234 B   (-0.1%)      -28 B   (-0.0%)
subscribers                              +222 B   (+0.0%)    +1320 B   (+0.6%)
jetpack-connect                          +219 B   (+0.0%)     +638 B   (+0.2%)
devdocs                                  -216 B   (-0.1%)      -45 B   (-0.1%)
a8c-for-agencies-referrals               +213 B   (+0.0%)    +2282 B   (+0.8%)
hundred-year-domain                      -211 B   (-0.3%)      -27 B   (-0.1%)
site-overview                            -205 B   (-0.0%)     -539 B   (-0.1%)
hosting                                  -205 B   (-0.0%)     -587 B   (-0.1%)
ai-assembler-flow                        -196 B   (-0.4%)      -17 B   (-0.1%)
checkout                                 +184 B   (+0.0%)     -711 B   (-0.1%)
stepper-user-step                        +177 B   (+0.1%)      +73 B   (+0.1%)
jetpack-cloud-features-comparison        -173 B   (-0.0%)     -686 B   (-0.3%)
jetpack-app                              -173 B   (-0.0%)     -768 B   (-0.6%)
a8c-for-agencies-team                    +172 B   (+0.0%)      -27 B   (-0.0%)
jetpack-cloud-partner-portal             -162 B   (-0.0%)     -665 B   (-0.2%)
email                                    +156 B   (+0.0%)     +366 B   (+0.2%)
a8c-for-agencies-signup                  +155 B   (+0.1%)     +616 B   (+1.5%)
readymade-template-flow                  -143 B   (-0.1%)      -49 B   (-0.1%)
assembler-first-flow                     -143 B   (-0.1%)      -51 B   (-0.1%)
site-purchases                           +140 B   (+0.0%)    +1786 B   (+0.4%)
purchases                                +140 B   (+0.0%)    +1831 B   (+0.3%)
marketing                                +133 B   (+0.0%)     +156 B   (+0.1%)
a8c-for-agencies-purchases               +131 B   (+0.0%)      +52 B   (+0.0%)
tailored-ecommerce-flow                  +127 B   (+1.9%)      +49 B   (+2.2%)
a8c-for-agencies-overview                -127 B   (-0.0%)    -1355 B   (-0.5%)
a8c-for-agencies                         -127 B   (-0.1%)     -373 B   (-1.2%)
jetpack-cloud-settings                   +126 B   (+0.0%)     +230 B   (+0.1%)
google-transfer                          -117 B   (-2.2%)      -56 B   (-3.7%)
domain-transfer                          -117 B   (-2.3%)      -57 B   (-3.9%)
a8c-for-agencies-agency-tier             -117 B   (-0.1%)     -846 B   (-1.2%)
free-post-setup-flow                     -116 B   (-8.6%)      -47 B   (-6.6%)
woocommerce                              -108 B   (-0.0%)      -41 B   (-0.0%)
preview                                  -108 B   (-0.0%)      -39 B   (-0.0%)
posts-custom                             -108 B   (-0.0%)       -4 B   (-0.0%)
posts                                    -108 B   (-0.0%)       -4 B   (-0.0%)
pages                                    -108 B   (-0.0%)      -39 B   (-0.0%)
earn                                     -103 B   (-0.0%)     +282 B   (+0.1%)
write-flow                                -95 B   (-0.0%)      +29 B   (+0.0%)
build-flow                                -95 B   (-0.0%)      +36 B   (+0.0%)
jetpack-cloud-agency-sites-v2             -93 B   (-0.0%)     -346 B   (-0.1%)
import                                    +93 B   (+0.0%)    +1165 B   (+0.5%)
domain-user-transfer-flow                 +93 B   (+0.0%)      -23 B   (-0.0%)
themes                                    -85 B   (-0.0%)      -64 B   (-0.0%)
theme                                     -85 B   (-0.0%)      -76 B   (-0.0%)
a8c-for-agencies-settings                 +79 B   (+0.0%)      +26 B   (+0.0%)
a8c-for-agencies-plugins                  -76 B   (-0.0%)     -308 B   (-0.6%)
transferring-hosted-site-flow             -72 B   (-0.0%)       -9 B   (-0.0%)
settings                                  -70 B   (-0.0%)    -1033 B   (-0.3%)
import-hosted-site-flow                   -69 B   (-0.0%)     +112 B   (+0.0%)
a8c-for-agencies-partner-directory        +69 B   (+0.0%)      -57 B   (-0.0%)
migration-signup                          +58 B   (+0.4%)      +21 B   (+0.4%)
import-flow                               +58 B   (+0.3%)      +34 B   (+0.5%)
site-monitoring                           +52 B   (+0.0%)     -248 B   (-0.1%)
site-logs                                 +52 B   (+0.0%)     -260 B   (-0.1%)
settings-podcast                          -52 B   (-0.0%)      -30 B   (-0.0%)
plugins                                   -49 B   (-0.0%)     -291 B   (-0.0%)
jetpack-cloud-plugin-management           +46 B   (+0.0%)     +261 B   (+0.0%)
design-first-flow                         -41 B   (-0.1%)       -9 B   (-0.1%)
start-writing-flow                        -40 B   (-0.1%)       +0 B
a8c-for-agencies-sites                    +35 B   (+0.0%)      -52 B   (-0.0%)
backup                                    -34 B   (-0.0%)     +265 B   (+0.1%)
plugin-bundle-flow                        +31 B   (+0.0%)      +10 B   (+0.0%)
newsletter-flow                           -31 B   (-0.1%)      -14 B   (-0.2%)
people                                    +30 B   (+0.0%)      -68 B   (-0.0%)
new-hosted-site-flow-user-included        +27 B   (+0.4%)      -13 B   (-0.6%)
site-performance                          -26 B   (-0.0%)     -212 B   (-0.0%)
site-marketing                            -26 B   (-0.0%)     -118 B   (-0.0%)
reblogging-flow                           -25 B   (-0.3%)      -46 B   (-2.3%)
new-hosted-site-flow                      -24 B   (-0.2%)      -45 B   (-1.5%)
site-settings                             +23 B   (+0.0%)     -312 B   (-0.1%)
site-blocks                               +23 B   (+0.0%)      +59 B   (+0.0%)
security                                  +23 B   (+0.0%)     -199 B   (-0.1%)
privacy                                   +23 B   (+0.0%)      +59 B   (+0.0%)
notification-settings                     +23 B   (+0.0%)      +59 B   (+0.0%)
me                                        +23 B   (+0.0%)      +59 B   (+0.0%)
marketplace                               +23 B   (+0.0%)      -58 B   (-0.0%)
jetpack-cloud-pricing                     +23 B   (+0.0%)     -193 B   (-0.1%)
help                                      +23 B   (+0.0%)      +59 B   (+0.0%)
developer                                 +23 B   (+0.0%)      +59 B   (+0.0%)
account-close                             +23 B   (+0.0%)      +59 B   (+0.0%)
account                                   +23 B   (+0.0%)      +59 B   (+0.0%)
entrepreneur-flow                         +19 B   (+0.0%)      +29 B   (+0.0%)
site-migration-flow                       -17 B   (-0.0%)      +37 B   (+0.2%)
hosted-site-migration-flow                -17 B   (-0.0%)      +37 B   (+0.2%)

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 (~1481 bytes removed 📉 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-automattic-help-center-stepper                                              +227 B  (+0.0%)     +381 B  (+0.2%)
async-load-automattic-design-preview                                                   -201 B  (-0.0%)      -45 B  (-0.0%)
async-load-store-app-store-stats                                                       -196 B  (-0.1%)     -939 B  (-1.3%)
async-load-automattic-help-center                                                      +196 B  (+0.0%)     +329 B  (+0.2%)
async-load-signup-steps-plans-theme-preselected                                        -184 B  (-0.0%)     -822 B  (-0.6%)
async-load-signup-steps-plans                                                          -162 B  (-0.0%)     -816 B  (-0.6%)
async-load-calypso-my-sites-stats-stats-post-detail                                    -108 B  (-0.3%)      -39 B  (-0.4%)
async-load-calypso-my-sites-site-settings-seo-settings-form                            -108 B  (-0.0%)      -38 B  (-0.0%)
async-load-signup-steps-website-content                                                +103 B  (+0.1%)      +50 B  (+0.1%)
async-load-signup-steps-site-options                                                   +103 B  (+0.2%)      +45 B  (+0.2%)
async-load-calypso-signup-step-wrapper                                                 +103 B  (+0.3%)      +51 B  (+0.4%)
async-load-calypso-my-sites-checkout-modal                                              +93 B  (+0.0%)     -402 B  (-0.1%)
async-load-signup-steps-theme-selection                                                 -80 B  (-0.0%)     -325 B  (-0.3%)
async-load-purchase-modal-wrapper                                                       +23 B  (+0.0%)      +13 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +23 B  (+0.0%)       +9 B  (+0.0%)
async-load-design-blocks                                                                +23 B  (+0.0%)     -124 B  (-0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                        +23 B  (+0.1%)      +12 B  (+0.2%)
async-load-calypso-layout-masterbar-checkout                                            +23 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-domains                                                         -13 B  (-0.0%)     -660 B  (-0.3%)
async-load-design-playground                                                            -13 B  (-0.0%)      -90 B  (-0.0%)
async-load-design                                                                       -13 B  (-0.0%)      -84 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.