Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove design picker from site-setup flow #97540

Merged
merged 3 commits into from
Dec 17, 2024
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 59 additions & 7 deletions client/landing/stepper/declarative-flow/site-setup-flow.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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;

Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 ) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arthur791004 to hack things together and get it working we just passed an empty object here for globalStyles. It works, but I'm not sure why or whether this is a problem.

The design picker passes a proper globalStyles object here, but the data is loaded very indirectly, so I don't know the easy way to pass the global styles in here.

Copy link
Contributor

@arthur791004 arthur791004 Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The empty object{} will clear the user's global styles on the selected theme because people may come from the existing sites.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm...the preselected global styles can be loaded via query parameters but it needs to go through the Design Preview step to load the data...

I think we can address this in the follow-up PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to see if things would work by changing this to use selectedGlobalStyles which is now loading from the store but it's not loading, would need more investigation for this.

return dispatch( setActiveTheme( siteId, theme ) );
} );
} );
}, [
isGoalsAtFrontExperiment,
siteSlugOrId,
siteId,
setDesignOnSite,
selectedDesign,
setPendingAction,
dispatch,
selectedStyleVariation,
] );
},
};

export default siteSetupFlow;
Loading