Plugins "Get started": fix blank page + duplicate site when backing out of checkout

client/signup/config/flows-pure.js

@@ -130,6 +130,9 @@ export function generateFlows( {
 			showRecaptcha: true,
 			providesDependenciesInQuery: [ 'plugin', 'billing_period', 'intervalType' ],
 			optionalDependenciesInQuery: [ 'intervalType' ],
+			// Persist domains data so re-entering via browser back from checkout skips the domains
+			// step and reuses the created site instead of making a duplicate.
+			persistsDomainsOnReEntry: true,
 			hideProgressIndicator: true,
 		},
 		{
@@ -141,6 +144,7 @@ export function generateFlows( {
 			showRecaptcha: true,
 			providesDependenciesInQuery: [ 'coupon' ],
 			optionalDependenciesInQuery: [ 'coupon' ],
+			persistsDomainsOnReEntry: true,
 			hideProgressIndicator: true,
 		},
 		{

client/signup/config/flows.js

@@ -27,17 +27,19 @@ function getCheckoutUrl( dependencies, localeSlug, flowName, destination ) {
 	const queryArgs = getQueryArgs() ?? {};
 
 	// with-plugin: point "back" at the plans grid (params from the dependency store — the URL query
-	// is empty by now), not the post-purchase destination which can't render pre-purchase. Known
-	// tradeoff: this re-enters signup and recreates the site; kept over a blank page for now.
+	// is empty by now), not the post-purchase destination which can't render pre-purchase. The flow
+	// skips the domains step on this re-entry (see controller.js) so it reuses the created site.
 	let backDestination = destination;
 	if ( flowName === 'with-plugin' ) {
 		const { pluginParameter, pluginBillingPeriod } = dependencies;
 		backDestination = addQueryArgs(
 			{
 				...( pluginParameter && { plugin: pluginParameter } ),
+				// billing_period is a required query dependency of this flow, so always include it
+				// (empty for free plugins) — otherwise the flow controller rejects the URL.
+				billing_period: pluginBillingPeriod ?? '',
+				// Default the grid to the plugin's billing interval.
 				...( pluginBillingPeriod && {
-					billing_period: pluginBillingPeriod,
-					// Default the grid to the plugin's billing interval.
 					intervalType: pluginBillingPeriod === 'MONTHLY' ? 'monthly' : 'yearly',
 				} ),
 			},

client/signup/controller.js

@@ -209,10 +209,8 @@ export default {
 		const flowName = getFlowName( context.params, userLoggedIn );
 		const stepName = getStepName( context.params );
 		const stepSectionName = getStepSectionName( context.params );
-		const { providesDependenciesInQuery, excludeFromManageSiteFlows } = flows.getFlow(
-			flowName,
-			userLoggedIn
-		);
+		const { providesDependenciesInQuery, excludeFromManageSiteFlows, persistsDomainsOnReEntry } =
+			flows.getFlow( flowName, userLoggedIn );
 
 		// Update initialContext to help woocommerce-install support site switching.
 		if ( 'woocommerce-install' === flowName ) {
@@ -249,13 +247,13 @@ export default {
 		const isManageSiteFlow =
 			! excludeFromManageSiteFlows && ! isAddNewSiteFlow && isReEnteringSignupViaBrowserBack;
 
-		// Hydrate the store with domains dependencies from session storage,
-		// only in the onboarding flow.
+		// Hydrate the store with domains dependencies from session storage so re-entering via
+		// browser back from checkout skips the domains step instead of recreating the site.
 		const domainsDependencies = getDomainsDependencies();
 		if (
 			domainsDependencies &&
 			isManageSiteFlow &&
-			flowName === 'onboarding' &&
+			persistsDomainsOnReEntry &&
 			stepName !== 'domains'
 		) {
 			const { step, dependencies } = JSON.parse( domainsDependencies );

client/signup/main.jsx

@@ -451,8 +451,9 @@ class Signup extends Component {
 			setSignupCompleteFlowName( this.props.flowName );
 		}
 
-		// Persist current domains data in the onboarding flow.
-		if ( this.props.flowName === 'onboarding' ) {
+		// Persist current domains data so re-entering via browser back from checkout can skip the
+		// domains step instead of recreating the site.
+		if ( flows.getFlow( this.props.flowName, this.props.isLoggedIn ).persistsDomainsOnReEntry ) {
 			const { domainItem, siteUrl, domainCart } = dependencies;
 			const { stepSectionName } = this.props;
 

client/signup/test/flows.js

@@ -131,5 +131,26 @@ describe( 'Signup Flows Configuration', () => {
 			expect( result ).toContain( 'billing_period%3DANNUALLY' );
 			expect( result ).toContain( 'intervalType%3Dyearly' );
 		} );
+
+		test( 'should still include an empty billing_period for a free plugin', () => {
+			// A free plugin has no billing period, but billing_period is a required query dependency,
+			// so the back URL must still carry it (empty) or the flow controller rejects the URL.
+			const flowsModule = require( 'calypso/signup/config/flows' );
+			const { filterDestination } = flowsModule.default;
+
+			const dependencies = {
+				siteSlug: 'test-site',
+				cartItem: 'personal_plan',
+				pluginParameter: 'mailpoet',
+			};
+			const destination = '/marketplace/plugin/mailpoet/install/test-site';
+
+			const result = filterDestination( destination, dependencies, 'with-plugin', 'en' );
+
+			expect( result ).toContain( 'plans-with-plugin' );
+			expect( result ).toContain( 'plugin%3Dmailpoet' );
+			expect( result ).toContain( 'billing_period%3D' );
+			expect( result ).not.toContain( 'intervalType' );
+		} );
 	} );
 } );

client/signup/types.ts

@@ -20,6 +20,7 @@ export interface Flow {
 	disallowResume?: boolean;
 	showRecaptcha?: boolean;
 	enableBranchSteps?: boolean;
+	persistsDomainsOnReEntry?: boolean;
 	hideProgressIndicator?: boolean;
 	helpCenterButtonText?: string;
 	enableHotjar?: boolean;