Domains: Create 100-Year Domain flow #95081

leonardost · 2024-10-01T23:19:19Z

Proposed Changes

This diff creates the 100-Year Domain flow as described in p9Jlb4-e6E-p2.

In this flow, users are able to search and choose a .com/net/org domain.

Notes:

This PR hardcodes the $2000 price for 100-year domains since we still don't haven't implemented the actual product
For the same reason, checkout will also use the domains' regular prices instead of $2000

Screenshots

Initial step
Checkout

Why are these changes being made?

We want to offer 100-year domain registrations as a separate offer from the 100-year plan. More details in p9Jlb4-e6E-p2.

Testing Instructions

Build this branch locally or open the live Calypso link
Enable USE_STORE_SANDBOX mode in your backend to prevent actual purchases
Visit the flow at /setup/hundred-year-domain

Try to test the flow as thoroughly as possible:

Complete the flow normally and ensure everything seems ok
- Ensure that, after the flow is complete, the domain gets a domain-only site
Test both in mobile and desktop layouts
Try to hit "Back" in your browser and ensure the flow doesn't break
Remove the domain from the shopping cart in the checkout page and ensure you go back to the domain search step
Start the flow logged-in and logged-out
- If you're logged-out, you should be able to search and select a domain before having to log in
Ensure the domain search only returns .com/net/org domains

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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 · 2024-10-01T23:19:32Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-122146&env=a8c-for-agencies

matticbot · 2024-10-01T23:28:24Z

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

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

name                   parsed_size           gzip_size
entry-stepper               +573 B  (+0.0%)     +104 B  (+0.0%)
entry-main                  +439 B  (+0.0%)      +76 B  (+0.0%)
entry-subscriptions         +381 B  (+0.0%)     +267 B  (+0.1%)
entry-login                 +313 B  (+0.0%)      +93 B  (+0.0%)
entry-domains-landing       +313 B  (+0.0%)      +93 B  (+0.0%)
entry-browsehappy           +313 B  (+0.2%)      +93 B  (+0.2%)

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

