Stepper: Add Flow.isSignupFlow and Flow.useSignupStartEventProps()

[daledupreez]

trafficstars

Related to:

• https://github.com/Automattic/automattic-analytics/issues/406
• https://github.com/Automattic/wp-calypso/pull/85769

Proposed Changes

• This PR explores requiring an explicit declaration for Stepper flows to be considered a signup flow via a new Flow.isSignupFlow flag. In turn, this explicit declaration controls whether we trigger a calypso_signup_start event for the flow.
  • The driver for this particular change is that after https://github.com/Automattic/wp-calypso/pull/85769 was merged, we're now logging calypso_signup_start events for a number of onboarding flows, not only signup flows
• The PR also explores a new useSignupStartEventProps() hook on the Flow type to make it possible for flows to augment the event props for the calypso_signup_start event.
• Finally, the PR sets the isSignupFlow flag to true for a subset of flows that I think should be considered signup flows, primarily for cases where they may create a site.

Testing Instructions

• TBD -- this is still a thought exercise/exploration.

Pre-merge Checklist

• [x] 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?
• [x] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [N/A] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• [N/A] 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[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper        +16 B  (+0.0%)      +19 B  (+0.0%)

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

Sections (~402 bytes added 📈 [gzipped])

name                           parsed_size           gzip_size
videopress-tv-flow                   +32 B  (+0.1%)      +11 B  (+0.1%)
update-design-flow                   +32 B  (+0.0%)      +11 B  (+0.0%)
write-flow                           +16 B  (+0.0%)      +10 B  (+0.0%)
with-theme-assembler-flow            +16 B  (+0.0%)      +12 B  (+0.1%)
videopress-flow                      +16 B  (+0.0%)      +11 B  (+0.0%)
update-options-flow                  +16 B  (+0.1%)      +11 B  (+0.2%)
trial-wooexpress-flow                +16 B  (+0.0%)      +12 B  (+0.2%)
transferring-hosted-site-flow        +16 B  (+0.0%)      +11 B  (+0.1%)
tailored-ecommerce-flow              +16 B  (+0.2%)       +9 B  (+0.3%)
start-writing-flow                   +16 B  (+0.1%)      +10 B  (+0.2%)
site-setup-flow                      +16 B  (+0.0%)       +8 B  (+0.1%)
site-migration-flow                  +16 B  (+0.0%)       +8 B  (+0.1%)
sensei-flow                          +16 B  (+0.0%)       +6 B  (+0.0%)
reblogging-flow                      +16 B  (+0.2%)      +11 B  (+0.4%)
podcasts-flow                        +16 B  (+0.0%)      +12 B  (+0.0%)
plugin-bundle-flow                   +16 B  (+0.0%)       +8 B  (+0.0%)
newsletter-post-setup-flow           +16 B  (+0.0%)      +10 B  (+0.0%)
newsletter-flow                      +16 B  (+0.1%)      +11 B  (+0.2%)
new-hosted-site-flow                 +16 B  (+0.3%)      +12 B  (+0.6%)
link-in-bio-tld-flow                 +16 B  (+0.0%)      +10 B  (+0.0%)
link-in-bio-post-setup-flow          +16 B  (+0.0%)       +9 B  (+0.0%)
link-in-bio-flow-domain              +16 B  (+0.1%)      +10 B  (+0.1%)
link-in-bio-flow                     +16 B  (+0.1%)      +12 B  (+0.3%)
import-hosted-site-flow              +16 B  (+0.0%)      +11 B  (+0.0%)
import-flow                          +16 B  (+0.0%)      +11 B  (+0.0%)
hundred-year-plan                    +16 B  (+0.0%)      +13 B  (+0.1%)
google-transfer                      +16 B  (+0.3%)      +11 B  (+0.6%)
free-post-setup-flow                 +16 B  (+0.1%)      +12 B  (+0.3%)
free-flow                            +16 B  (+0.0%)      +10 B  (+0.1%)
domain-user-transfer-flow            +16 B  (+0.0%)      +11 B  (+0.0%)
domain-transfer                      +16 B  (+0.3%)      +11 B  (+0.6%)
design-first-flow                    +16 B  (+0.1%)      +13 B  (+0.3%)
copy-site-flow                       +16 B  (+0.0%)       +8 B  (+0.0%)
connect-domain                       +16 B  (+0.1%)      +14 B  (+0.2%)
build-flow                           +16 B  (+0.0%)       +7 B  (+0.0%)
blog                                 +16 B  (+0.6%)      +11 B  (+0.8%)
assembler-first-flow                 +16 B  (+0.0%)      +12 B  (+0.1%)
ai-assembler-flow                    +16 B  (+0.0%)      +12 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.

[taipeicoder]

@daledupreez the approach LGTM, thanks for the implementation. I'll test the PR tomorrow since I'm nearing the EOD.

[gabrielcaires]

@daledupreez I left some optional suggestions

[taipeicoder]

Tested all the flows with isSignupFlow: true:

• ai-assembler
• assembler-first-flow
• design-first
• free
• hundred-year-plan
• import-flow
• import-hosted-site
• link-in-bio-tld
• link-in-bio
• new-hosted-site-flow
• newsletter
• reblogging
• tailored-ecommerce-flow
• trial-wooexpress-flow
• videopress

They work as intended except for tailored-ecommerce-flow as described https://github.com/Automattic/wp-calypso/pull/87758#discussion_r1500196769