Add Help Center to the migration flow

[renatho]

Related to #94548

Proposed Changes

• Prepares the Stepper, so we can use Help Center in the setup flows.
• It fixes the help center on the checkout when used in the steps, like cases of the migration flows.
  • The issue is noticed when we click on "Visit Help Center and then "Still need help?" (See Testing Instructions of this PR for an example).
• Add Help Center link to the migration flows post-checkout.

Screen.Recording.2024-09-19.at.19.37.21.mov

TODO

• Solve context issues to pass the currentRoute and site properly.
• Improve Help Center context for migrations (start displaying migration items).
• Add help center for all the steps post-checkout.

Why are these changes being made?

• Help the user during the migration flows.

Testing Instructions

Check that Help Center is fixed in the checkout

• Navigate to /setup/migration.
• Select the "WordPress" option.
• Navigate until the checkout.
• Click on "Visit Help Center".
• Click on "Still need help?".
• Check that now the chat is properly displayed.

Check that Help Center is displayed post-checkout in the migration flows

• Continuing from the previous steps, complete the checkout.
• Check that you see the "Visit Help Center" link in the top right and it works properly.

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 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:build-120011

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120011&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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/help-center-to-migration-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 (~57 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper              -1260 B  (-0.1%)     -104 B  (-0.0%)
entry-main                  +420 B  (+0.0%)      +48 B  (+0.0%)
entry-subscriptions         -135 B  (-0.0%)       +1 B  (+0.0%)
entry-login                 -135 B  (-0.0%)       +1 B  (+0.0%)
entry-domains-landing       -135 B  (-0.0%)       +1 B  (+0.0%)
entry-browsehappy           -135 B  (-0.1%)       +1 B  (+0.0%)

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

Sections (~213 bytes removed 📉 [gzipped])

name                        parsed_size           gzip_size
with-theme-assembler-flow        -108 B  (-0.2%)      -12 B  (-0.1%)
update-options-flow              -108 B  (-0.2%)      -12 B  (-0.2%)
update-design-flow               -108 B  (-0.0%)      -14 B  (-0.0%)
trial-wooexpress-flow            -108 B  (-0.2%)      -13 B  (-0.2%)
tailored-ecommerce-flow          -108 B  (-0.2%)      -13 B  (-0.2%)
site-setup-wg                    -108 B  (-0.1%)      -12 B  (-0.1%)
site-setup-flow                  -108 B  (-0.1%)      -12 B  (-0.1%)
site-migration-flow              -108 B  (-0.2%)      -14 B  (-0.1%)
readymade-template-flow          -108 B  (-0.1%)      -12 B  (-0.0%)
migration-signup                 -108 B  (-0.2%)      -13 B  (-0.2%)
migration-flow                   -108 B  (-0.1%)       -9 B  (-0.1%)
import-flow                      -108 B  (-0.2%)      -14 B  (-0.1%)
hosted-site-migration-flow       -108 B  (-0.2%)      -13 B  (-0.1%)
free-post-setup-flow             -108 B  (-0.2%)      -12 B  (-0.2%)
free-flow                        -108 B  (-0.2%)      -12 B  (-0.1%)
entrepreneur-flow                -108 B  (-0.1%)      -12 B  (-0.0%)
assembler-first-flow             -108 B  (-0.1%)      -12 B  (-0.1%)
ai-assembler-flow                -108 B  (-0.1%)      -14 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.

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.

[renatho]

This was extracted, so we can also use it in the Stepper.

[renatho]

A new component to be easier to add the Help Center to the steps by passing this to the customizedActionButtons prop of the StepContainer component.

[renatho]

There are some challenges here to be fixed yet.