P2 signup: add 'post-email confirmation' screen

[annemirasol]

Changes proposed in this Pull Request

• Part of the revised P2 signup flow project (p9lV3a-2MW-p2).
• Signup flow: display success screen if user has verified their email during signup.
• See p9lV3a-2Lp-p2#comment-3599 for details about this step.

Testing instructions

• ENABLE_FEATURES=no-force-sympathy yarn start

1. Check that verified users are skipped over:
   a. While logged in as a verified user, visit calypso.localhost:3000/start/p2-new. Since your user account is already verified, you should go straight to the p2-site step, skipping the p2-confirm-email step.
2. Check that unverified users are made to go through the email verification step:
   a. In incognito mode, visit calypso.localhost:3000/start/p2-new and sign up for a new acccount, using an email address that you have access to.
   b. After signing up, you should get the "Check your email" step. Do not close this window.
   c. Copy the verification link and paste it in a browser tab, within the same incognito session. This should mark your test user account as verified, but will redirect to Calypso home. The redirect will be fixed in a separate PR.
   d. Return to the window in 2b and reload the page. You should get the "Email confirmed" notice. Click the "Continue" button and you should get the next step.

Screens

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-23577
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-23577&env=jetpack

[matticbot]

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

App Entrypoints (~42 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                 -1699 B  (-0.1%)      -42 B  (-0.0%)
entry-login                 -103 B  (-0.0%)      -17 B  (-0.0%)
entry-gutenboarding         -103 B  (-0.0%)      -17 B  (-0.0%)
entry-domains-landing       -103 B  (-0.0%)      -17 B  (-0.0%)
entry-browsehappy           -103 B  (-0.1%)      -17 B  (-0.1%)

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

Sections (~21323 bytes removed 📉 [gzipped])

name                      parsed_size           gzip_size
media                          -651 B  (-0.0%)    -1054 B  (-0.2%)
settings                       -436 B  (-0.1%)      +30 B  (+0.0%)
checkout                       -322 B  (-0.0%)    -1243 B  (-0.3%)
signup                         +315 B  (+0.1%)      +41 B  (+0.1%)
jetpack-search                 -236 B  (-0.1%)     -857 B  (-1.3%)
settings-discussion            -235 B  (-0.1%)     +309 B  (+0.4%)
comments                       +226 B  (+0.0%)      -12 B  (-0.0%)
customize                      +191 B  (+0.1%)    +1437 B  (+2.6%)
site-purchases                 -189 B  (-0.0%)     -645 B  (-0.2%)
purchases                      -189 B  (-0.0%)     -645 B  (-0.2%)
settings-security              -175 B  (-0.0%)     -161 B  (-0.1%)
settings-performance           -143 B  (-0.0%)      -56 B  (-0.0%)
marketing                      -143 B  (-0.0%)      -56 B  (-0.0%)
preview                        -121 B  (-0.1%)      +87 B  (+0.2%)
gutenberg-editor               +116 B  (+0.0%)     +729 B  (+0.6%)
scan                           -105 B  (-0.0%)     +431 B  (+0.3%)
themes                          -99 B  (-0.0%)     -224 B  (-0.2%)
stats                           -87 B  (-0.0%)    -1235 B  (-0.8%)
earn                            -79 B  (-0.0%)      -18 B  (-0.0%)
hosting                         +76 B  (+0.0%)     +403 B  (+0.4%)
email                           +64 B  (+0.0%)      -61 B  (-0.0%)
accept-invite                   +63 B  (+0.0%)      +30 B  (+0.0%)
home                            -57 B  (-0.0%)     -143 B  (-0.1%)
people                          +53 B  (+0.0%)     +854 B  (+0.7%)
reader                          -45 B  (-0.0%)     -168 B  (-0.1%)
woocommerce-installation        -40 B  (-0.0%)      -18 B  (-0.0%)
woocommerce                     -40 B  (-0.0%)      -18 B  (-0.0%)
sites                           -40 B  (-0.0%)      -18 B  (-0.0%)
plans                           -40 B  (-0.0%)      -18 B  (-0.0%)
migrate                         -40 B  (-0.0%)      -18 B  (-0.0%)
jetpack-cloud-settings          -40 B  (-0.0%)      +12 B  (+0.0%)
jetpack-cloud-pricing           -40 B  (-0.0%)      -18 B  (-0.0%)
jetpack-cloud                   -40 B  (-0.0%)      -18 B  (-0.0%)
import                          -40 B  (-0.0%)     +356 B  (+0.4%)
google-my-business              -40 B  (-0.0%)      -18 B  (-0.0%)
export                          -40 B  (-0.0%)     +373 B  (+0.6%)
domains                         -40 B  (-0.0%)     -118 B  (-0.0%)
concierge                       -40 B  (-0.0%)      -18 B  (-0.0%)
activity                        -40 B  (-0.0%)      -18 B  (-0.0%)
jetpack-connect                 +23 B  (+0.0%)      +12 B  (+0.0%)
settings-jetpack                -20 B  (-0.0%)     -224 B  (-0.3%)
theme                           +19 B  (+0.0%)     +607 B  (+0.6%)
pages                           +19 B  (+0.0%)     +978 B  (+0.9%)
posts-custom                    -18 B  (-0.0%)     +487 B  (+0.3%)
posts                           -18 B  (-0.0%)     +487 B  (+0.3%)
plugins                         -17 B  (-0.0%)       -6 B  (-0.0%)
marketplace                     -17 B  (-0.0%)       -5 B  (-0.0%)
backup                          -17 B  (-0.0%)       -3 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 (~1207 bytes removed 📉 [gzipped])

name                                                         parsed_size           gzip_size
async-load-signup-steps-p2-confirm-email                         +1088 B  (+1.4%)     +274 B  (+1.1%)
async-load-design-blocks                                          +162 B  (+0.0%)      +12 B  (+0.0%)
async-load-signup-steps-theme-selection                           +116 B  (+0.1%)     +373 B  (+0.9%)
async-load-calypso-post-editor-editor-media-modal                 -103 B  (-0.0%)      -38 B  (-0.0%)
async-load-calypso-my-sites-resume-editing                         +90 B  (+0.1%)      +23 B  (+0.1%)
async-load-calypso-my-sites-sidebar                                +48 B  (+0.0%)     +315 B  (+0.4%)
async-load-signup-steps-difm-design-picker                         -41 B  (-0.0%)       -2 B  (-0.0%)
async-load-signup-steps-design-picker                              -41 B  (-0.0%)       +0 B
async-load-calypso-my-sites-site-settings-seo-settings-form        -41 B  (-0.0%)       +1 B  (+0.0%)
async-load-calypso-components-web-preview-component                -41 B  (-0.0%)      -54 B  (-0.0%)
async-load-publish                                                 -40 B  (-0.1%)      +53 B  (+0.3%)
async-load-calypso-post-editor-media-modal                         -40 B  (-0.0%)     +209 B  (+0.0%)
async-load-signup-steps-rewind-form-creds                          +20 B  (+0.0%)     -146 B  (-0.4%)
async-load-signup-steps-clone-credentials                          +20 B  (+0.0%)     -122 B  (-0.3%)
async-load-calypso-blocks-support-article-dialog-dialog            -17 B  (-0.0%)     -155 B  (-0.4%)
async-load-calypso-blocks-support-article-dialog                   -17 B  (-1.0%)       +9 B  (+1.2%)

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.

[unDemian]

Not sure if I'm missing something, since I've tried it twice, but I can only verify the account if I login first in the new tab and only afterwards paste the activation link.

Hmm, that's weird. Sounds like the second tab doesn't share your logged in session with the signup flow tab? After creating an acccount, you should be automatically logged in as that account, so it's surprising that it prompts you to log in.

When you go to wordpress.com in the second tab, does it show you are logged out?

However the issue is that reloading the "Check your email" page after I activate the account remains the same. If in the other tab I logout or I don't login in the first place reloading "Check your email" redirects me to http://calypso.localhost:3000/start/p2-new/user

http://calypso.localhost:3000/start/p2-new/user is what a logged out user would get. If you had manually logged out via the second tab, this makes sense.

When you activated your account, did it redirect you to wordpress.com/read?verified=1 and showed a notice like this?

Also, sorry I forgot to put that you will need to build with ENABLE_FEATURES=no-force-sympathy yarn start. Not doing this shouldn't have caused being stuck on the "Check your email" page, but it may cause skipping the "Email confirmed" page when you reload post-activation, since state rehydration might be skipped.

[annemirasol]

Here's a recording of what I'm seeing, if it helps: https://d.pr/v/sqIQQG

[unDemian]

Not sure what is happening, https://d.pr/v/yFH1oo but I still cannot reproduce it 🙁

[annemirasol]

Not sure what is happening, https://d.pr/v/yFH1oo but I still cannot reproduce it 🙁

Ahh I see now. Please turn off the Chrome incognito's third-party cookies blocking, as there'd be trouble due to calypso.localhost:3000 vs wordpress.com cookies. TIL logging in wouldn't work from calypso.localhost:3000 if third-party cookies are blocked.

[unDemian]

Looking good!

Ahh I see now. Please turn off the Chrome incognito's third-party cookies blocking, as there'd be trouble due to calypso.localhost:3000 vs wordpress.com cookies.

Great catch.

[a8ci18n]

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

Thank you @annemirasol for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.