Moves design picker after the goals step (#97383)

* Moves design picker after the goals step

* Use demo_uri as siteSlug

* Remove siteId from global-styles-variation API calls

* Clean up siteID references for useRecipe

* Fix type checks

* Use wpcom/v3 API for global-styles-variation

* Fix designSetup styles

* Remove pattern-assembler check

* Remove unused dependencies

---------

Co-authored-by: Candy Tsai <candy02058912@gmail.com>

client/landing/stepper/declarative-flow/internals/global.scss

@@ -74,6 +74,7 @@ button {
 .import-hosted-site,
 .site-setup,
 .onboarding.goals,
+.onboarding.design-setup,
 .site-migration,
 .migration,
 .migration-signup,

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/hooks/use-recipe.ts

@@ -19,7 +19,6 @@ const makeSearchParams = (
 ) => callback( new URLSearchParams( window.location.search ) );
 
 const useRecipe = (
-	siteId = 0,
 	allDesigns: StarterDesigns | undefined,
 	pickDesign: ( design?: Design, options?: { shouldGoToAssembler: boolean } ) => void,
 	pickUnlistedDesign: ( theme: string ) => void,
@@ -82,11 +81,11 @@ const useRecipe = (
 
 	const { stylesheet = '' } = selectedDesign?.recipe || {};
 
-	const colorVariations = useColorPaletteVariations( siteId, stylesheet, {
+	const colorVariations = useColorPaletteVariations( stylesheet, {
 		enabled: !! preselectedColorVariationTitle,
 	} );
 
-	const fontVariations = useFontPairingVariations( siteId, stylesheet, {
+	const fontVariations = useFontPairingVariations( stylesheet, {
 		enabled: !! preselectedFontVariationTitle,
 	} );
 

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -24,7 +24,7 @@ import {
 	PERSONAL_THEME,
 } from '@automattic/design-picker';
 import { useLocale, useHasEnTranslation } from '@automattic/i18n-utils';
-import { StepContainer, DESIGN_FIRST_FLOW } from '@automattic/onboarding';
+import { StepContainer, DESIGN_FIRST_FLOW, ONBOARDING_FLOW } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
@@ -76,6 +76,7 @@ import { useQuery } from '../../../../hooks/use-query';
 import { useSiteData } from '../../../../hooks/use-site-data';
 import { ONBOARD_STORE, SITE_STORE } from '../../../../stores';
 import { goToCheckout } from '../../../../utils/checkout';
+import { useGoalsFirstExperiment } from '../../../helpers/use-goals-first-experiment';
 import {
 	getDesignEventProps,
 	getDesignTypeProps,
@@ -120,6 +121,9 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 
 	const isGoalCentricFeature = isEnabled( 'design-picker/goal-centric' ) && ! isGoalsHoldout;
 
+	const [ isGoalsAtFrontExperimentLoading, isGoalsAtFrontExperiment ] = useGoalsFirstExperiment();
+	const isSiteRequired = flow !== ONBOARDING_FLOW || ! isGoalsAtFrontExperiment;
+
 	const { isEligible } = useIsBigSkyEligible();
 	const isBigSkyEligible = isEligible && isGoalCentricFeature;
 
@@ -265,7 +269,6 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 		setGlobalStyles,
 		resetPreview,
 	} = useRecipe(
-		site?.ID,
 		allDesigns,
 		pickDesign,
 		pickUnlistedDesign,
@@ -687,6 +690,17 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 				},
 				{ ...( positionIndex >= 0 && { position_index: positionIndex } ) }
 			);
+		} else if ( ! isSiteRequired && ! siteSlugOrId && _selectedDesign ) {
+			const positionIndex = designs.findIndex(
+				( design ) => design.slug === _selectedDesign?.slug
+			);
+			handleSubmit(
+				{
+					selectedDesign: _selectedDesign,
+					selectedSiteCategory: categorization.selections?.join( ',' ),
+				},
+				{ ...( positionIndex >= 0 && { position_index: positionIndex } ) }
+			);
 		}
 	}
 
@@ -784,7 +798,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 	// ********** Main render logic
 
 	// Don't render until we've done fetching all the data needed for initial render.
-	if ( ! site || isLoadingDesigns ) {
+	if ( ( ! site && isSiteRequired ) || isLoadingDesigns || isGoalsAtFrontExperimentLoading ) {
 		return <StepperLoader />;
 	}
 
@@ -824,7 +838,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 				) }
 				<QueryEligibility siteId={ site?.ID } />
 				<EligibilityWarningsModal
-					site={ site }
+					site={ site ?? undefined }
 					isMarketplace={ selectedDesign?.is_externally_managed }
 					isOpen={ showEligibility }
 					handleClose={ () => {
@@ -871,7 +885,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 					actionButtons={ actionButtons }
 					recordDeviceClick={ recordDeviceClick }
 					limitGlobalStyles={ shouldLimitGlobalStyles }
-					siteId={ site.ID }
+					siteId={ site?.ID }
 					stylesheet={ selectedDesign.recipe?.stylesheet }
 					screenshot={ fullLengthScreenshot }
 					isExternallyManaged={ selectedDesign.is_externally_managed }

client/landing/stepper/declarative-flow/onboarding.ts

@@ -66,8 +66,8 @@ const onboarding: Flow = {
 		] );
 
 		if ( isGoalsAtFrontExperiment ) {
-			// This step is not wrapped in `stepsWithRequiredLogin`
-			steps.unshift( STEPS.GOALS );
+			// Note: these steps are not wrapped in `stepsWithRequiredLogin`
+			steps.unshift( STEPS.GOALS, STEPS.DESIGN_SETUP );
 		}
 
 		return steps;
@@ -127,11 +127,15 @@ const onboarding: Flow = {
 						}
 
 						default: {
-							return navigate( 'domains' );
+							return navigate( 'designSetup' );
 						}
 					}
 				}
 
+				case 'designSetup': {
+					return navigate( 'domains' );
+				}
+
 				case 'domains':
 					setSiteUrl( providedDependencies.siteUrl );
 					setDomain( providedDependencies.suggestion );

packages/data-stores/src/starter-designs-queries/use-starter-designs-query.ts

@@ -50,6 +50,7 @@ interface StarterDesign {
 	theme_type?: string;
 	screenshot?: string;
 	theme_tier: ThemeTier;
+	demo_uri?: string;
 }
 
 export function useStarterDesignsQuery(
@@ -100,6 +101,7 @@ function apiStarterDesignsToDesign( design: StarterDesign ): Design {
 		design_type,
 		screenshot,
 		theme_tier,
+		demo_uri,
 	} = design;
 
 	const is_externally_managed = design.theme_type === 'managed-external';
@@ -124,5 +126,6 @@ function apiStarterDesignsToDesign( design: StarterDesign ): Design {
 		theme: '',
 		screenshot,
 		design_tier: theme_tier?.slug,
+		demo_uri,
 	};
 }

packages/design-picker/src/types.ts

@@ -100,6 +100,7 @@ export interface Design {
 	is_virtual?: boolean;
 	preview_data?: PreviewData;
 	screenshot?: string;
+	demo_uri?: string;
 
 	/** @deprecated TODO: replace both with just stylesheet */
 	stylesheet?: string;

packages/global-styles/src/components/color-palette-variations/index.tsx

@@ -82,14 +82,14 @@ const ColorPaletteVariation = ( {
 };
 
 const ColorPaletteVariations = ( {
-	siteId,
+	//siteId,
 	stylesheet,
 	selectedColorPaletteVariation,
 	onSelect,
 	limitGlobalStyles,
 }: ColorPaletteVariationsProps ) => {
 	const { base } = useContext( GlobalStylesContext );
-	const colorPaletteVariations = useColorPaletteVariations( siteId, stylesheet ) ?? [];
+	const colorPaletteVariations = useColorPaletteVariations( stylesheet ) ?? [];
 	const composite = useCompositeState();
 
 	return (

packages/global-styles/src/components/font-pairing-variations/index.tsx

@@ -83,14 +83,14 @@ const FontPairingVariation = ( {
 };
 
 const FontPairingVariations = ( {
-	siteId,
+	//siteId,
 	stylesheet,
 	selectedFontPairingVariation,
 	onSelect,
 	limitGlobalStyles,
 }: FontPairingVariationsProps ) => {
 	// The theme font pairings don't include the default font pairing
-	const fontPairingVariations = useFontPairingVariations( siteId, stylesheet ) ?? [];
+	const fontPairingVariations = useFontPairingVariations( stylesheet ) ?? [];
 	const composite = useCompositeState();
 	return (
 		<Composite

packages/global-styles/src/components/global-styles-provider/index.tsx

@@ -38,19 +38,16 @@ const useGlobalStylesUserConfig = (): [ boolean, GlobalStylesObject, SetConfig ]
 };
 
 const useGlobalStylesBaseConfig = (
-	siteId: number | string,
 	stylesheet: string
 ): [ boolean, GlobalStylesObject | undefined ] => {
-	const { data } = useGetGlobalStylesBaseConfig( siteId, stylesheet );
+	const { data } = useGetGlobalStylesBaseConfig( stylesheet );
 	return [ !! data, data ];
 };
 
-const useGlobalStylesContext = ( siteId: number | string, stylesheet: string ) => {
+const useGlobalStylesContext = ( stylesheet: string ) => {
 	const [ isUserConfigReady, userConfig, setUserConfig ] = useGlobalStylesUserConfig();
-	const [ isBaseConfigReady, baseConfig = DEFAULT_GLOBAL_STYLES ] = useGlobalStylesBaseConfig(
-		siteId,
-		stylesheet
-	);
+	const [ isBaseConfigReady, baseConfig = DEFAULT_GLOBAL_STYLES ] =
+		useGlobalStylesBaseConfig( stylesheet );
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {
 			return DEFAULT_GLOBAL_STYLES;
@@ -83,8 +80,8 @@ interface Props {
 	placeholder: JSX.Element | null;
 }
 
-const GlobalStylesProvider = ( { siteId, stylesheet, children, placeholder = null }: Props ) => {
-	const context = useGlobalStylesContext( siteId, stylesheet );
+const GlobalStylesProvider = ( { stylesheet, children, placeholder = null }: Props ) => {
+	const context = useGlobalStylesContext( stylesheet );
 	const isBlocksRegistered = useRegisterCoreBlocks();
 
 	if ( ! context.isReady || ! isBlocksRegistered ) {

packages/global-styles/src/hooks/use-color-palette-variations.ts

@@ -7,18 +7,14 @@ type Options = {
 	enabled?: boolean;
 };
 
-const useColorPaletteVariations = (
-	siteId: number | string,
-	stylesheet: string,
-	{ enabled = true }: Options = {}
-) => {
+const useColorPaletteVariations = ( stylesheet: string, { enabled = true }: Options = {} ) => {
 	const { data } = useQuery< any, unknown, GlobalStylesObject[] >( {
-		queryKey: [ 'global-styles-color-palette', siteId, stylesheet ],
+		queryKey: [ 'global-styles-color-palette', stylesheet ],
 		queryFn: async () =>
 			wpcomRequest< GlobalStylesObject[] >( {
-				path: `/sites/${ encodeURIComponent( siteId ) }/global-styles-variation/color-palettes`,
+				path: `/global-styles-variation/color-palettes`,
 				method: 'GET',
-				apiNamespace: 'wpcom/v2',
+				apiNamespace: 'wpcom/v3',
 				query: new URLSearchParams( {
 					stylesheet,
 					...( isEnabled( 'design-picker/use-assembler-styles' )
@@ -28,7 +24,7 @@ const useColorPaletteVariations = (
 			} ),
 		refetchOnMount: 'always',
 		staleTime: Infinity,
-		enabled: !! siteId && !! stylesheet && enabled,
+		enabled: !! stylesheet && enabled,
 	} );
 
 	return data;

packages/global-styles/src/hooks/use-font-pairing-variations.ts

@@ -8,18 +8,14 @@ type Options = {
 	base_variation_stylesheet?: string;
 };
 
-const useFontPairingVariations = (
-	siteId: number | string,
-	stylesheet: string,
-	{ enabled = true }: Options = {}
-) => {
+const useFontPairingVariations = ( stylesheet: string, { enabled = true }: Options = {} ) => {
 	const { data } = useQuery< any, unknown, GlobalStylesObject[] >( {
-		queryKey: [ 'global-styles-font-pairings', siteId, stylesheet ],
+		queryKey: [ 'global-styles-font-pairings', stylesheet ],
 		queryFn: async () =>
 			wpcomRequest< GlobalStylesObject[] >( {
-				path: `/sites/${ encodeURIComponent( siteId ) }/global-styles-variation/font-pairings`,
+				path: `/global-styles-variation/font-pairings`,
 				method: 'GET',
-				apiNamespace: 'wpcom/v2',
+				apiNamespace: 'wpcom/v3',
 				query: new URLSearchParams( {
 					stylesheet,
 					...( isEnabled( 'design-picker/use-assembler-styles' )
@@ -29,7 +25,7 @@ const useFontPairingVariations = (
 			} ),
 		refetchOnMount: 'always',
 		staleTime: Infinity,
-		enabled: !! siteId && !! stylesheet && enabled,
+		enabled: !! stylesheet && enabled,
 	} );
 
 	return data;

packages/global-styles/src/hooks/use-get-global-styles-base-config.ts

@@ -2,21 +2,21 @@ import { useQuery } from '@tanstack/react-query';
 import wpcomRequest from 'wpcom-proxy-request';
 import type { GlobalStylesObject } from '../types';
 
-const useGetGlobalStylesBaseConfig = ( siteId: number | string, stylesheet: string ) => {
+const useGetGlobalStylesBaseConfig = ( stylesheet: string ) => {
 	return useQuery< any, unknown, GlobalStylesObject >( {
-		queryKey: [ 'global-styles-base-config', siteId, stylesheet ],
+		queryKey: [ 'global-styles-base-config', stylesheet ],
 		queryFn: async () =>
 			wpcomRequest< GlobalStylesObject >( {
 				// We have to fetch the base config from wpcom as the core endpoint only supports
 				// active theme
-				path: `/sites/${ encodeURIComponent( siteId ) }/global-styles-variation/theme`,
+				path: `/global-styles-variation/theme`,
 				method: 'GET',
-				apiNamespace: 'wpcom/v2',
+				apiNamespace: 'wpcom/v3',
 				query: new URLSearchParams( { stylesheet } ).toString(),
 			} ),
 		refetchOnMount: 'always',
 		staleTime: Infinity,
-		enabled: !! ( siteId && stylesheet ),
+		enabled: !! stylesheet,
 	} );
 };