Domains: Tweaks to the 100-year domain transfer flow #98849

rafaelgallani · 2025-01-23T19:48:34Z

Related to #95634 - follow up.

Proposed Changes

Adds the specific "Thank-you" page for the 100-year domain transfer flow and some more changes/tweaks: UI-related changes, checkout, etc.

Please notice that adding the domain transfer along with the 100-year plan is still unsupported - this will be handled in the future, not in this PR.

Comments from the previous PR handled here

Gray section at the top of the "Setting up your legacy" step
The checkout page says the transfer will be billed annually for $2000
The thank you page says it's $2000 for one year
If you click on "Remove from cart" to remove the domain, you get redirected to the site picker

Why are these changes being made?

Follow up to #95634 so the review gets easier - plus the specific thank you page was accounted for in the original design file.

Testing Instructions

Follow all the same steps from the previous PR, but this time make sure all the comments addressed are fixed - also try completing the checkout and ensure the "thank-you" page looks good now.
Also ensure other 100-year related flows are left unchanged.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests 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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
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 · 2025-01-23T19:48:48Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

rafaelgallani · 2025-01-23T19:49:14Z

...stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/index.tsx

@@ -22,6 +22,7 @@ import HundredYearPlanLogo from './hundred-year-plan-logo';
 import InfoModal from './info-modal';

 import './style.scss';
+


Just adding back the whitespace wrongly removed in the parent PR.

rafaelgallani · 2025-01-23T19:50:20Z

client/lib/domains/transferred-domains.ts

+export function isTransferredInDomain( domain: ResponseDomain ) {
+	return domain.type === domainTypes.TRANSFER;
+}


Type guards could also be added here to improve type assertion. However, since this won't be used for now, it's better to filter the list and return the result for simplicity's sake.

matticbot · 2025-01-23T19:56:07Z

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

