Implement the dotlink version of Link in Bio flow on Stepper

client/landing/stepper/declarative-flow/internals/global.scss

@@ -146,7 +146,8 @@ button {
  * Tailored flow stylings
  */
 .newsletter,
-.link-in-bio:not(.domains) {
+.link-in-bio:not(.domains),
+.link-in-bio-tld:not(.domains) {
 	&:not(.launchpad):not(.subscribers) {
 		@include onboarding-break-mobile-landscape {
 			padding: 40px 0 0;
@@ -168,6 +169,7 @@ button {
 
 .newsletter,
 .link-in-bio,
+.link-in-bio-tld,
 .setup-form__form {
 	button {
 		&[type="submit"] {

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

@@ -1,6 +1,6 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 
-import { StepContainer } from '@automattic/onboarding';
+import { StepContainer, LINK_IN_BIO_FLOW, LINK_IN_BIO_TLD_FLOW } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { useI18n } from '@wordpress/react-i18n';
@@ -94,6 +94,10 @@ const DomainsStep: Step = function DomainsStep( { navigation, flow } ) {
 		showSkipButton = true;
 	}
 
+	if ( flow === LINK_IN_BIO_TLD_FLOW ) {
+		includeWordPressDotCom = false;
+	}
+
 	const domainsWithPlansOnly = true;
 	const isPlanSelectionAvailableLaterInFlow = true;
 
@@ -187,7 +191,8 @@ const DomainsStep: Step = function DomainsStep( { navigation, flow } ) {
 					),
 					decideLaterComponent
 				);
-			case 'link-in-bio':
+			case LINK_IN_BIO_FLOW:
+			case LINK_IN_BIO_TLD_FLOW:
 				return createInterpolateElement(
 					__(
 						'Set your Link in Bio apart with a custom domain. Not sure yet? <span>Decide later</span>.'
@@ -330,6 +335,24 @@ const DomainsStep: Step = function DomainsStep( { navigation, flow } ) {
 		);
 	};
 
+	const getOtherManagedSubdomains = () => {
+		if ( flow === LINK_IN_BIO_TLD_FLOW ) {
+			return [ 'link' ];
+		}
+	};
+
+	const getOtherManagedSubdomainsCountOverride = () => {
+		if ( flow === LINK_IN_BIO_TLD_FLOW ) {
+			return 2;
+		}
+	};
+
+	const getPromoTlds = () => {
+		if ( flow === LINK_IN_BIO_TLD_FLOW ) {
+			return [ 'link' ];
+		}
+	};
+
 	const renderDomainForm = () => {
 		let initialState: DomainForm = {};
 		if ( domainForm ) {
@@ -376,12 +399,15 @@ const DomainsStep: Step = function DomainsStep( { navigation, flow } ) {
 					key="domainForm"
 					mapDomainUrl={ getUseYourDomainUrl() }
 					offerUnavailableOption
+					otherManagedSubdomains={ getOtherManagedSubdomains() }
+					otherManagedSubdomainsCountOverride={ getOtherManagedSubdomainsCountOverride() }
 					onAddDomain={ handleAddDomain }
 					onAddMapping={ handleAddMapping }
 					onSave={ setDomainForm }
 					onSkip={ handleSkip }
 					path={ path }
 					products={ productsList }
+					promoTlds={ getPromoTlds() }
 					selectedSite={ selectedSite }
 					showExampleSuggestions={ showExampleSuggestions }
 					showSkipButton={ showSkipButton }

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

@@ -1,9 +1,9 @@
 import {
-	LINK_IN_BIO_FLOW,
 	NEWSLETTER_FLOW,
 	ECOMMERCE_FLOW,
 	VIDEOPRESS_FLOW,
 	FREE_FLOW,
+	isLinkInBioFlow,
 } from '@automattic/onboarding';
 import { createInterpolateElement, useMemo } from '@wordpress/element';
 import { useI18n } from '@wordpress/react-i18n';
@@ -18,7 +18,7 @@ const useIntroContent = ( flowName: string | null ): IntroContent => {
 	const { __ } = useI18n();
 
 	return useMemo( () => {
-		if ( flowName === LINK_IN_BIO_FLOW ) {
+		if ( isLinkInBioFlow( flowName ) ) {
 			return {
 				title: createInterpolateElement(
 					__( 'You’re 3 minutes away from<br />a stand-out Link in Bio site.<br />Ready? ' ),

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

@@ -136,6 +136,7 @@
 
 .newsletter,
 .link-in-bio:not(.domains),
+.link-in-bio-tld:not(.domains),
 .free {
 	.step-container {
 		.step-container__content h1,

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/tasks.tsx

@@ -1,3 +1,4 @@
+import { LINK_IN_BIO_FLOW, LINK_IN_BIO_TLD_FLOW } from '@automattic/onboarding';
 import { LaunchpadFlowTaskList, Task } from './types';
 
 export const tasks: Task[] = [
@@ -87,15 +88,18 @@ export const tasks: Task[] = [
 	},
 ];
 
+const linkInBioTaskList = [
+	'design_selected',
+	'setup_link_in_bio',
+	'plan_selected',
+	'links_added',
+	'link_in_bio_launched',
+];
+
 export const launchpadFlowTasks: LaunchpadFlowTaskList = {
 	newsletter: [ 'setup_newsletter', 'plan_selected', 'subscribers_added', 'first_post_published' ],
-	'link-in-bio': [
-		'design_selected',
-		'setup_link_in_bio',
-		'plan_selected',
-		'links_added',
-		'link_in_bio_launched',
-	],
+	[ LINK_IN_BIO_FLOW ]: linkInBioTaskList,
+	[ LINK_IN_BIO_TLD_FLOW ]: linkInBioTaskList,
 	free: [
 		'setup_free',
 		'design_selected',

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/translations.tsx

@@ -1,5 +1,6 @@
 import {
 	LINK_IN_BIO_FLOW,
+	LINK_IN_BIO_TLD_FLOW,
 	NEWSLETTER_FLOW,
 	VIDEOPRESS_FLOW,
 	FREE_FLOW,
@@ -23,6 +24,7 @@ export function getLaunchpadTranslations( flow: string | null ): TranslatedLaunc
 			);
 			break;
 		case LINK_IN_BIO_FLOW:
+		case LINK_IN_BIO_TLD_FLOW:
 			translatedStrings.flowName = translate( 'Link in Bio' );
 			translatedStrings.title = translate( "You're ready to link and launch" );
 			translatedStrings.launchTitle = translate( "You're ready to link and launch" );

client/landing/stepper/declarative-flow/internals/steps-repository/link-in-bio-setup/styles.scss

@@ -2,7 +2,8 @@
 
 $font-family: "SF Pro Text", $sans;
 
-.link-in-bio-setup {
+.link-in-bio-setup,
+.link-in-bio-tld-setup {
 	.step-container__content {
 		display: flex;
 		justify-content: center;

client/landing/stepper/declarative-flow/internals/steps-repository/patterns/styles.scss

@@ -1,6 +1,7 @@
 @import "../style";
 
-.link-in-bio.patterns {
+.link-in-bio.patterns,
+.link-in-bio-tld.patterns {
 	height: 100vh;
 
 	@supports ( height: 100svh ) {

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

@@ -1,7 +1,7 @@
 import {
 	StepContainer,
 	isNewsletterOrLinkInBioFlow,
-	LINK_IN_BIO_FLOW,
+	isLinkInBioFlow,
 	isFreeFlow,
 } from '@automattic/onboarding';
 import { useSelect } from '@wordpress/data';
@@ -118,7 +118,7 @@ const ProcessingStep: Step = function ( props ) {
 	const isJetpackPowered = isNewsletterOrLinkInBioFlow( flowName );
 
 	// Currently we have the Domains and Plans only for link in bio
-	if ( flowName === LINK_IN_BIO_FLOW || isFreeFlow( flowName ) ) {
+	if ( isLinkInBioFlow( flowName ) || isFreeFlow( flowName ) ) {
 		return <TailoredFlowPreCheckoutScreen flowName={ flowName } />;
 	}
 

client/landing/stepper/declarative-flow/internals/steps-repository/processing-step/tailored-flow-precheckout-screen/index.tsx

@@ -1,4 +1,4 @@
-import { NEWSLETTER_FLOW, LINK_IN_BIO_FLOW } from '@automattic/onboarding';
+import { NEWSLETTER_FLOW, LINK_IN_BIO_FLOW, LINK_IN_BIO_TLD_FLOW } from '@automattic/onboarding';
 import { useI18n } from '@wordpress/react-i18n';
 import PropTypes from 'prop-types';
 import { useRef, useState, useEffect } from 'react';
@@ -15,6 +15,7 @@ const useSteps = ( flowName: string ) => {
 
 	switch ( flowName ) {
 		case LINK_IN_BIO_FLOW:
+		case LINK_IN_BIO_TLD_FLOW:
 			steps = [
 				{ title: __( 'Great choices. Nearly there!' ) },
 				{ title: __( 'Shining and polishing your Bio' ) },

client/landing/stepper/declarative-flow/internals/steps-repository/processing-step/tailored-flow-precheckout-screen/style.scss

@@ -9,6 +9,7 @@
 	}
 	.newsletter,
 	.link-in-bio,
+	.link-in-bio-tld,
 	.free {
 		.signup-header {
 			.signup-header__right {
@@ -96,7 +97,8 @@
 		}
 	}
 
-	.link-in-bio {
+	.link-in-bio,
+	.link-in-bio-tld {
 		.processing-step__container {
 			background-color: #d0cce3;
 			background-image:

client/landing/stepper/declarative-flow/internals/steps-repository/site-creation-step/index.tsx

@@ -1,7 +1,7 @@
 import { Site } from '@automattic/data-stores';
 import {
 	ECOMMERCE_FLOW,
-	LINK_IN_BIO_FLOW,
+	isLinkInBioFlow,
 	addPlanToCart,
 	createSiteWithCart,
 } from '@automattic/onboarding';
@@ -33,14 +33,14 @@ const SiteCreationStep: Step = function SiteCreationStep( { navigation, flow } )
 
 	const { setPendingAction } = useDispatch( ONBOARD_STORE );
 
-	const theme = flow === LINK_IN_BIO_FLOW ? 'pub/lynx' : 'pub/lettre';
+	const theme = isLinkInBioFlow( flow ) ? 'pub/lynx' : 'pub/lettre';
 	const isPaidDomainItem = Boolean( domainCartItem?.product_slug );
 
 	// Default visibility is public
 	let siteVisibility = Site.Visibility.PublicIndexed;
 
 	// Link-in-bio flow defaults to "Coming Soon"
-	if ( flow === LINK_IN_BIO_FLOW ) {
+	if ( isLinkInBioFlow( flow ) ) {
 		siteVisibility = Site.Visibility.PublicNotIndexed;
 	}