Sections (~6674 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
hundred-year-domain                   +49327 B    (new)   +14811 B    (new)
update-design-flow                     +1489 B  (+0.1%)     +296 B  (+0.1%)
link-in-bio-tld-flow                   +1396 B  (+0.1%)     +305 B  (+0.1%)
copy-site-flow                         +1082 B  (+0.2%)     +401 B  (+0.2%)
domains                                 +751 B  (+0.0%)     +120 B  (+0.0%)
videopress-flow                         +589 B  (+0.1%)     +318 B  (+0.1%)
signup                                  +514 B  (+0.2%)      +43 B  (+0.1%)
sensei-flow                             +496 B  (+0.1%)     -509 B  (-0.3%)
account                                 +298 B  (+0.0%)     +356 B  (+0.1%)
start-writing-flow                      +216 B  (+0.7%)      +31 B  (+0.4%)
onboarding-flow                         +216 B  (+1.2%)      +25 B  (+0.4%)
design-first-flow                       +216 B  (+0.7%)      +29 B  (+0.3%)
site-purchases                          +205 B  (+0.0%)      +53 B  (+0.0%)
marketplace                             +142 B  (+0.0%)      +62 B  (+0.0%)
plugins                                 +136 B  (+0.0%)     +173 B  (+0.0%)
home                                    +136 B  (+0.0%)     +297 B  (+0.1%)
videopress-tv-flow                      +128 B  (+0.2%)     -502 B  (-2.0%)
hosting                                 +115 B  (+0.0%)      +35 B  (+0.0%)
with-theme-assembler-flow               +108 B  (+0.2%)      +11 B  (+0.1%)
update-options-flow                     +108 B  (+0.2%)      +12 B  (+0.2%)
trial-wooexpress-flow                   +108 B  (+0.2%)      +10 B  (+0.1%)
tailored-ecommerce-flow                 +108 B  (+0.2%)      +12 B  (+0.2%)
site-setup-wg                           +108 B  (+0.1%)      +15 B  (+0.1%)
site-setup-flow                         +108 B  (+0.1%)      +15 B  (+0.1%)
site-migration-flow                     +108 B  (+0.2%)      +10 B  (+0.1%)
reblogging-flow                         +108 B  (+1.8%)      +23 B  (+1.2%)
readymade-template-flow                 +108 B  (+0.1%)      +12 B  (+0.0%)
newsletter-flow                         +108 B  (+0.4%)      +25 B  (+0.3%)
migration-signup                        +108 B  (+0.2%)      +12 B  (+0.2%)
migration-flow                          +108 B  (+0.1%)      +12 B  (+0.1%)
link-in-bio-flow                        +108 B  (+0.6%)      +24 B  (+0.5%)
import-flow                             +108 B  (+0.2%)      +11 B  (+0.1%)
hundred-year-plan                       +108 B  (+0.3%)      +14 B  (+0.1%)
hosted-site-migration-flow              +108 B  (+0.2%)      +10 B  (+0.1%)
google-transfer                         +108 B  (+2.6%)       +3 B  (+0.2%)
free-post-setup-flow                    +108 B  (+0.2%)      +12 B  (+0.2%)
free-flow                               +108 B  (+0.2%)      +13 B  (+0.1%)
entrepreneur-flow                       +108 B  (+0.1%)      +10 B  (+0.0%)
domain-transfer                         +108 B  (+2.8%)       +4 B  (+0.3%)
assembler-first-flow                    +108 B  (+0.1%)      +11 B  (+0.1%)
ai-assembler-flow                       +108 B  (+0.1%)      +12 B  (+0.1%)
settings-security                       +103 B  (+0.0%)      +10 B  (+0.0%)
people                                  +103 B  (+0.0%)      +12 B  (+0.0%)
newsletter-post-setup-flow              +103 B  (+0.1%)      +24 B  (+0.1%)
link-in-bio-post-setup-flow             +103 B  (+0.1%)      +24 B  (+0.1%)
domain-user-transfer-flow               +103 B  (+0.0%)      +19 B  (+0.0%)
themes                                  +102 B  (+0.0%)      +44 B  (+0.0%)
theme                                   +102 B  (+0.0%)      +44 B  (+0.0%)
site-blocks                             +102 B  (+0.0%)      +37 B  (+0.0%)
settings                                +102 B  (+0.0%)      +40 B  (+0.0%)
security                                +102 B  (+0.0%)      +98 B  (+0.0%)
purchases                               +102 B  (+0.0%)      +40 B  (+0.0%)
privacy                                 +102 B  (+0.0%)      +37 B  (+0.0%)
plans                                   +102 B  (+0.0%)      +93 B  (+0.0%)
notification-settings                   +102 B  (+0.0%)      +35 B  (+0.0%)
me                                      +102 B  (+0.0%)      +37 B  (+0.0%)
jetpack-connect                         +102 B  (+0.0%)     +170 B  (+0.1%)
jetpack-cloud-settings                  +102 B  (+0.0%)      +37 B  (+0.0%)
jetpack-cloud-pricing                   +102 B  (+0.0%)     +197 B  (+0.1%)
jetpack-cloud-features-comparison       +102 B  (+0.0%)     +133 B  (+0.1%)
jetpack-app                             +102 B  (+0.0%)      -38 B  (-0.0%)
help                                    +102 B  (+0.0%)      +37 B  (+0.0%)
email                                   +102 B  (+0.0%)      +38 B  (+0.0%)
developer                               +102 B  (+0.0%)      +37 B  (+0.0%)
checkout                                +102 B  (+0.0%)      +61 B  (+0.0%)
account-close                           +102 B  (+0.0%)      +37 B  (+0.0%)
staging-site                             +87 B  (+0.0%)       -8 B  (-0.0%)
sites-dashboard                          +74 B  (+0.0%)      +21 B  (+0.0%)
site-performance                         +74 B  (+0.0%)      +21 B  (+0.0%)
site-monitoring                          +74 B  (+0.0%)      +21 B  (+0.0%)
site-logs                                +74 B  (+0.0%)      +21 B  (+0.0%)
hosting-features                         +74 B  (+0.0%)      +21 B  (+0.0%)
github-deployments                       +74 B  (+0.0%)      +21 B  (+0.0%)
stats                                    +69 B  (+0.0%)     +342 B  (+0.1%)
earn                                     -62 B  (-0.0%)      -45 B  (-0.0%)
reader                                   +34 B  (+0.0%)     +170 B  (+0.1%)
jetpack-cloud-plugin-management          +34 B  (+0.0%)     +291 B  (+0.0%)
subscribers                              -28 B  (-0.0%)     +236 B  (+0.1%)
connect-domain                           +28 B  (+0.1%)      +19 B  (+0.3%)
write-flow                               +15 B  (+0.0%)       +7 B  (+0.0%)
transferring-hosted-site-flow            +15 B  (+0.0%)       +7 B  (+0.0%)
plugin-bundle-flow                       +15 B  (+0.0%)       +7 B  (+0.0%)
import-hosted-site-flow                  +15 B  (+0.0%)       +6 B  (+0.0%)
build-flow                               +15 B  (+0.0%)       +6 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 (~523 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-domains                                                        +649 B  (+0.1%)     +258 B  (+0.2%)
async-load-design-blocks                                                               +142 B  (+0.0%)      +51 B  (+0.0%)
async-load-signup-steps-site-options                                                   +103 B  (+0.2%)      +27 B  (+0.2%)
async-load-signup-steps-rewind-form-creds                                              +103 B  (+0.1%)      +40 B  (+0.2%)
async-load-signup-steps-clone-credentials                                              +103 B  (+0.1%)      +40 B  (+0.2%)
async-load-design-playground                                                           +103 B  (+0.0%)      +23 B  (+0.0%)
async-load-design                                                                      +103 B  (+0.0%)      +23 B  (+0.0%)
async-load-purchase-modal-wrapper                                                      +102 B  (+0.0%)      +38 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...       +102 B  (+0.0%)      +38 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                       +102 B  (+0.4%)      +38 B  (+0.6%)
async-load-calypso-blocks-editor-checkout-modal                                        +102 B  (+0.0%)      +37 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout                                            +74 B  (+0.1%)      +24 B  (+0.1%)
async-load-calypso-my-sites-checkout-modal                                              +28 B  (+0.0%)      +17 B  (+0.0%)

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.

matticbot · 2024-10-02T23:10:09Z

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/hundred-year-domain-flow on your sandbox.

packages/shopping-cart/src/types.ts

StevenPartridge

Read through the whole thing and left a few small comments. Didn't see any issues. Going to build and test locally now :)

client/landing/stepper/declarative-flow/internals/steps-repository/domains/index.tsx

client/landing/stepper/declarative-flow/internals/steps-repository/domains/style.scss

client/lib/domains/registration/availability-messages.js

StevenPartridge · 2024-10-11T00:21:31Z

The left sidebar deceived me, I thought a couple of times to navigate by clicking on

StevenPartridge

The css of the domain purchase flow changed recently, if possible, I'd suggest matching that layout for consistency.

Other than that, I tested through this fully and it's working great, a very clean update:

I did have some weirdness pressing the back button from in the cart, going back to the "Setting up your world" screen and couldn't escape it
I left a few other comments above, mostly just nits :) Great work, I'm super excited to see the kinds of websites that sign up for 100 years!

StevenPartridge

Left one comment regarding a small css issue, but otherwise everything I tested and the code both look really great :)