Sections (~449 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
checkout                               +1224 B  (+0.1%)     +449 B  (+0.1%)
plans                                    +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-connect                          +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-pricing                    +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-plugin-management          +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-partner-portal             +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-manage-pricing             +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-features-comparison        +19 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-agency-dashboard           +19 B  (+0.0%)       +8 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 (~27 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-page-picker                                                     +66 B  (+0.0%)      +27 B  (+0.0%)
async-load-purchase-modal-wrapper                                                       +66 B  (+0.0%)      +27 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +66 B  (+0.0%)      +27 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                                              +66 B  (+0.0%)      +27 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +66 B  (+0.0%)      +27 B  (+0.0%)
async-load-masterbar-cart-masterbar-cart-wrapper                                        +19 B  (+0.0%)       +8 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 · 2025-01-23T19:58:18Z

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

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

notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/100-year-domain-transfer-tweaks on your sandbox.

rafaelgallani · 2025-01-23T23:32:06Z

...ding/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/domains.tsx

+			{ ! isHundredYearTransfer && (
+				<Button className="bulk-domain-transfer__add-domain" icon={ plus } onClick={ addDomain }>
+					{ __( 'Add more' ) }
+				</Button>
+			) }


Skipping the Add more button entirely since no more than one product is allowed for 100-year product purchases, as per validation in the backend, wouldn't make sense to have the button here. Plus, adding two domain transfers or more would leave only the last one in the cart.

leonardost

LGTM! I tested the 100-year domain transfer flow and all the points I had mentioned in the previous PR were fixed, thanks! I also tested the other 100-year flows (plan and domain only) and the regular bulk transfer flow and they're all working correctly. Left some small comments in the code but for the sake of agility, I'm approving this now 👍

client/my-sites/checkout/checkout-thank-you/hundred-year-thank-you/index.tsx

leonardost · 2025-01-24T17:45:10Z

client/my-sites/checkout/checkout-thank-you/hundred-year-thank-you/index.tsx

+							action:
+								productSlug === domainProductSlugs.DOTCOM_DOMAIN_REGISTRATION
+									? translate( 'registered' )
+									: translate( 'transferred' ),


I know just changing the word here is simpler, but I think it might be confusing to say that "he domain has been transferred" 🤔 maybe something like "Your 100-Year Domain is being transferred"?

Also, I think the best i18n practice (PCYsg-3hI-p2) here would be to have two entirely separate strings, one for domain registration and one for domain transfers, even if they're almost the same. Maybe we can separate the "Our Premier Support team will be in touch by email shortly to schedule a welcome session and walk you through your exclusive benefits. We’re looking forward to supporting you every step of the way.'" part since that will be the same for both.

You're absolutely correct. I'll fix this one before deploying.

@leonardost what do you think of 5c6a0c6? I've seen some occurrences of `${str1} ${str2}` to interpolate both translations, and I think the good practices are being applied here.

I think that works! Left just a minor suggestion there

client/my-sites/checkout/checkout-thank-you/hundred-year-thank-you/index.tsx

rafaelgallani · 2025-01-24T20:09:20Z

client/my-sites/checkout/checkout-thank-you/hundred-year-thank-you/index.tsx

+	const isPageLoading =
+		isReceiptLoading ||
+		isLoadingDomains ||
+		( productSlug !== PLAN_100_YEARS && ! isDomainDataLoaded );


We only want to check if the domain data is being loaded in case we're not within the 100-year plan flow.
The other flows (100-year domain, 100-year transfer) need the queried data to load CTAs and other component labels/descriptions, but the 100-year plan one doesn't - that's why the productSlug !== PLAN_100_YEARS && ! isDomainDataLoaded check is performed here.

rafaelgallani · 2025-01-24T20:10:19Z

client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-bulk-transfer.tsx

+					styles={ css`
+						main.checkout-thank-you {
+							&.is-redesign-v2 {
+								&.main {
+									max-width: unset;
+								}
+							}
+						}
+
+						body.is-section-checkout,
+						body.is-section-checkout .layout__content,
+						body.is-section-checkout-thank-you,
+						body.is-section-checkout-thank-you .layout__content {
+							background: linear-gradient( 233deg, #06101c 2.17%, #050c16 41.26%, #02080f 88.44% );
+						}
+					` }


Inline style was used to ensure these styles would be loaded regardless of imports/dynamic styles being applied into the component - probably not 100% needed, but added just for good measure.

leonardost

Tested again and still LGTM, thanks for all the explanations and updates! 🚀

client/my-sites/checkout/checkout-thank-you/hundred-year-thank-you/index.tsx

leonardost · 2025-01-24T21:23:29Z

client/my-sites/checkout/checkout-thank-you/hundred-year-thank-you/index.tsx

+							action:
+								productSlug === domainProductSlugs.DOTCOM_DOMAIN_REGISTRATION
+									? translate( 'registered' )
+									: translate( 'transferred' ),


I think that works! Left just a minor suggestion there

rafaelgallani · 2025-01-27T19:42:06Z

I'll rebase this one on trunk since some e2e test methods are failing.

… properly

Co-authored-by: leonardost <[email protected]>

a8ci18n · 2025-01-27T21:22:51Z

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

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.

Hi @rafaelgallani, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

Your 100-Year Domain %(domain)s has been registered.
Your 100-Year Domain %(domain)s is being transferred.
The %(planTitle)s for %(messageTarget)s is active.
Our Premier Support team will be in touch by email shortly to schedule a welcome session and walk you through your exclusive benefits. We’re looking forward to supporting you every step of the way.

Thank you in advance!

rafaelgallani commented Jan 23, 2025

View reviewed changes

rafaelgallani self-assigned this Jan 23, 2025

rafaelgallani commented Jan 23, 2025

View reviewed changes

rafaelgallani marked this pull request as ready for review January 24, 2025 00:02

rafaelgallani requested a review from a team as a code owner January 24, 2025 00:02

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jan 24, 2025

rafaelgallani requested a review from a team January 24, 2025 00:04

leonardost approved these changes Jan 24, 2025

View reviewed changes

rafaelgallani commented Jan 24, 2025

View reviewed changes

leonardost approved these changes Jan 24, 2025

View reviewed changes

rafaelgallani and others added 11 commits January 27, 2025 16:42

Add lib module to retrieve/handle transfer-ins

7b3b588

Enable correct "Thank you" page for 100-year domain transfers

154b345

Add back wrongly removed whitespace

26f24c1

Fix "Remove from cart" return URL

afc75d5

Disable "Add more" button for 100-year transfer flow

13f1a3c

Fix additional top spacing for processing step

8c15386

Fix billing message for 100-year transfer

f1d2e90

Fix to handle both 100-year transfer, domain and plan thank-you pages…

dfa197d

… properly

Fix unit tests

1d0d834

Fix translations to best i18n practices

e1505fd

Use better placeholder name for translators

1af8da5

Co-authored-by: leonardost <[email protected]>

rafaelgallani force-pushed the update/100-year-domain-transfer-tweaks branch from 358f7fb to 1af8da5 Compare January 27, 2025 19:42

Fix typo

cf4edd1

rafaelgallani merged commit 692241f into trunk Jan 27, 2025
13 checks passed

rafaelgallani deleted the update/100-year-domain-transfer-tweaks branch January 27, 2025 20:45

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 Jan 27, 2025

rafaelgallani mentioned this pull request Jan 28, 2025

Domains: Include "Do you own it?" link for 100-year flows #98981

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Domains: Tweaks to the 100-year domain transfer flow #98849

Domains: Tweaks to the 100-year domain transfer flow #98849

rafaelgallani commented Jan 23, 2025 •

edited

Loading

github-actions bot commented Jan 23, 2025 •

edited by matticbot

Loading

rafaelgallani Jan 23, 2025

rafaelgallani Jan 23, 2025

matticbot commented Jan 23, 2025 •

edited

Loading

matticbot commented Jan 23, 2025 •

edited

Loading

rafaelgallani Jan 23, 2025

leonardost left a comment

leonardost Jan 24, 2025

rafaelgallani Jan 24, 2025

rafaelgallani Jan 24, 2025 •

edited

Loading

leonardost Jan 24, 2025

rafaelgallani Jan 24, 2025

rafaelgallani Jan 24, 2025

leonardost left a comment

leonardost Jan 24, 2025

rafaelgallani commented Jan 27, 2025

a8ci18n commented Jan 27, 2025 •

edited

Loading

		@@ -22,6 +22,7 @@ import HundredYearPlanLogo from './hundred-year-plan-logo';
		import InfoModal from './info-modal';

		import './style.scss';

Domains: Tweaks to the 100-year domain transfer flow #98849

Domains: Tweaks to the 100-year domain transfer flow #98849

Conversation

rafaelgallani commented Jan 23, 2025 • edited Loading

Proposed Changes

Comments from the previous PR handled here

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 23, 2025 • edited by matticbot Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matticbot commented Jan 23, 2025 • edited Loading

matticbot commented Jan 23, 2025 • edited Loading

Choose a reason for hiding this comment

leonardost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaelgallani Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leonardost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaelgallani commented Jan 27, 2025

a8ci18n commented Jan 27, 2025 • edited Loading

rafaelgallani commented Jan 23, 2025 •

edited

Loading

github-actions bot commented Jan 23, 2025 •

edited by matticbot

Loading

matticbot commented Jan 23, 2025 •

edited

Loading

matticbot commented Jan 23, 2025 •

edited

Loading

rafaelgallani Jan 24, 2025 •

edited

Loading

a8ci18n commented Jan 27, 2025 •

edited

Loading