Use A Domain I Own: Adding in transfer and connect actions

[delputnam]

Changes proposed in this Pull Request

This is the next step in the new "Use a domain I own" flow.

Once the "Transfer or Connect" pages are complete, we will need to allow the user to purchase the transfer or mapping or to add the mapping without a purchase in cases where the site is already on a paid plan.

Testing instructions

Load the page at /domains/add/use-my-domain/[blog slug] with an optional query string to specify the domain that will be mapped or transferred: ?initialQuery=[domain name]

When you get to the page that shows the options to transfer or connect, try both options on sites both with and without a paid plan.

When connecting a site with a paid plan, make sure that the domain is connected without going through the purchase step.
When connecting a site without a paid plan, make sure that the mapping is added to the cart and you are redirected to the purchase page.
When selecting transfers, you should be redirected to the transfer pre check page. Make sure you can properly start a transfer.

Screen capture of connecting a domain without going through the purchase flow:

Screen.Recording.2021-08-23.at.12.07.27.PM.mov

Screen capture of connecting a domain by purchasing a mapping:

Screen.Recording.2021-08-23.at.12.05.28.PM.mov

Screen capture of transferring a domain (Yes, domain has been locked and auth code has been changed after recording):

Screen.Recording.2021-08-23.at.2.10.06.PM.mov

For translators.
This is a screenshot including the notice in the top right of the screen with the new translation that is shown once the domain is successfully mapped:

[github-actions]

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

[matticbot]

This PR modifies the release build for notifications

To test your changes on WordPress.com, run install-plugin.sh notifications update/handle-transfer-and-connect-purchases on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-elI-p2

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/handle-transfer-and-connect-purchases on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[a8ci18n]

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 18 times:
translate( 'Domain mapping added! Please make sure to follow the next steps below.' ) ES Score: 7

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-main                  +205 B  (+0.0%)      +31 B  (+0.0%)
entry-login                 +205 B  (+0.0%)      +31 B  (+0.0%)
entry-gutenboarding         +205 B  (+0.0%)      +31 B  (+0.0%)
entry-domains-landing       +205 B  (+0.0%)      +31 B  (+0.0%)

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

Sections (~301 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
domains      +1069 B  (+0.1%)     +301 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.

[rafaelgallani]

Very nitpicky, but if only error is being used, you can simplify it:

Suggested change

	.catch( ( error ) => setDomainNameValidationError( error ) )
	.catch( setDomainNameValidationError )

[rafaelgallani]

I think that videos 1 and 2 have their labels inverted... 😅

Checked that both "Connect" options and the "Transfer" one are working as intended.

Transfer

Connect

Without a plan (checkout page, clicking on the button redirects you to the domain connect setup):

With a plan (Connect setup):

I left a single nitpicky comment, but LGTM!

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.