StevenPartridge · 2024-10-15T00:06:25Z

client/landing/stepper/declarative-flow/internals/steps-repository/domains/style.scss

I'm not certain where best to comment, I think it's this file :) Everything I tested and looked at is working perfectly, it looks really great on all screen sizes. I just found one small inconsistency, a margin of 20px on the left at the 600px breakpoint, classes [.domains .step-container]

100-year-domain_left-margin.mov

gius80 · 2024-10-16T12:27:19Z

That's a great job @leonardost, thanks for this PR!

I have only a couple of comments:

there is a left white margin when the viewport width is between 600 and 1279px
when you click Select button, sometimes it takes a couple of seconds to load the next screen and it seems that the button doesn't work. Maybe we can set disabled on the buttons or set a loading status?
probably it is not related to this particular flow, but I noticed that if you select Empty cart after clicking the X button in the checkout, the cart is not emptied (see video below)

QyzGiQ.mp4

leonardost · 2024-10-16T23:54:00Z

client/components/domains/register-domain-step/index.jsx

@@ -1514,6 +1524,7 @@ class RegisterDomainStep extends Component {
 				this.props.onAddDomain( suggestion, position, previousState );
 			}

+			this.setState( { pendingCheckSuggestion: suggestion } );


This was removed in #84171 but I'm not sure why. Without this, the "Select" domain button doesn't have a "busy" state when it's clicked.

