Domains: Create flow to buy a domain for Gravatar #90414

leonardost · 2024-05-07T22:04:15Z

Proposed Changes

This PR creates a new domain-for-gravatar onboarding flow that will be used for the Domains on Gravatar project (pcYYhz-24z-p2). This flow lets users select one .link domain (domain search is restricted to .link domains by the gravatar vendor string) and buy it. The 100% discount coupon will abe applied in the backend.

Note: There's some problem when buying .link domains in the test environment, so this screen recording uses other TLDs than .link.

Screen.Recording.2024-05-15.at.19.53.16.mov

Testing Instructions

Enable USE_STORE_SANDBOX in your backend to prevent buying domains in production
Open the live Calypso link or build this branch locally
Navigate to /start/domain-for-gravatar?search=yes&new=your-test-domain.com (you can change your-test-domain.com by any domain you want)
Ensure your-test-domain.com (or the domain you typed in the new parameter) is the default search query and was searched for
Purchase it
Ensure a domain-only site is created for it

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-05-07T22:04:27Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-05-07T22:14:19Z

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

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

name                   parsed_size           gzip_size
entry-stepper              +1589 B  (+0.1%)     +180 B  (+0.0%)
entry-main                 +1530 B  (+0.1%)     +162 B  (+0.0%)
entry-subscriptions         +126 B  (+0.0%)      +55 B  (+0.0%)
entry-login                 +126 B  (+0.0%)      +55 B  (+0.0%)
entry-domains-landing       +126 B  (+0.0%)      +55 B  (+0.0%)
entry-browsehappy           +126 B  (+0.1%)      +55 B  (+0.1%)

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

