Apply design to site in site-setup processing step

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;
 
@@ -677,6 +680,55 @@ 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 } = useSelect( ( select ) => {
+			const { getSelectedDesign, getSelectedStyleVariation } = select(
+				ONBOARD_STORE
+			) as OnboardSelect;
+			return {
+				selectedDesign: getSelectedDesign(),
+				selectedStyleVariation: getSelectedStyleVariation(),
+			};
+		}, [] );
+		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: {},
+				} ).then( ( theme: ActiveTheme ) => {
+					return dispatch( setActiveTheme( siteId, theme ) );
+				} );
+			} );
+		}, [
+			isGoalsAtFrontExperiment,
+			siteSlugOrId,
+			siteId,
+			setDesignOnSite,
+			selectedDesign,
+			setPendingAction,
+			dispatch,
+			selectedStyleVariation,
+		] );
+	},
 };
 
 export default siteSetupFlow;