leonardost · 2024-10-16T23:58:02Z

@StevenPartridge @gius80 thanks for your reviews! I've fixed the CSS and (re)added the busy state for the "Select" button.

I think I'll leave the Empty cart issue for another PR as this one already has a lot of stuff 🙂

gius80

Thanks for the update @leonardost! Looks great now!

I found another potential issue but it's for the next phase of the project (checkout). I'll post it here just to as a note. We should prevent adding more multiple domains in the cart for this flow.

* Submit the domains step on checkout back button click. * Use a cookie to retrieve dependencies. * Use session storage to correctly persist domains data. * Limit persisted data to onboarding flow. * Clean up code. * Clean up code. * Fix the paid domain showing up again. * Rename DomainsDependencies and clear storage in all flows.

…om/net/org

…0-Year domain flow

This reverts commit 0949664.

a8ci18n · 2024-10-17T21:20:18Z

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

a8ci18n · 2024-10-20T22:29:44Z

Translation for this Pull Request has now been finished.

leonardost force-pushed the add/hundred-year-domain-flow branch from 3d6b3fa to b647a40 Compare October 2, 2024 22:59

leonardost force-pushed the add/hundred-year-domain-flow branch from b647a40 to 58a5532 Compare October 9, 2024 12:58

leonardost changed the title ~~(WIP) Domains: Create 100-Year Domain flow~~ Domains: Create 100-Year Domain flow Oct 10, 2024

leonardost marked this pull request as ready for review October 10, 2024 22:36

leonardost requested review from a team as code owners October 10, 2024 22:36

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 10, 2024

leonardost force-pushed the add/hundred-year-domain-flow branch from 84fdc35 to 3fe77e0 Compare October 10, 2024 22:36

sirbrillig reviewed Oct 10, 2024

View reviewed changes

packages/shopping-cart/src/types.ts Show resolved Hide resolved

StevenPartridge reviewed Oct 11, 2024

View reviewed changes

StevenPartridge requested changes Oct 11, 2024

View reviewed changes

leonardost force-pushed the add/hundred-year-domain-flow branch from 36d77ee to 97af23f Compare October 14, 2024 23:32

StevenPartridge self-requested a review October 14, 2024 23:51

StevenPartridge approved these changes Oct 15, 2024

View reviewed changes

leonardost commented Oct 16, 2024

View reviewed changes

gius80 approved these changes Oct 17, 2024

View reviewed changes

allilevine and others added 7 commits October 17, 2024 15:53

Add styling and checks for the flow in the releavnt steps

17b7c6f

Move CSS class

27572cb

Add domain to the shopping cart, WIP

8e6a4d4

Remove free WPCOM subdomain from generated suggestions

7ee7f6c

Skip availability check for FQDN in 1--year domain flow if it's not c…

9aef942

…om/net/org

Small refactor

c1f458c

leonardost added 22 commits October 17, 2024 15:53

Small refactors

4e48a3d

Fix flow to work with logged out users

93cf947

Remove unnecessary code to add domain to shopping cart

