Skip domain step if launch-site triggered from wp-admin (#103746)

* Skip the domains step from the launch-site flow if domain exists

* Show the post-launch destination

* Also show celebration modal if we only buy a domain

* Address concerns in a code review and a cursor glitch

Author: dzver

client/lib/signup/step-actions/index.js

@@ -1065,11 +1065,12 @@ function shouldExcludeStep( stepName, fulfilledDependencies ) {
 function excludeDomainStep( stepName, tracksEventValue, submitSignupStep ) {
 	let fulfilledDependencies = [];
 	const domainItem = undefined;
+	const domainCart = undefined;
 
-	submitSignupStep( { stepName, domainItem }, { domainItem } );
+	submitSignupStep( { stepName, domainItem }, { domainItem, domainCart } );
 	recordExcludeStepEvent( stepName, tracksEventValue );
 
-	fulfilledDependencies = [ 'domainItem', 'siteId', 'siteSlug', 'themeItem' ];
+	fulfilledDependencies = [ 'domainItem', 'domainCart', 'siteId', 'siteSlug', 'themeItem' ];
 
 	if ( shouldExcludeStep( stepName, fulfilledDependencies ) ) {
 		flows.excludeStep( stepName );

client/lib/signup/test/step-actions.js

@@ -119,17 +119,21 @@ describe( 'createSiteWithCart()', () => {
 
 describe( 'isDomainFulfilled', () => {
 	const submitSignupStep = jest.fn();
-	const oneDomain = [ { domain: 'example.wordpress.com' } ];
-	const twoDomains = [ { domain: 'example.wordpress.com' }, { domain: 'example.com' } ];
+	const wpcomDomain = [ { domain: 'example.wordpress.com', isWPCOMDomain: true } ];
+	const customDomain = { domain: 'example.com', isWPCOMDomain: false };
+	const wpcomAndCustomDomains = [
+		{ domain: 'example.wordpress.com', isWPCOMDomain: true },
+		customDomain,
+	];
 
 	beforeEach( () => {
 		flows.excludeStep.mockClear();
 		submitSignupStep.mockClear();
 	} );
 
-	test( 'should call `submitSignupStep` with empty domainItem', () => {
+	test( 'should call `submitSignupStep` with empty domainItem when site has custom domains', () => {
 		const stepName = 'domains-launch';
-		const nextProps = { siteDomains: twoDomains, submitSignupStep };
+		const nextProps = { siteDomains: wpcomAndCustomDomains, submitSignupStep };
 
 		expect( submitSignupStep ).not.toHaveBeenCalled();
 
@@ -141,9 +145,9 @@ describe( 'isDomainFulfilled', () => {
 		);
 	} );
 
-	test( 'should call `flows.excludeStep` with the stepName', () => {
+	test( 'should call `flows.excludeStep` with the stepName when site has custom domains', () => {
 		const stepName = 'domains-launch';
-		const nextProps = { siteDomains: twoDomains, submitSignupStep };
+		const nextProps = { siteDomains: wpcomAndCustomDomains, submitSignupStep };
 
 		expect( flows.excludeStep ).not.toHaveBeenCalled();
 
@@ -152,9 +156,35 @@ describe( 'isDomainFulfilled', () => {
 		expect( flows.excludeStep ).toHaveBeenCalledWith( stepName );
 	} );
 
-	test( 'should not remove unfulfilled step', () => {
+	test( 'should not remove step when site only has WordPress.com domains', () => {
+		const stepName = 'domains-launch';
+		const nextProps = { siteDomains: wpcomDomain, submitSignupStep };
+
+		expect( flows.excludeStep ).not.toHaveBeenCalled();
+		expect( submitSignupStep ).not.toHaveBeenCalled();
+
+		isDomainFulfilled( stepName, undefined, nextProps );
+
+		expect( submitSignupStep ).not.toHaveBeenCalled();
+		expect( flows.excludeStep ).not.toHaveBeenCalled();
+	} );
+
+	test( 'should not remove step when domains are still loading (siteId exists but no siteDomains)', () => {
+		const stepName = 'domains-launch';
+		const nextProps = { siteId: 123, siteDomains: [], submitSignupStep };
+
+		expect( flows.excludeStep ).not.toHaveBeenCalled();
+		expect( submitSignupStep ).not.toHaveBeenCalled();
+
+		isDomainFulfilled( stepName, undefined, nextProps );
+
+		expect( submitSignupStep ).not.toHaveBeenCalled();
+		expect( flows.excludeStep ).not.toHaveBeenCalled();
+	} );
+
+	test( 'should not remove step when domains are still loading (siteId exists but siteDomains is undefined)', () => {
 		const stepName = 'domains-launch';
-		const nextProps = { siteDomains: oneDomain, submitSignupStep };
+		const nextProps = { siteId: 123, siteDomains: undefined, submitSignupStep };
 
 		expect( flows.excludeStep ).not.toHaveBeenCalled();
 		expect( submitSignupStep ).not.toHaveBeenCalled();

client/signup/config/flows.js

@@ -32,13 +32,19 @@ function getCheckoutUrl( dependencies, localeSlug, flowName, destination ) {
 		? destination
 		: pathToUrl( isDomainOnly ? `/start/${ flowName }/domain-only` : destination );
 
+	// Add celebrateLaunch=true for launch-site flow so the celebration modal shows after checkout
+	const isLaunchSiteFlow = flowName === 'launch-site';
+	const finalCheckoutBackUrl = isLaunchSiteFlow
+		? addQueryArgs( { skippedCheckout: 1, celebrateLaunch: 'true' }, checkoutBackUrl )
+		: addQueryArgs( { skippedCheckout: 1 }, checkoutBackUrl );
+
 	return addQueryArgs(
 		{
 			signup: 1,
 			ref: getQueryArgs()?.ref,
 			...( dependencies.coupon && { coupon: dependencies.coupon } ),
 			...( isDomainOnly && { isDomainOnly: 1 } ),
-			checkoutBackUrl: addQueryArgs( { skippedCheckout: 1 }, checkoutBackUrl ),
+			checkoutBackUrl: finalCheckoutBackUrl,
 		},
 		checkoutURL
 	);
@@ -90,7 +96,7 @@ function getSignupDestination( { domainItem, siteId, siteSlug, refParameter } )
 }
 
 function getLaunchDestination( dependencies ) {
-	return `/home/${ dependencies.siteSlug }`;
+	return addQueryArgs( { celebrateLaunch: 'true' }, `/home/${ dependencies.siteSlug }` );
 }
 
 function getDomainSignupFlowDestination( { domainItem, cartItem, siteId, designType, siteSlug } ) {

client/signup/main.jsx

@@ -240,7 +240,8 @@ class Signup extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { flowName, stepName, sitePlanName, sitePlanSlug, signupDependencies } = this.props;
+		const { flowName, stepName, sitePlanName, sitePlanSlug, signupDependencies, siteDomains } =
+			this.props;
 
 		if (
 			( flowName !== prevProps.flowName || stepName !== prevProps.stepName ) &&
@@ -278,6 +279,12 @@ class Signup extends Component {
 		) {
 			clearDomainsDependencies();
 		}
+
+		// Re-check fulfilled steps when siteDomains data changes
+		// This ensures that isDomainFulfilled is called again when domain data loads
+		if ( flowName === 'launch-site' && siteDomains !== prevProps.siteDomains ) {
+			this.removeFulfilledSteps( this.props );
+		}
 	}
 
 	getRecordPropsFromFlow = () => {

client/signup/test/flows.js

@@ -2,6 +2,7 @@
  * @jest-environment jsdom
  */
 import flows from 'calypso/signup/config/flows';
+import { generateFlows } from 'calypso/signup/config/flows-pure';
 import mockedFlows from './fixtures/flows';
 
 describe( 'Signup Flows Configuration', () => {
@@ -33,4 +34,80 @@ describe( 'Signup Flows Configuration', () => {
 			expect( flows.getFlow( 'main', false ).steps ).toEqual( [ 'user' ] );
 		} );
 	} );
+
+	describe( 'getLaunchDestination', () => {
+		test( 'should add celebrateLaunch=true query parameter to the destination URL', () => {
+			const mockGetLaunchDestination = jest.fn( ( dependencies ) => {
+				// Import the actual function from flows.js
+				const { addQueryArgs } = require( 'calypso/lib/url' );
+				return addQueryArgs( { celebrateLaunch: 'true' }, `/home/${ dependencies.siteSlug }` );
+			} );
+
+			const testFlows = generateFlows( {
+				getLaunchDestination: mockGetLaunchDestination,
+			} );
+
+			const launchSiteFlow = testFlows[ 'launch-site' ];
+			const dependencies = { siteSlug: 'test-site' };
+			const destination = launchSiteFlow.destination( dependencies );
+
+			expect( destination ).toBe( '/home/test-site?celebrateLaunch=true' );
+		} );
+	} );
+
+	describe( 'filterDestination with checkout URLs', () => {
+		// Mock the required modules
+		beforeAll( () => {
+			// Mock getQueryArgs to return empty object
+			jest.doMock( 'calypso/lib/query-args', () => ( {
+				getQueryArgs: () => ( {} ),
+			} ) );
+
+			// Mock pathToUrl to return the path as-is
+			jest.doMock( 'calypso/lib/url', () => ( {
+				addQueryArgs: jest.requireActual( 'calypso/lib/url' ).addQueryArgs,
+				pathToUrl: ( path ) => `https://wordpress.com${ path }`,
+			} ) );
+		} );
+
+		test( 'should add celebrateLaunch=true to checkout back URL when flow is launch-site', () => {
+			// Import the actual filterDestination function
+			const flowsModule = require( 'calypso/signup/config/flows' );
+			const { filterDestination } = flowsModule.default;
+
+			const dependencies = {
+				siteSlug: 'test-site',
+				cartItem: 'premium_plan', // This will trigger checkout redirect
+			};
+			const destination = '/home/test-site';
+			const flowName = 'launch-site';
+			const localeSlug = 'en';
+
+			const result = filterDestination( destination, dependencies, flowName, localeSlug );
+
+			// The result should be a checkout URL with celebrateLaunch in the checkoutBackUrl
+			expect( result ).toContain( '/checkout/test-site' );
+			expect( result ).toContain( 'checkoutBackUrl=' );
+			expect( result ).toContain( 'celebrateLaunch%3Dtrue' ); // URL encoded celebrateLaunch=true
+		} );
+
+		test( 'should not add celebrateLaunch=true to non-launch-site flows', () => {
+			const flowsModule = require( 'calypso/signup/config/flows' );
+			const { filterDestination } = flowsModule.default;
+
+			const dependencies = {
+				siteSlug: 'test-site',
+				cartItem: 'premium_plan',
+			};
+			const destination = '/home/test-site';
+			const flowName = 'onboarding';
+			const localeSlug = 'en';
+
+			const result = filterDestination( destination, dependencies, flowName, localeSlug );
+
+			expect( result ).toContain( '/checkout/test-site' );
+			expect( result ).toContain( 'checkoutBackUrl=' );
+			expect( result ).not.toContain( 'celebrateLaunch%3Dtrue' );
+		} );
+	} );
 } );