Implement the dotlink version of Link in Bio flow on Stepper #71204

southp · 2022-12-14T15:03:25Z

Proposed Changes

This PR implements the dotlink version of Link in Bio flow on Stepper, aiming at completly replacing the previous /start/link-in-bio-tld. The TLD suffix is kept, since my understanding is that the possibilities of partnership with different TLDs are still there. The current implmentation is strictly .link only, but it should be enough to provide clues for a more general solution in the future.

Currently, the flow is implmeneted as interweaving of the signup framework and the Stepper framework, initiating from /start/link-in-bio-tld?tld=link. Unfortunately it has encountered an unsolvable issue given that approach(see p2-p4TIVU-akM). Overall the implementation is just:

Add a new flow, LINK_IN_BIO_TLD_FLOW
Add the required boilerplate code for making it functional like the regular Link in Bio flow.
Configure link as promoTlds and managedSubdomains*** props.

By doing so, it also means there are some janitorial tasks that has to be done, and they will be completed by follow-up PRs to keep the scope of this PR. See 1348-gh-Automattic/martech.

Among testing, I've also found a few back-navigation issues:

However, they are more of the general issues that need to happen at the framework level, so this PR won't address them.

Testing Instructions

Access the flow via /setup/link-in-bio-tld
Go through the whole flow. It should be: domains -> users -> (brief processing screen from the signup framework) -> patterns -> Link in Bio site setup -> plans -> processing -> *checkout if there is anything in cart -> Launchpad
At the domains step, note that there should be only link domain to choose from. The free w.link domain should have 2 options.
In the end, you should create a Link in Bio site on w.link or .link successfully.

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 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-ajp-p2)?

Related to #

github-actions · 2022-12-14T15:04:07Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

alshakero

Pretty cool! I love this, much better than before. I suppose we can remove this logic now?

https://github.com/Automattic/wp-calypso/blob/trunk/client/landing/stepper/declarative-flow/link-in-bio.ts#L141

I'll do a more thorough review soon.

alshakero · 2022-12-15T11:53:07Z

client/landing/stepper/declarative-flow/link-in-bio-tld.ts

+		const logInUrl =
+			locale && locale !== 'en'
+				? `/start/account/user/${ locale }?variationName=${ flowName }&pageTitle=Link%20in%20Bio&redirect_to=/setup/${ flowName }/patterns`
+				: `/start/account/user?variationName=${ flowName }&pageTitle=Link%20in%20Bio&redirect_to=/setup/${ flowName }/patterns`;


Do we need to do this manually?

I suppose we don't. This PR focuses on making the flow work first, so I simply refer to how link-in-bio.ts does it for now. It can be improved as a separate PR for sure :)

Yes @alshakero, this is how we are doing in the LiB flow as well, I think it can be good here for this PR :)

southp · 2022-12-16T01:17:02Z

I suppose we can remove this logic now?
https://github.com/Automattic/wp-calypso/blob/trunk/client/landing/stepper/declarative-flow/link-in-bio.ts#L141

You are right. I plan to remove all the previous work as a follow-up PR, and it will be part of the tidying up :)

dotlink Link in Bio flow.

stylesheets.

style sheet)

matticbot · 2022-12-16T06:26:49Z

This PR modifies the release build for happy-blocks

To test your changes on WordPress.com, run install-plugin.sh happy-blocks update/dotlink-lib-in-stepper on your sandbox.

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

matticbot · 2022-12-16T06:27:11Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/dotlink-lib-in-stepper on your sandbox.

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

alshakero

From a Stepper standpoint, this looks great. I haven't tested though.

client/landing/stepper/declarative-flow/link-in-bio-tld.ts

escapemanuele

I tested it and all seems to be working great! I'm glad you managed to get it working on Stepper and found it fast.

I just wanted to ask if we want to have a "Decide Later" here, given that the flow is focused on the link tld

escapemanuele · 2022-12-16T11:08:20Z

client/landing/stepper/declarative-flow/link-in-bio-tld.ts