df1c64b

Add is_hundred_year_domain flag when a domain is selected in the 10…

a28c102

…0-Year domain flow

Update "Learn More" modal title in 100-Year domain flow

85d3a3b

Improve back navigation inside the 100-Year domain flow

0b08d84

Revert unwanted change

44d33a2

Remove commented CSS

6b904b5

Move const definition outside function

38d3f45

Do not create site for the 100-year domain flow

60ac351

Add delay in the "Processing" step to show the Earth video for a while

d5d233d

Update flow name check

dd890b5

Update TLD restriction error message with code review suggestion

95f0522

Fix mobile CSS styling

f2770c6

After logging in, redirect user to processing step

d2783e2

Fix 100-year domain flow when starting logged-out

b5a4110

Enable 100-year domain flow only for dev and staging environments

7f029cd

Remove unneeded CSS code

55931ca

Enable 100-year-domain feature flag in wpcalypso env

0fd483f

Fix left white margin in smaller viewports

8cc35b8

Fix incorrect domain name layout in smaller viewports

214dcd3

Add "busy" state to the domain selection button

d4e0192

leonardost force-pushed the add/hundred-year-domain-flow branch from 57c541b to d4e0192 Compare October 17, 2024 18:53

leonardost merged commit 0949664 into trunk Oct 17, 2024
11 checks passed

leonardost deleted the add/hundred-year-domain-flow branch October 17, 2024 19:12

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 17, 2024

leonardost added a commit that referenced this pull request Oct 17, 2024

Revert "Domains: Create 100-Year Domain flow (#95081)"

37b44bf

This reverts commit 0949664.

leonardost mentioned this pull request Oct 17, 2024

Revert "Domains: Create 100-Year Domain flow" #95486

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Domains: Create 100-Year Domain flow #95081

Domains: Create 100-Year Domain flow #95081

leonardost commented Oct 1, 2024 •

edited

Loading

github-actions bot commented Oct 1, 2024 •

edited by matticbot

Loading

matticbot commented Oct 1, 2024 •

edited

Loading

matticbot commented Oct 2, 2024 •

edited

Loading

StevenPartridge left a comment

StevenPartridge commented Oct 11, 2024

StevenPartridge left a comment

StevenPartridge left a comment

StevenPartridge Oct 15, 2024

gius80 commented Oct 16, 2024 •

edited

Loading

leonardost Oct 16, 2024 •

edited

Loading

leonardost commented Oct 16, 2024

gius80 left a comment •

edited

Loading

a8ci18n commented Oct 17, 2024

a8ci18n commented Oct 20, 2024

Domains: Create 100-Year Domain flow #95081

Domains: Create 100-Year Domain flow #95081

Conversation

leonardost commented Oct 1, 2024 • edited Loading

Proposed Changes

Screenshots

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 1, 2024 • edited by matticbot Loading

matticbot commented Oct 1, 2024 • edited Loading

matticbot commented Oct 2, 2024 • edited Loading

StevenPartridge left a comment

Choose a reason for hiding this comment

StevenPartridge commented Oct 11, 2024

StevenPartridge left a comment

Choose a reason for hiding this comment

StevenPartridge left a comment

Choose a reason for hiding this comment

StevenPartridge Oct 15, 2024

Choose a reason for hiding this comment

gius80 commented Oct 16, 2024 • edited Loading

leonardost Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

leonardost commented Oct 16, 2024

gius80 left a comment • edited Loading

Choose a reason for hiding this comment

a8ci18n commented Oct 17, 2024

a8ci18n commented Oct 20, 2024

leonardost commented Oct 1, 2024 •

edited

Loading

github-actions bot commented Oct 1, 2024 •

edited by matticbot

Loading

matticbot commented Oct 1, 2024 •

edited

Loading

matticbot commented Oct 2, 2024 •

edited

Loading

gius80 commented Oct 16, 2024 •

edited

Loading

leonardost Oct 16, 2024 •

edited

Loading

gius80 left a comment •

edited

Loading