Onboarding consistency: Use StepContainerV2 in checkout

[zaguiini]

Related to #101201.

Proposed Changes

Registrazione.schermo.2025-03-25.alle.3.42.31.PM.mov

Observations

Not all elements are according to the designs

This PR mostly focuses on getting the basics right, such as using the top bar and correct small viewport margins.

The page isn't following the TwoColumnLayout wireframe

In order to cut scope I ended up using the FullWidthLayout and adding the content with its own proportions to make it easier. We can move to the TwoColumnLayout in the future.

The bottom bar on mobile isn't using the stickyBottomBar prop

For the same reason above: there's already control over how the bottom bar is displayed in the default checkout styling. We can revisit that later.

Testing Instructions

Enter /setup/onboarding?flags=+onboarding/step-container-v2 or /setup/site-setup?siteSlug=%s&flags=+onboarding/step-container-v2 and add a paid product to the cart.

StepContainerV2 version

Should match Figma's top bar and page margins (W9xI27S6Swvw5Ku21EbZvn-fi-9588_14434)

Prod version

Should not have changes.

Screenshots

Large screen

Nothing should change apart from the top bar and the "Included with your purchase" label, which is aligned on its baseline with the Checkout heading.

Before	After

Tablet, above fold

The top bar and purchase details collapsible now look different, with the inside paddings also aligned with the top bar. Also the components within it now stretch.

Before	After

Tablet, below fold

The heading is now smaller and the content is now padded according to StepContainerV2's constraints (16px instead of 24px). Also, the step content within the checkout section are now left aligned to the left instead of aligned to the title of the section.

Before	After

Table/mobile footer

Minimal changes, mostly padding alignment.

Before	After

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-138410&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 (~89 bytes added 📈 [gzipped])

Details

name           parsed_size           gzip_size
entry-login        +4964 B  (+0.2%)    +1498 B  (+0.2%)
entry-main         +4861 B  (+0.2%)    +1474 B  (+0.3%)
entry-stepper       -333 B  (-0.0%)     -174 B  (-0.0%)

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

Sections (~13626 bytes removed 📉 [gzipped])

Details

name                               parsed_size           gzip_size
checkout                               +8554 B  (+0.5%)    +1485 B  (+0.3%)
jetpack-connect                        -4286 B  (-0.4%)    -1348 B  (-0.4%)
themes                                 -4244 B  (-0.4%)    -1305 B  (-0.4%)
theme                                  -4244 B  (-0.6%)    -1305 B  (-0.5%)
site-settings                          -4244 B  (-0.3%)    -1333 B  (-0.3%)
hosting                                -4244 B  (-0.3%)    -1333 B  (-0.3%)
home                                   -4244 B  (-0.2%)    -1224 B  (-0.2%)
settings                               -3921 B  (-0.4%)    -1277 B  (-0.4%)
signup                                 -3910 B  (-1.4%)    -1338 B  (-2.1%)
accept-invite                          -2488 B  (-1.4%)     -614 B  (-1.2%)
plugins                                -1811 B  (-0.1%)     -736 B  (-0.1%)
customize                              -1811 B  (-0.6%)     -724 B  (-0.8%)
site-blocks                            -1798 B  (-0.3%)     -715 B  (-0.4%)
settings-writing                       -1798 B  (-0.3%)     -757 B  (-0.4%)
plans                                  -1798 B  (-0.1%)     -715 B  (-0.1%)
overview                               -1798 B  (-0.1%)     -764 B  (-0.1%)
me                                     -1798 B  (-0.3%)     -715 B  (-0.4%)
jetpack-cloud-settings                 -1798 B  (-0.2%)     -746 B  (-0.4%)
jetpack-cloud-pricing                  -1798 B  (-0.2%)     -791 B  (-0.3%)
jetpack-cloud-features-comparison      -1798 B  (-0.3%)     -791 B  (-0.4%)
help                                   -1798 B  (-0.3%)     -715 B  (-0.4%)
gutenberg-editor                       -1798 B  (-0.3%)     -735 B  (-0.4%)
email                                  -1798 B  (-0.2%)     -764 B  (-0.3%)
earn                                   -1798 B  (-0.2%)     -710 B  (-0.3%)
domains                                -1798 B  (-0.1%)     -764 B  (-0.1%)
account                                -1798 B  (-0.2%)     -715 B  (-0.3%)
site-purchases                         -1748 B  (-0.1%)     -742 B  (-0.1%)
purchases                              -1748 B  (-0.1%)     -707 B  (-0.1%)
security                               -1695 B  (-0.2%)     -702 B  (-0.3%)
privacy                                -1695 B  (-0.3%)     -699 B  (-0.4%)
notification-settings                  -1695 B  (-0.2%)     -702 B  (-0.3%)
jetpack-app                            -1695 B  (-0.4%)     -726 B  (-0.5%)
developer                              -1695 B  (-0.3%)     -700 B  (-0.4%)
account-close                          -1695 B  (-0.3%)     -701 B  (-0.4%)
marketplace                            -1475 B  (-0.3%)     -724 B  (-0.4%)
async-step-unified-domains              +468 B  (+0.0%)       +4 B  (+0.0%)
async-step-unified-plans                +463 B  (+0.0%)      -17 B  (-0.0%)
entrepreneur-flow                       +103 B  (+0.1%)      +28 B  (+0.1%)
stepper-user-step                        -92 B  (-0.0%)     -337 B  (-0.4%)
async-step-use-my-domain                 -92 B  (-0.0%)     -370 B  (-0.2%)
jetpack-cloud-partner-portal             +50 B  (+0.0%)       +8 B  (+0.0%)
a8c-for-agencies-purchases               +50 B  (+0.0%)       +8 B  (+0.0%)
a8c-for-agencies-client                  +50 B  (+0.0%)       +8 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 (~9061 bytes added 📈 [gzipped])