+				? `/start/account/user/${ locale }?variationName=${ flowName }&pageTitle=Link%20in%20Bio&redirect_to=/setup/${ flowName }/patterns`
+				: `/start/account/user?variationName=${ flowName }&pageTitle=Link%20in%20Bio&redirect_to=/setup/${ flowName }/patterns`;
+
+		// for the standard Link in Bio flow


Only a minor thing, I think you can change/remove this comment here 👍

Good catch. The suggested fix has been taken :D

escapemanuele · 2022-12-16T11:09:37Z

client/landing/stepper/declarative-flow/link-in-bio-tld.ts

+		const logInUrl =
+			locale && locale !== 'en'
+				? `/start/account/user/${ locale }?variationName=${ flowName }&pageTitle=Link%20in%20Bio&redirect_to=/setup/${ flowName }/patterns`
+				: `/start/account/user?variationName=${ flowName }&pageTitle=Link%20in%20Bio&redirect_to=/setup/${ flowName }/patterns`;


Yes @alshakero, this is how we are doing in the LiB flow as well, I think it can be good here for this PR :)

Remove the non-necessary comment. Co-authored-by: Omar Alshaker <omar@omaralshaker.com>

southp · 2022-12-16T14:00:30Z

@escapemanuele Thanks for taking a look :)

I just wanted to ask if we want to have a "Decide Later" here, given that the flow is focused on the link tld

Yes, it's kept intentionally. When someone clicks "Decide Later", their site will be defaulted to a free w.link domain picked by our system :)

matticbot · 2022-12-22T10:02:30Z

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

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

name                   parsed_size           gzip_size
entry-stepper              +1907 B  (+0.1%)     +206 B  (+0.0%)
entry-login                  -39 B  (-0.0%)      +60 B  (+0.0%)
entry-gutenboarding          -39 B  (-0.0%)      +60 B  (+0.0%)
entry-domains-landing        -39 B  (-0.0%)      +60 B  (+0.0%)
entry-browsehappy            -39 B  (-0.0%)      +60 B  (+0.2%)
entry-main                   -16 B  (-0.0%)      +92 B  (+0.0%)

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