Sections (~2376 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
site-blocks                            +2605 B  (+0.3%)    +1822 B  (+0.8%)
security                               +2605 B  (+0.3%)    +1827 B  (+0.7%)
purchases                              +2605 B  (+0.1%)    +1824 B  (+0.3%)
privacy                                +2605 B  (+0.3%)    +1822 B  (+0.8%)
notification-settings                  +2605 B  (+0.3%)    +1822 B  (+0.7%)
me                                     +2605 B  (+0.3%)    +1822 B  (+0.8%)
help                                   +2605 B  (+0.3%)    +1822 B  (+0.8%)
developer                              +2605 B  (+0.3%)    +1822 B  (+0.8%)
account-close                          +2605 B  (+0.3%)    +1822 B  (+0.8%)
account                                +2605 B  (+0.3%)    +1827 B  (+0.7%)
site-purchases                         +2512 B  (+0.2%)    +1045 B  (+0.2%)
jetpack-connect                        +2512 B  (+0.2%)    +1040 B  (+0.3%)
jetpack-cloud-pricing                  +2512 B  (+0.3%)    +1043 B  (+0.4%)
jetpack-cloud-features-comparison      +2512 B  (+0.3%)    +1070 B  (+0.5%)
email                                  +2512 B  (+0.3%)    +1097 B  (+0.5%)
update-design-flow                      +878 B  (+0.1%)     +193 B  (+0.1%)
link-in-bio-tld-flow                    +878 B  (+0.1%)     +185 B  (+0.0%)
domains                                 +668 B  (+0.0%)     +229 B  (+0.0%)
videopress-flow                         +609 B  (+0.1%)     +108 B  (+0.0%)
sensei-flow                             +609 B  (+0.1%)     +119 B  (+0.1%)
podcasts-flow                           +609 B  (+0.1%)     +119 B  (+0.1%)
copy-site-flow                          +609 B  (+0.1%)     +119 B  (+0.1%)
signup                                  +413 B  (+0.1%)     +138 B  (+0.2%)
marketplace                             +371 B  (+0.0%)    +1101 B  (+0.4%)
home                                    +340 B  (+0.0%)    +1187 B  (+0.3%)
themes                                  +144 B  (+0.0%)      +88 B  (+0.0%)
theme                                   +144 B  (+0.0%)      -38 B  (-0.0%)
plugins                                 +144 B  (+0.0%)      +51 B  (+0.0%)
plans                                   +144 B  (+0.0%)      +63 B  (+0.0%)
jetpack-app                             +144 B  (+0.0%)      +66 B  (+0.1%)
checkout                                +144 B  (+0.0%)      +86 B  (+0.0%)
link-in-bio-flow-domain                  +85 B  (+0.3%)      +45 B  (+0.6%)
connect-domain                           +85 B  (+0.3%)      +45 B  (+0.6%)
sites-dashboard                          +59 B  (+0.0%)      +22 B  (+0.0%)
site-monitoring                          +59 B  (+0.0%)      +22 B  (+0.0%)
settings                                 +59 B  (+0.0%)      +21 B  (+0.0%)
hosting                                  +59 B  (+0.0%)      +22 B  (+0.0%)
github-deployments                       +59 B  (+0.0%)      +22 B  (+0.0%)
dev-tools-promo                          +59 B  (+0.0%)      +22 B  (+0.0%)
stats                                    +13 B  (+0.0%)      +24 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 (~1208 bytes added 📈 [gzipped])

name                                                                              parsed_size            gzip_size
async-load-calypso-my-sites-current-site-stale-cart-items-notice                      +2512 B  (+11.3%)    +1042 B  (+18.5%)
async-load-signup-steps-domains                                                       +1083 B   (+0.2%)     +223 B   (+0.1%)
async-load-design-blocks                                                               +175 B   (+0.0%)      +73 B   (+0.0%)
async-load-purchase-modal-wrapper                                                      +144 B   (+0.0%)      +66 B   (+0.1%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...       +144 B   (+0.0%)      +67 B   (+0.1%)
async-load-calypso-blocks-editor-checkout-modal                                        +144 B   (+0.0%)      +49 B   (+0.0%)
async-load-calypso-my-sites-checkout-modal                                              +85 B   (+0.0%)      +57 B   (+0.0%)
async-load-design                                                                       +59 B   (+0.0%)      +24 B   (+0.0%)
async-load-calypso-layout-masterbar-checkout-tsx                                        +59 B   (+0.1%)      +20 B   (+0.0%)
async-load-calypso-layout-masterbar-checkout                                            +59 B   (+0.1%)      +21 B   (+0.1%)

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-05-14T18:46:03Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

editing-toolkit
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/flow-for-gravatar-domain on your sandbox.

leonardost · 2024-05-15T23:00:51Z

packages/domain-picker/src/utils/index.ts


 export function getDomainSuggestionsVendor(
 	options: DomainSuggestionsVendorOptions = {}
 ): DomainSuggestionsVendor {
+	if ( isDomainForGravatarFlow( options.flowName ) ) {
+		return 'gravatar';


You can change this for variation2_front while the problem with .link domains in the test environment is not fixed

leonardost · 2024-05-15T23:03:12Z

client/signup/config/flows-pure.js

@@ -397,6 +397,16 @@ export function generateFlows( {
 			showRecaptcha: true,
 			hideProgressIndicator: true,
 		},
+		{
+			name: 'domain-for-gravatar',
+			steps: [ 'domain-only', 'site-or-domain', 'site-picker' ],


I think the site-or-domain and site-picker steps should be removed from this flow, since they're always skipped by default. I wasn't able to remove them because I wasn't sure how to create the domain-only site and how to provide the siteId and siteSlug flow dependencies without them 🤔

leonardost · 2024-05-15T23:03:54Z

client/signup/config/flows-pure.js

+		{
+			name: 'domain-for-gravatar',
+			steps: [ 'domain-only', 'site-or-domain', 'site-picker' ],
+			destination: getDomainSignupFlowDestination, // TODO: Redirect to Gravatar


We might want to either create a new thank you page for the Gravatar flow or somehow redirect to the Gravatar profile page when checkout completes, not sure how to do that

ramynasr

I didn't test the UI yet, Just left some suggestions.

I also think we need to disable multi domain select. I believe we said we would only allow selecting one domain for this step. This should also remove a few complications, I think.

ramynasr · 2024-05-16T01:02:26Z

client/components/domains/domain-product-price/index.jsx

+			<div className={ className }>
+				<div className="domain-product-price__free-text">
+					<span className="domain-product-price__free-price">
+						{ translate( 'Free domain for one year' ) }


What do you think about using Free for first year? That was the text used on Gravatar's side as well, if I remember correctly.

It also matches the method name :)

I agree 👍 I had used Free domain for one year because it was being used for some other flow, but I like your suggestion better. I'll use Free for the first year since it's the same as the text we use when there are plans ("Free for the first year with annual paid plans")

ramynasr · 2024-05-16T01:12:22Z

client/signup/steps/domains/index.jsx

+				domain: suggestion.domain_name,
+				productSlug: suggestion.product_slug,
+				extra: {
+					domain_for_gravatar: true,


what do you think about is_gravatar_domain? to follow the is_* for booleans.

Yep, that makes sense 👍

gius80

I tested the flow and works greats! I also agree with @ramynasr's suggestions.

About the 2 skipped step, I think your solution it's the best one. Otherwise we have to create a new step cloning domain-only one, and it's not ideal.

leonardost · 2024-05-16T15:55:37Z

Thanks @ramynasr and @gius80 for the review!

I also think we need to disable multi domain select. I believe we said we would only allow selecting one domain for this step. This should also remove a few complications, I think.

@ramynasr multi-domain selection is disabled for this flow, the flows where it's enabled are domain (domain-only flow) and onboarding.

…r flow

This fixes an issue where the Gravatar flow introduced in PR #90414 showed discounted prices even when the discount was not applied.

leonardost changed the title ~~(WIP) Domains: Create flow to buy a domain for Gravatar~~ Domains: Create flow to buy a domain for Gravatar May 7, 2024

leonardost force-pushed the add/flow-for-gravatar-domain branch from 984c4bf to bd3db90 Compare May 13, 2024 22:23

leonardost marked this pull request as ready for review May 15, 2024 22:59

leonardost requested a review from a team as a code owner May 15, 2024 22:59

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

leonardost commented May 15, 2024

View reviewed changes

ramynasr reviewed May 16, 2024

View reviewed changes

gius80 approved these changes May 16, 2024

View reviewed changes

leonardost force-pushed the add/flow-for-gravatar-domain branch 2 times, most recently from f2a64b4 to 75be13b Compare May 21, 2024 18:07

leonardost added 13 commits May 22, 2024 18:30

Add domain-for-gravatar to reskinned flows array

d6402d6

Add domain-for-gravatar flow in flows-pure.js

b87d69e

Hide upsells in domain search page in domain-for-gravatar flow

b22d6d7

Skip site-or-domain step for the domain-for-gravatar flow

09d9cd7

Remove unnecessary steps from the flow

219d278

Remove "Back to sites" backlink in Gravatar domain flow

163c829

Show "Free domain for one year" in the Gravatar domain search

6420b3c

Use "gravatar" vendor string for Gravatar domain search

ee461a3

Add domain_for_gravatar property to domains selected in the Gravata…

5873e8f

…r flow

Small refactor

170a302

Update copy with code review suggestions

df702a5

Remove unused variables

962fbcc

Fix comments

a29c21b

leonardost force-pushed the add/flow-for-gravatar-domain branch from 0eac081 to a29c21b Compare May 22, 2024 21:35

leonardost merged commit 4630886 into trunk May 22, 2024
11 checks passed

leonardost deleted the add/flow-for-gravatar-domain branch May 22, 2024 22:10

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 May 22, 2024

This was referenced May 22, 2024

Domains: Remove WPCOM upsells in Gravatar flow checkout thank-you page #91032

Closed

Domains: Remove WPCOM upsells in Gravatar flow checkout thank-you page (alternative) #91069

Merged

ramynasr mentioned this pull request May 24, 2024

Gravatar Domains: Show the regular price formatting when the domain is not on sale #91080

Merged

leonardost mentioned this pull request May 29, 2024

Domains: Prepare DomainOnlyThankYou component to the Gravatar domain flow #91260

Merged

7 tasks

ramynasr added a commit that referenced this pull request May 31, 2024

Gravatar Domains: Show the correct price formatting

b77ae29

This fixes an issue where the Gravatar flow introduced in PR #90414 showed discounted prices even when the discount was not applied.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Domains: Create flow to buy a domain for Gravatar #90414

Domains: Create flow to buy a domain for Gravatar #90414

leonardost commented May 7, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited by matticbot

matticbot commented May 7, 2024 •

edited

matticbot commented May 14, 2024 •

edited

leonardost May 15, 2024

leonardost May 15, 2024

leonardost May 15, 2024 •

edited

ramynasr left a comment

ramynasr May 16, 2024

leonardost May 16, 2024 •

edited

ramynasr May 16, 2024

leonardost May 16, 2024

gius80 left a comment

leonardost commented May 16, 2024 •

edited

Domains: Create flow to buy a domain for Gravatar #90414

Domains: Create flow to buy a domain for Gravatar #90414

Conversation

leonardost commented May 7, 2024 • edited

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented May 7, 2024 • edited by matticbot

matticbot commented May 7, 2024 • edited

matticbot commented May 14, 2024 • edited

leonardost May 15, 2024

Choose a reason for hiding this comment

leonardost May 15, 2024

Choose a reason for hiding this comment

leonardost May 15, 2024 • edited

Choose a reason for hiding this comment

ramynasr left a comment

Choose a reason for hiding this comment

ramynasr May 16, 2024

Choose a reason for hiding this comment

leonardost May 16, 2024 • edited

Choose a reason for hiding this comment

ramynasr May 16, 2024

Choose a reason for hiding this comment

leonardost May 16, 2024

Choose a reason for hiding this comment

gius80 left a comment

Choose a reason for hiding this comment

leonardost commented May 16, 2024 • edited

leonardost commented May 7, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited by matticbot

matticbot commented May 7, 2024 •

edited

matticbot commented May 14, 2024 •

edited

leonardost May 15, 2024 •

edited

leonardost May 16, 2024 •

edited

leonardost commented May 16, 2024 •

edited