Details

name                                                                              parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal                                      +32961 B  (+2.8%)    +8605 B   (+2.6%)
async-load-design-blocks                                                              -4244 B  (-0.2%)    -1305 B   (-0.2%)
async-load-purchase-modal-wrapper                                                     -4205 B  (-1.1%)    -1343 B   (-1.1%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...      -4205 B  (-1.1%)    -1331 B   (-1.1%)
async-load-calypso-layout-masterbar-checkout                                          -3197 B  (-4.5%)    -1235 B   (-4.6%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                      -1798 B  (-7.4%)     -768 B  (-11.5%)
async-load-automattic-help-center                                                     -1798 B  (-0.3%)     -774 B   (-0.4%)
async-load-step-container-v-2-plans                                                    -305 B  (-1.2%)     -459 B   (-4.8%)
async-load-async-domain-step-wrapper                                                   -109 B  (-0.3%)      -90 B   (-0.6%)
async-load-signup-steps-woocommerce-install-transfer                                   +103 B  (+0.2%)      +25 B   (+0.2%)
async-load-signup-steps-woocommerce-install-step-store-address                         +103 B  (+0.1%)      +24 B   (+0.1%)
async-load-signup-steps-woocommerce-install-step-business-info                         +103 B  (+0.1%)      +23 B   (+0.1%)
async-load-signup-steps-woocommerce-install-confirm                                    +103 B  (+0.1%)      +26 B   (+0.1%)
async-load-signup-steps-social-profiles                                                +103 B  (+0.2%)      +20 B   (+0.1%)
async-load-signup-steps-site-options                                                   +103 B  (+0.2%)      +19 B   (+0.1%)
async-load-signup-steps-site                                                           +103 B  (+0.2%)      +20 B   (+0.1%)
async-load-signup-steps-rewind-were-backing                                            +103 B  (+0.3%)      +23 B   (+0.2%)
async-load-signup-steps-rewind-form-creds                                              +103 B  (+0.1%)      +17 B   (+0.1%)
async-load-signup-steps-plans-theme-preselected                                        +103 B  (+0.0%)      +24 B   (+0.0%)
async-load-signup-steps-plans                                                          +103 B  (+0.0%)      +24 B   (+0.0%)
async-load-signup-steps-hosting-decider                                                +103 B  (+0.3%)      +26 B   (+0.2%)
async-load-signup-steps-emails                                                         +103 B  (+0.1%)      +25 B   (+0.1%)
async-load-signup-steps-design-picker                                                  +103 B  (+0.2%)      +25 B   (+0.1%)
async-load-signup-steps-creds-permission                                               +103 B  (+0.1%)      +24 B   (+0.1%)
async-load-signup-steps-creds-confirm                                                  +103 B  (+0.2%)      +24 B   (+0.1%)
async-load-signup-steps-courses                                                        +103 B  (+0.1%)      +25 B   (+0.1%)
async-load-signup-steps-clone-start                                                    +103 B  (+0.2%)      +23 B   (+0.2%)
async-load-signup-steps-clone-ready                                                    +103 B  (+0.2%)      +24 B   (+0.1%)
async-load-signup-steps-clone-point                                                    +103 B  (+0.0%)      +22 B   (+0.0%)
async-load-signup-steps-clone-destination                                              +103 B  (+0.2%)      +18 B   (+0.1%)
async-load-signup-steps-clone-credentials                                              +103 B  (+0.1%)      +18 B   (+0.1%)
async-load-signup-steps-clone-cloning                                                  +103 B  (+0.2%)      +27 B   (+0.2%)
async-load-design-playground                                                           +103 B  (+0.0%)      +14 B   (+0.0%)
async-load-design                                                                      +103 B  (+0.0%)      +14 B   (+0.0%)
async-load-signup-steps-page-picker                                                     +39 B  (+0.0%)      +12 B   (+0.0%)
async-load-signup-steps-domains                                                         +15 B  (+0.0%)     -549 B   (-0.3%)
async-load-signup-steps-new-or-existing-site                                            -13 B  (-0.0%)     -229 B   (-1.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.

[matticbot]

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

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

• blaze-dashboard
• help-center
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug onboarding/checkout-uses-step-container-v2 on your sandbox.

[sirbrillig]

The video is great! Could you also include some basic before/after screenshots to highlight what this change solves? Unless the UI is supposed to remain identical and this is just an organizational change? It's not clear to me from the video what's different.

I notice this touches both the overall checkout layout as well as the masterbar checkout button in other parts of calypso so some before/after there too would be really helpful.

[zaguiini]

There you go @sirbrillig. Yes, the changes are mostly aesthetic and organizational, as StepContainerV2 introduces its own slots of content.

I notice this touches both the overall checkout layout as well as the masterbar checkout button in other parts of calypso so some before/after there too would be really helpful.

Yeah. StepContainerV2 is self-contained (includes the top bar for example) so we need to hide the one from the global masterbar.

[sirbrillig]

Thanks! That's perfect. It's really helpful not only for review but also for a year from now when we try to track down when something changed. 🙇

[zaguiini]

Since we were not awaiting these promises, the try/catch block here had no effect. Now we're silencing these errors.

cc @alshakero

[vykes-mac]

Tested mostly for regression in styling since the functionality remains.

Prod remains the same on Desktop

Everything also looks good on mobile with all the clickable elements working as should. Except the Terms of service on mobile footer but this is an existing bug.

[autumnfjeld]

Not all elements are according to the designs
This PR mostly focuses on getting the basics right, such as using the top bar and correct small viewport margins.

Just to be clear: we shouldn’t be giving design feedback here because the work does not include styling to design. That will come in another PR?

If there is another PR coming then we shouldn't close #101201.

I didn't find any functionality issues, but I'm wondering about design specs. For example, in FIgma

• Some elements are centered
• The checkout button says "Pay $ now"

[sirbrillig]

The checkout button says "Pay $ now"

FWIW the text (and styling) of the submit button changes currently based on the payment method selected. Notably, I think the credit card button reads "Pay X now" and the free purchase button reads "Complete checkout".

[zaguiini]

Just to be clear: we shouldn’t be giving design feedback here because the work does not include #101201. That will come in another PR?
If there is another PR coming then we shouldn't close #101201.
I didn't find any functionality issues, but I'm wondering about design specs. For example, in FIgma

@autumnfjeld, the goal for (this stage of) the onboarding consistency work is to use the top bar and/or wireframe, not to apply consistency internally within the steps according to the designs (i.e., make it pixel-perfect.)

Ideally, different teams would rework the page so it "deeply conforms" to the designs, like using the correct font sizes, paddings, colors, etc. The work we're doing right now is introductory as indicated here. p1742998171790499/1742954477.401969-slack-C04H4NY6STW

We can keep the issue open if you'd like, but I don't see us coming back to tweak the designs at least in this iteration.

[vykes-mac]

@fditrapani @nuriapenya Can you give your feedback on the tablet mobile layout of the After images on this PR? Particularly around edge paddings and spacing. We want to create another PR that improves the design based on your input.

[fditrapani]

Thanks for the ping. The only thing I noticed was the alignment on desktop. This is in Figma:

and this is what I see in production:

[nuriapenya]

This PR mostly focuses on getting the basics right, such as using the top bar and correct small viewport margins.

It's totally fine this way, and we can refine later on. This is a complicated page.

The biggest difference I see is below the fold, is that we lose a bit of margin under the headings, but I totally support this in favor of consistency and simplicity. Let's remember some countries/currencies can benefit from having more condensed layouts on small viewports.