diff --git a/client/landing/stepper/declarative-flow/site-setup-flow.ts b/client/landing/stepper/declarative-flow/site-setup-flow.ts index 6aba1b6ffac20..d83baaf071dec 100644 --- a/client/landing/stepper/declarative-flow/site-setup-flow.ts +++ b/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;