Stepper - Seller Experience: Edit email step

[markbiek]

Proposed Changes

This adds a new step allowing the user to edit their account email address.

Clicking "Edit email" from wooVerifyEmail takes you to the editEmail step.

Success after clicking "Send a verification to my new email" takes the user back to wooVerifyEmail.

Testing Instructions

** Success testing **

1. Go to http://calypso.localhost:3000/setup/wooVerifyEmail?siteSlug=[slug]&flags=signup/woo-verify-email and click "Edit email address".
2. Enter a new, unique email address and click "Send a verification to my new email".
3. You should be taken back to the wooVerifyEmail step and should receive a verification email.

** Failure testing **

1. Go to http://calypso.localhost:3000/setup/wooVerifyEmail?siteSlug=[slug]&flags=signup/woo-verify-email and click "Edit email address".
2. Enter an email address that's already in use (like bobo@bob.com) and click "Send a verification to my new email".
3. You should see an error notice as pictured below.

Closes #64163

CleanShot.2022-06-09.at.10.13.13.mp4

** Initial view **

** Error sending verification email **

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[a8ci18n]

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

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

[matticbot]

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

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

name                 parsed_size           gzip_size
entry-stepper            +2281 B  (+0.1%)     +456 B  (+0.0%)
entry-gutenboarding       +188 B  (+0.0%)      +57 B  (+0.0%)

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

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.

[andres-blanco]

I was testing the happy path, I got the verification email but the screen reads A verification email has been sent to [OLD_EMAIL]. I expected the message to refer to the email I've just entered. (You can see this behaviour in the video you posted).

The email is directed to the correct email tough.

[markbiek]

I was testing the happy path, I got the verification email but the screen reads A verification email has been sent to [OLD_EMAIL]. I expected the message to refer to the email I've just entered. (You can see this behaviour in the video you posted).

The email is directed to the correct email tough.

@andres-blanco Good catch. I bet the wooVerifyEmail step is pulling the current account email.

I probably need to store the edited email somewhere and have wooVerifyEmail conditionally load it.

[andres-blanco]

Tested both paths and it's looking good!

[markbiek]

Thanks @andres-blanco !

I haven't been able to thoroughly test myself because of my working-copy problems but I'll get those WIP commits cleaned up once I've got that figured out.

I think we're in good shape. Merging as soon as the tests pass.

[a8ci18n]

Translation for this Pull Request has now been finished.