Design Picker: Implement useRedirectDesignSetupOldSlug hook

client/landing/stepper/declarative-flow/helpers/use-redirect-design-setup-old-slug.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { getStepOldSlug } from './get-step-old-slug';
+import type { StepperStep, Navigate } from '../internals/types';
+
+const DESIGN_SETUP_SLUG = 'design-setup';
+
+export function useRedirectDesignSetupOldSlug(
+	currentStep: string,
+	navigate: Navigate< StepperStep[] >
+) {
+	const oldSlug = getStepOldSlug( DESIGN_SETUP_SLUG );
+	useEffect( () => {
+		if ( currentStep === oldSlug ) {
+			navigate( DESIGN_SETUP_SLUG );
+		}
+	}, [ currentStep, navigate, oldSlug ] );
+}

client/landing/stepper/declarative-flow/import-flow.ts

@@ -12,6 +12,7 @@ import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-pa
 import { ONBOARD_STORE, USER_STORE } from 'calypso/landing/stepper/stores';
 import { ImporterMainPlatform } from 'calypso/lib/importer/types';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
+import { useRedirectDesignSetupOldSlug } from './helpers/use-redirect-design-setup-old-slug';
 import { STEPS } from './internals/steps';
 import {
 	AssertConditionState,
@@ -116,6 +117,8 @@ const importFlow: Flow = {
 			);
 		};
 