Sections (~3590 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
link-in-bio-tld-flow       +682736 B    (new)  +172644 B    (new)
link-in-bio-flow              +461 B  (+0.1%)     +267 B  (+0.2%)
free-flow                     +461 B  (+0.1%)     +274 B  (+0.2%)
tailored-ecommerce-flow       +297 B  (+0.1%)      +77 B  (+0.1%)
signup                        +273 B  (+0.1%)      +40 B  (+0.1%)
videopress-flow               +156 B  (+0.0%)      -48 B  (-0.1%)
newsletter-flow               +156 B  (+0.0%)      +24 B  (+0.0%)
jetpack-connect               +136 B  (+0.0%)       +9 B  (+0.0%)
accept-invite                 +136 B  (+0.0%)       +9 B  (+0.0%)
site-purchases                 +47 B  (+0.0%)      -13 B  (-0.0%)
purchases                      +47 B  (+0.0%)      -13 B  (-0.0%)
domains                        +47 B  (+0.0%)      -28 B  (-0.0%)
checkout                       +47 B  (+0.0%)      -13 B  (-0.0%)
gutenberg-editor               +34 B  (+0.0%)      +15 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 (~254 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-user                           -85 B  (-0.0%)      -31 B  (-0.1%)
async-load-signup-steps-domains                        +34 B  (+0.0%)       -6 B  (-0.0%)
async-load-signup-steps-design-picker                  +34 B  (+0.0%)      +16 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal             +34 B  (+0.0%)       +9 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal        +34 B  (+0.0%)       +9 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover          +23 B  (+0.0%)       +9 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.

southp added 4 commits December 14, 2022 14:35

Start scalfolding the dotlink version of Link in Bio flow.

aaaf9be

Accompany several occurences of LINK_IN_BIO_FLOW with the TLD sibling.

4923180

Define the flow progress data for LINK_IN_BIO_TLD flow

b0860cf

Include link-in-bio-tld in the global style sheet.

5200abb

southp self-assigned this Dec 14, 2022

southp requested a review from alshakero December 14, 2022 15:04

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

alshakero requested changes Dec 15, 2022

View reviewed changes

southp added 9 commits December 16, 2022 10:09

Define the Launchpad task list for the dotlink Link in Bio flow.

e8fbb39

Derive the required link and w.link info at the domains step of the

ec55444

dotlink Link in Bio flow.

Fix the styling issue of the user step.

2b6b108

Add link-in-bio-tld class to both the patterns & the Link in Bio setup

9fd88cc

stylesheets.

LINK_IN_BIO_FLOW -> flow

b89ab34

Cover LINK_IN_BIO_TLD_FLOW in <PlanPill/>

91e1ee6

Fix the plans step styling (somehow it is actually from the Launchpad

832dae1

style sheet)

Define the popular plan spec for the dotlink Link in Bio flow.

8f99b1a

When a user is logged-in, the 2nd step should be patterns

943f1ce

southp marked this pull request as ready for review December 16, 2022 08:49

southp requested a review from a team as a code owner December 16, 2022 08:49

southp requested review from aneeshd16 and a team December 16, 2022 08:50

alshakero approved these changes Dec 16, 2022

View reviewed changes

client/landing/stepper/declarative-flow/link-in-bio-tld.ts Outdated Show resolved Hide resolved

escapemanuele approved these changes Dec 16, 2022

View reviewed changes

Update client/landing/stepper/declarative-flow/link-in-bio-tld.ts

a7cd786

Remove the non-necessary comment. Co-authored-by: Omar Alshaker <omar@omaralshaker.com>

Remove the extraneous newline caused by taking a suggested fix.

4602855

southp merged commit ce42ebb into trunk Dec 16, 2022

southp deleted the update/dotlink-lib-in-stepper branch December 16, 2022 14:39

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 Dec 16, 2022

This was referenced Dec 19, 2022

Fix the occasional flow loop from the dotlink version of Link in Bio flow. #71117

Closed

Fix/link in bio tld reliable transit #71115

Closed

Defer the mid-destination navigation to make sure the state update cycle #71019

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement the dotlink version of Link in Bio flow on Stepper #71204

Implement the dotlink version of Link in Bio flow on Stepper #71204

southp commented Dec 14, 2022 •

edited

Loading

github-actions bot commented Dec 14, 2022 •

edited by matticbot

Loading

alshakero left a comment •

edited

Loading

alshakero Dec 15, 2022

southp Dec 16, 2022

escapemanuele Dec 16, 2022

southp commented Dec 16, 2022

matticbot commented Dec 16, 2022

matticbot commented Dec 16, 2022

alshakero left a comment

escapemanuele left a comment

escapemanuele Dec 16, 2022

southp Dec 16, 2022

escapemanuele Dec 16, 2022

southp commented Dec 16, 2022

matticbot commented Dec 22, 2022 •

edited

Loading

Implement the dotlink version of Link in Bio flow on Stepper #71204

Implement the dotlink version of Link in Bio flow on Stepper #71204

Conversation

southp commented Dec 14, 2022 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Dec 14, 2022 • edited by matticbot Loading

alshakero left a comment • edited Loading

Choose a reason for hiding this comment

alshakero Dec 15, 2022

Choose a reason for hiding this comment

southp Dec 16, 2022

Choose a reason for hiding this comment

escapemanuele Dec 16, 2022

Choose a reason for hiding this comment

southp commented Dec 16, 2022

matticbot commented Dec 16, 2022

matticbot commented Dec 16, 2022

alshakero left a comment

Choose a reason for hiding this comment

escapemanuele left a comment

Choose a reason for hiding this comment

escapemanuele Dec 16, 2022

Choose a reason for hiding this comment

southp Dec 16, 2022

Choose a reason for hiding this comment

escapemanuele Dec 16, 2022

Choose a reason for hiding this comment

southp commented Dec 16, 2022

matticbot commented Dec 22, 2022 • edited Loading

southp commented Dec 14, 2022 •

edited

Loading

github-actions bot commented Dec 14, 2022 •

edited by matticbot

Loading

alshakero left a comment •

edited

Loading

matticbot commented Dec 22, 2022 •

edited

Loading