Remove design picker from site-setup flow

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

@@ -1,6 +1,7 @@
-import { Onboard } from '@automattic/data-stores';
+import { Onboard, updateLaunchpadSettings } from '@automattic/data-stores';
 import { MIGRATION_FLOW } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from 'react';
 import wpcomRequest from 'wpcom-proxy-request';
 import { isTargetSitePlanCompatible } from 'calypso/blocks/importer/util';
 import { useIsBigSkyEligible } from 'calypso/landing/stepper/hooks/use-is-site-big-sky-eligible';
@@ -10,6 +11,7 @@ import { addQueryArgs } from 'calypso/lib/route';
 import { useDispatch as reduxDispatch, useSelector } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getInitialQueryArguments } from 'calypso/state/selectors/get-initial-query-arguments';
+import { setActiveTheme } from 'calypso/state/themes/actions';
 import { getActiveTheme, getCanonicalTheme } from 'calypso/state/themes/selectors';
 import { WRITE_INTENT_DEFAULT_DESIGN } from '../constants';
 import { useIsGoalsHoldout } from '../hooks/use-is-goals-holdout';
@@ -29,6 +31,7 @@ import {
 	ProvidedDependencies,
 } from './internals/types';
 import type { OnboardSelect, SiteSelect, UserSelect } from '@automattic/data-stores';
+import type { ActiveTheme } from 'calypso/data/themes/use-active-theme-query';
 
 const SiteIntent = Onboard.SiteIntent;
 
@@ -40,14 +43,16 @@ function isLaunchpadIntent( intent: string ) {
 	return intent === SiteIntent.Write || intent === SiteIntent.Build;
 }
 
+function useGoalsAtFrontExperimentQueryParam() {
+	return Boolean( useSelector( getInitialQueryArguments )?.[ 'goals-at-front-experiment' ] );
+}
+
 const siteSetupFlow: Flow = {
 	name: 'site-setup',
 	isSignupFlow: false,
 
 	useSteps() {
-		const isGoalsAtFrontExperiment = Boolean(
-			useSelector( getInitialQueryArguments )?.[ 'goals-at-front-experiment' ]
-		);
+		const isGoalsAtFrontExperiment = useGoalsAtFrontExperimentQueryParam();
 
 		const steps = [
 			STEPS.GOALS,
@@ -78,9 +83,7 @@ const siteSetupFlow: Flow = {
 		];
 
 		if ( isGoalsAtFrontExperiment ) {
-			// The user has already seen the goals step in the `onboarding` flow
-			// TODO Ensure that DESIGN_CHOICES is at the front if the user is Big Sky eligible
-			steps.splice( 0, 4 );
+			return [ STEPS.PROCESSING, STEPS.ERROR ];
 		}
 
 		return steps;
@@ -677,6 +680,61 @@ const siteSetupFlow: Flow = {
 
 		return result;
 	},
+
+	useSideEffect() {
+		const isGoalsAtFrontExperiment = useGoalsAtFrontExperimentQueryParam();
+		const { siteSlugOrId, siteId } = useSiteData();
+		const { setPendingAction } = useDispatch( ONBOARD_STORE );
+		const { setDesignOnSite } = useDispatch( SITE_STORE );
+		const { selectedDesign, selectedStyleVariation, selectedGlobalStyles } = useSelect(
+			( select ) => {
+				const { getSelectedDesign, getSelectedStyleVariation, getSelectedGlobalStyles } = select(
+					ONBOARD_STORE
+				) as OnboardSelect;
+				return {
+					selectedDesign: getSelectedDesign(),
+					selectedStyleVariation: getSelectedStyleVariation(),
+					selectedGlobalStyles: getSelectedGlobalStyles(),
+				};
+			},
+			[]
+		);
+
+		const dispatch = reduxDispatch();
+
+		useEffect( () => {
+			if ( ! isGoalsAtFrontExperiment || ! siteSlugOrId || ! siteId ) {
+				return;
+			}
+
+			setPendingAction( async () => {
+				await updateLaunchpadSettings( siteSlugOrId, {
+					checklist_statuses: { design_completed: true },
+				} );
+
+				if ( ! selectedDesign ) {
+					return;
+				}
+
+				return setDesignOnSite( siteSlugOrId, selectedDesign, {
+					styleVariation: selectedStyleVariation,
+					globalStyles: selectedGlobalStyles,
+				} ).then( ( theme: ActiveTheme ) => {
+					return dispatch( setActiveTheme( siteId, theme ) );
+				} );
+			} );
+		}, [
+			isGoalsAtFrontExperiment,
+			siteSlugOrId,
+			siteId,
+			setDesignOnSite,
+			selectedDesign,
+			setPendingAction,
+			dispatch,
+			selectedStyleVariation,
+			selectedGlobalStyles,
+		] );
+	},
 };
 
 export default siteSetupFlow;