Design Picker: Save the selected global styles to the onboard stores

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

@@ -28,17 +28,22 @@ const useRecipe = (
 ) => {
 	const [ searchParams, setSearchParams ] = useSearchParams();
 	const isPreviewingDesign = !! searchParams.get( 'theme' );
-	const { selectedDesign, selectedStyleVariation } = useSelect( ( select ) => {
-		const { getSelectedDesign, getSelectedStyleVariation } = select(
-			ONBOARD_STORE
-		) as OnboardSelect;
-		return {
-			selectedDesign: getSelectedDesign(),
-			selectedStyleVariation: getSelectedStyleVariation(),
-		};
-	}, [] );
-
-	const { setSelectedDesign, setSelectedStyleVariation } = useDispatch( ONBOARD_STORE );
+	const { selectedDesign, selectedStyleVariation, selectedGlobalStyles } = useSelect(
+		( select ) => {
+			const { getSelectedDesign, getSelectedStyleVariation, getSelectedGlobalStyles } = select(
+				ONBOARD_STORE
+			) as OnboardSelect;
+			return {
+				selectedDesign: getSelectedDesign(),
+				selectedStyleVariation: getSelectedStyleVariation(),
+				selectedGlobalStyles: getSelectedGlobalStyles(),
+			};
+		},
+		[]
+	);
+
+	const { setSelectedDesign, setSelectedStyleVariation, setSelectedGlobalStyles } =
+		useDispatch( ONBOARD_STORE );
 
 	const [ selectedColorVariation, setSelectedColorVariation ] =
 		useState< GlobalStylesObject | null >( null );
@@ -53,8 +58,6 @@ const useRecipe = (
 		!! selectedFontVariation,
 	].filter( Boolean ).length;
 
-	const [ globalStyles, setGlobalStyles ] = useState< GlobalStylesObject | null >( null );
-
 	/**
 	 * Get the preselect data only when mounting and ignore any changes later.
 	 */
@@ -183,7 +186,7 @@ const useRecipe = (
 		handleSelectedStyleVariationChange();
 		handleSelectedColorVariationChange( null );
 		handleSelectedFontVariationChange( null );
-		setGlobalStyles( null );
+		setSelectedGlobalStyles( undefined );
 	};
 
 	// Unset the selected design, thus restarting the design picking experience.
@@ -258,14 +261,14 @@ const useRecipe = (
 		selectedColorVariation,
 		selectedFontVariation,
 		numOfSelectedGlobalStyles,
-		globalStyles,
+		globalStyles: selectedGlobalStyles,
 		previewDesign,
 		previewDesignVariation,
 		setSelectedDesign,
 		setSelectedStyleVariation,
 		setSelectedColorVariation: handleSelectedColorVariationChange,
 		setSelectedFontVariation: handleSelectedFontVariationChange,
-		setGlobalStyles,
+		setGlobalStyles: setSelectedGlobalStyles,
 		resetPreview,
 	};
 };

packages/data-stores/src/onboard/actions.ts

@@ -2,7 +2,7 @@ import { guessTimezone, getLanguage } from '@automattic/i18n-utils';
 import { dispatch, select } from '@wordpress/data-controls';
 import { __ } from '@wordpress/i18n';
 import { STORE_KEY as SITE_STORE } from '../site';
-import { Visibility } from '../site/types';
+import { Visibility, GlobalStyles } from '../site/types';
 import { SiteGoal, STORE_KEY } from './constants';
 import { ProfilerData, ReadymadeTemplate } from './types';
 import type { DomainTransferData, State } from '.';
@@ -171,6 +171,11 @@ export const setSelectedStyleVariation = (
 	selectedStyleVariation,
 } );
 
+export const setSelectedGlobalStyles = ( selectedGlobalStyles: GlobalStyles | undefined ) => ( {
+	type: 'SET_SELECTED_GLOBAL_STYLES' as const,
+	selectedGlobalStyles,
+} );
+
 export const setSelectedReadymadeTemplate = ( readymadeTemplate: ReadymadeTemplate ) => ( {
 	type: 'SET_READYMADE_TEMPLATE' as const,
 	readymadeTemplate,
@@ -410,6 +415,7 @@ export type OnboardAction = ReturnType<
 	| typeof setRandomizedDesigns
 	| typeof setSelectedDesign
 	| typeof setSelectedStyleVariation
+	| typeof setSelectedGlobalStyles
 	| typeof setSelectedSite
 	| typeof setSelectedReadymadeTemplate
 	| typeof setShowSignupDialog

packages/data-stores/src/onboard/reducer.ts

@@ -10,6 +10,7 @@ import type {
 } from './types';
 import type { DomainSuggestion } from '../domain-suggestions';
 import type { FeatureId } from '../shared-types';
+import type { GlobalStyles } from '../site';
 // somewhat hacky, but resolves the circular dependency issue
 import type { Design, StyleVariation } from '@automattic/design-picker/src/types';
 import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
@@ -130,6 +131,22 @@ const selectedStyleVariation: Reducer< StyleVariation | undefined, OnboardAction
 	return state;
 };
 
+const selectedGlobalStyles: Reducer< GlobalStyles | undefined, OnboardAction > = (
+	state,
+	action
+) => {
+	switch ( action.type ) {
+		case 'SET_SELECTED_GLOBAL_STYLES':
+			return action.selectedGlobalStyles;
+
+		case 'RESET_ONBOARD_STORE':
+			return undefined;
+
+		default:
+			return state;
+	}
+};
+
 const readymadeTemplate: Reducer< ReadymadeTemplate | undefined, OnboardAction > = (
 	state = undefined, // Initial state is set to undefined
 	action
@@ -629,6 +646,7 @@ const reducer = combineReducers( {
 	storeType,
 	selectedDesign,
 	selectedStyleVariation,
+	selectedGlobalStyles,
 	selectedSite,
 	siteTitle,
 	showSignupDialog,

packages/data-stores/src/onboard/selectors.ts

@@ -33,6 +33,7 @@ export const getLastLocation = ( state: State ) => state.lastLocation;
 export const getRandomizedDesigns = ( state: State ) => state.randomizedDesigns;
 export const getSelectedDesign = ( state: State ) => state.selectedDesign;
 export const getSelectedStyleVariation = ( state: State ) => state.selectedStyleVariation;
+export const getSelectedGlobalStyles = ( state: State ) => state.selectedGlobalStyles;
 export const getSelectedDomain = ( state: State ) => state.domain;
 export const getSelectedFeatures = ( state: State ) => state.selectedFeatures;
 export const getSelectedSite = ( state: State ) => state.selectedSite;