diff --git a/client/landing/stepper/declarative-flow/site-setup-flow.ts b/client/landing/stepper/declarative-flow/site-setup-flow.ts index cca741b4bcaec..d22b23455c835 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; @@ -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;