+		useRedirectDesignSetupOldSlug( _currentStep, navigate );
+
 		const submit = ( providedDependencies: ProvidedDependencies = {}, ...params: string[] ) => {
 			switch ( _currentStep ) {
 				case 'importList':
@@ -169,7 +172,6 @@ const importFlow: Flow = {
 					}
 				}
 
-				case 'designSetup':
 				case 'design-setup': {
 					return navigate( 'processing' );
 				}
@@ -306,7 +308,6 @@ const importFlow: Flow = {
 				case 'importReadyNot':
 				case 'importReadyWpcom':
 				case 'importReadyPreview':
-				case 'designSetup':
 				case 'design-setup':
 					return navigate( `import?siteSlug=${ siteSlugParam }` );
 

client/landing/stepper/declarative-flow/internals/steps.tsx

@@ -33,11 +33,6 @@ export const STEPS = {
 		asyncComponent: () => import( './steps-repository/design-setup' ),
 	},
 
-	DESIGN_SETUP_LEGACY: {
-		slug: 'designSetup',
-		asyncComponent: () => import( './steps-repository/design-setup' ),
-	},
-
 	DIFM_STARTING_POINT: {
 		slug: 'difmStartingPoint',
 		asyncComponent: () => import( './steps-repository/difm-starting-point' ),

client/landing/stepper/declarative-flow/onboarding.ts

@@ -31,6 +31,7 @@ import { getLoginUrl } from '../utils/path';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
 import { useBigSkyBeforePlans } from './helpers/use-bigsky-before-plans-experiment';
 import { useGoalsFirstExperiment } from './helpers/use-goals-first-experiment';
+import { useRedirectDesignSetupOldSlug } from './helpers/use-redirect-design-setup-old-slug';
 import { recordStepNavigation } from './internals/analytics/record-step-navigation';
 import { STEPS } from './internals/steps';
 import { AssertConditionState, Flow, ProvidedDependencies } from './internals/types';
@@ -117,7 +118,6 @@ const onboarding: Flow = {
 				STEPS.GOALS,
 				STEPS.DESIGN_CHOICES,
 				STEPS.DESIGN_SETUP,
-				STEPS.DESIGN_SETUP_LEGACY,
 				STEPS.DIFM_STARTING_POINT
 			);
 		}
@@ -166,6 +166,7 @@ const onboarding: Flow = {
 		} else if ( typeof window !== 'undefined' ) {
 			window.__a8cBigSkyOnboarding = false;
 		}
+
 		/**
 		 * Returns [destination, backDestination] for the post-checkout destination.
 		 */
@@ -199,6 +200,7 @@ const onboarding: Flow = {
 		};
 
 		clearUseMyDomainsQueryParams( currentStepSlug );
+		useRedirectDesignSetupOldSlug( currentStepSlug, navigate );
 
 		const submit = async ( providedDependencies: ProvidedDependencies = {} ) => {
 			switch ( currentStepSlug ) {
@@ -228,7 +230,6 @@ const onboarding: Flow = {
 					}
 				}
 
-				case 'designSetup':
 				case 'design-setup': {
 					return navigate( 'domains' );
 				}
@@ -428,7 +429,6 @@ const onboarding: Flow = {
 						}
 						return navigate( 'design-setup' );
 					}
-				case 'designSetup':
 				case 'design-setup':
 					if ( isDesignChoicesStepEnabled ) {
 						return navigate( 'design-choices' );

client/landing/stepper/declarative-flow/site-setup-flow.ts

@@ -21,6 +21,7 @@ import { useSiteData } from '../hooks/use-site-data';
 import { useCanUserManageOptions } from '../hooks/use-user-can-manage-options';
 import { ONBOARD_STORE, SITE_STORE, USER_STORE } from '../stores';
 import { shouldRedirectToSiteMigration } from './helpers';
+import { useRedirectDesignSetupOldSlug } from './helpers/use-redirect-design-setup-old-slug';
 import { useLaunchpadDecider } from './internals/hooks/use-launchpad-decider';
 import { STEPS } from './internals/steps';
 import { redirect } from './internals/steps-repository/import/util';
@@ -60,7 +61,6 @@ const siteSetupFlow: FlowV1 = {
 			STEPS.OPTIONS,
 			STEPS.DESIGN_CHOICES,
 			STEPS.DESIGN_SETUP,
-			STEPS.DESIGN_SETUP_LEGACY,
 			STEPS.BLOGGER_STARTING_POINT,
 			STEPS.COURSES,
 			STEPS.IMPORT,
@@ -272,6 +272,8 @@ const siteSetupFlow: FlowV1 = {
 			navigate,
 		} );
 
+		useRedirectDesignSetupOldSlug( currentStep, navigate );
+
 		function submit( providedDependencies: ProvidedDependencies = {}, ...params: string[] ) {
 			switch ( currentStep ) {
 				case 'options': {
@@ -286,7 +288,6 @@ const siteSetupFlow: FlowV1 = {
 					return navigate( 'bloggerStartingPoint' );
 				}
 
-				case 'designSetup':
 				case 'design-setup': {
 					return navigate( 'processing' );
 				}
@@ -519,7 +520,6 @@ const siteSetupFlow: FlowV1 = {
 				case 'courses':
 					return navigate( 'bloggerStartingPoint' );
 
-				case 'designSetup':
 				case 'design-setup':
 					if ( intent === SiteIntent.DIFM ) {
 						return navigate( 'difmStartingPoint' );

client/landing/stepper/declarative-flow/update-design.ts

@@ -12,6 +12,7 @@ import { useQuery } from '../hooks/use-query';
 import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { useSiteSlug } from '../hooks/use-site-slug';
 import { ONBOARD_STORE } from '../stores';
+import { useRedirectDesignSetupOldSlug } from './helpers/use-redirect-design-setup-old-slug';
 import { STEPS } from './internals/steps';
 import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
 import { ProvidedDependencies } from './internals/types';
@@ -24,7 +25,7 @@ const updateDesign: Flow = {
 	},
 	isSignupFlow: false,
 	useSteps() {
-		return [ STEPS.DESIGN_SETUP, STEPS.DESIGN_SETUP_LEGACY, STEPS.PROCESSING, STEPS.ERROR ];
+		return [ STEPS.DESIGN_SETUP, STEPS.PROCESSING, STEPS.ERROR ];
 	},
 	useSideEffect() {
 		const { setIntent } = useDispatch( ONBOARD_STORE );
@@ -55,6 +56,8 @@ const updateDesign: Flow = {
 			navigate,
 		} );
 
+		useRedirectDesignSetupOldSlug( currentStep, navigate );
+
 		function submit( providedDependencies: ProvidedDependencies = {}, ...results: string[] ) {
 			switch ( currentStep ) {
 				case 'processing':
@@ -79,7 +82,6 @@ const updateDesign: Flow = {
 						} )
 					);
 
-				case 'designSetup':
 				case 'design-setup':
 					if ( providedDependencies?.goToCheckout ) {
 						const destination = `/setup/${ flowToReturnTo }/launchpad?siteSlug=${ providedDependencies.siteSlug }`;