Merge branch 'trunk' of github.com:woocommerce/woocommerce into 45476…

…-cys-on-core-make-sure-the-pre-loader-is-triggered-right-after-the-user-clicks-on-the-opt-in-modal
woocommerce · Mar 15, 2024 · 7271ec3 · 7271ec3
2 parents a228c1e + ed3aab1
commit 7271ec3
Show file tree

Hide file tree

Showing 24 changed files with 525 additions and 312 deletions.
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
@@ -128,7 +128,6 @@ export const Layout = () => {
 				>
 					<Transitional
 						sendEvent={ sendEvent }
-						editor={ editor }
 						isWooExpress={ isWooExpress() }
 						isSurveyOpen={ isSurveyOpen }
 						setSurveyOpen={ setSurveyOpen }

diff --git a/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js b/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const lessonPLan = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<Path
+			fill="#1E1E1E"
+			d="m8.85 4.821-1.203-.895-2.083 2.802-1.114-.83L3.553 7.1 5.87 8.829l2.98-4.008ZM20 7.75h-8.889v-1.5H20v1.5Zm0 5h-8.889v-1.5H20v1.5Z"
+		/>
+		<Path
+			fill="#1E1E1E"
+			fillRule="evenodd"
+			d="M6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+			clipRule="evenodd"
+		/>
+		<Path fill="#1E1E1E" d="M11.111 17.75H20v-1.5h-8.889v1.5Z" />
+	</SVG>
+);
+export default lessonPLan;
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts
@@ -32,7 +32,7 @@ import {
 	FONT_PAIRINGS_WHEN_AI_IS_OFFLINE,
 	FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING,
 } from '../assembler-hub/sidebar/global-styles/font-pairing-variations/constants';
-import { DesignWithoutAIStateMachineContext } from './types';
+import { DesignWithoutAIStateMachineContext, Theme } from './types';
 
 const assembleSite = async () => {
 	await updateTemplate( {
@@ -51,9 +51,89 @@ const browserPopstateHandler =
 		};
 	};
 
-const installAndActivateTheme = async () => {
+const getActiveThemeWithRetries = async (): Promise< Theme[] | null > => {
+	let retries = 3;
+
+	while ( retries > 0 ) {
+		const activeThemes = ( await resolveSelect( 'core' ).getEntityRecords(
+			'root',
+			'theme',
+			{ status: 'active' },
+			true
+		) ) as Theme[];
+		if ( activeThemes ) {
+			return activeThemes;
+		}
+
+		retries--;
+	}
+
+	return null;
+};
+
+const getCurrentGlobalStylesId = async (): Promise< number | null > => {
+	const activeThemes = await getActiveThemeWithRetries();
+	if ( ! activeThemes ) {
+		return null;
+	}
+
+	const currentThemeLinks = activeThemes[ 0 ]?._links;
+	const url = currentThemeLinks?.[ 'wp:user-global-styles' ]?.[ 0 ]?.href;
+	const globalStylesObject = ( await apiFetch( { url } ) ) as { id: number };
+
+	return globalStylesObject.id;
+};
+
+const updateGlobalStylesWithDefaultValues = async (
+	context: DesignWithoutAIStateMachineContext
+) => {
+	// We are using the first color palette and font pairing that are displayed on the color/font picker on the sidebar.
+	const colorPalette = COLOR_PALETTES[ 0 ];
+
+	const allowTracking =
+		( await resolveSelect( OPTIONS_STORE_NAME ).getOption(
+			'woocommerce_allow_tracking'
+		) ) === 'yes';
+
+	const fontPairing =
+		context.isFontLibraryAvailable && allowTracking
+			? FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ]
+			: FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING[ 0 ];
+
+	const globalStylesId = await getCurrentGlobalStylesId();
+	if ( ! globalStylesId ) {
+		return;
+	}
+
+	// @ts-expect-error No types for this exist yet.
+	const { saveEntityRecord } = dispatch( coreStore );
+
+	await saveEntityRecord(
+		'root',
+		'globalStyles',
+		{
+			id: globalStylesId,
+			styles: mergeBaseAndUserConfigs(
+				colorPalette?.styles || {},
+				fontPairing?.styles || {}
+			),
+			settings: mergeBaseAndUserConfigs(
+				colorPalette?.settings || {},
+				fontPairing?.settings || {}
+			),
+		},
+		{
+			throwOnError: true,
+		}
+	);
+};
+
+const installAndActivateTheme = async (
+	context: DesignWithoutAIStateMachineContext
+) => {
 	try {
 		await setTheme( THEME_SLUG );
+		await updateGlobalStylesWithDefaultValues( context );
 	} catch ( error ) {
 		recordEvent(
 			'customize_your_store__no_ai_install_and_activate_theme_error',
@@ -155,56 +235,6 @@ const createProducts = async () => {
 	}
 };
 
-const updateGlobalStylesWithDefaultValues = async (
-	context: DesignWithoutAIStateMachineContext
-) => {
-	// We are using the first color palette and font pairing that are displayed on the color/font picker on the sidebar.
-	const colorPalette = COLOR_PALETTES[ 0 ];
-
-	const allowTracking =
-		( await resolveSelect( OPTIONS_STORE_NAME ).getOption(
-			'woocommerce_allow_tracking'
-		) ) === 'yes';
-
-	const fontPairing =
-		context.isFontLibraryAvailable && allowTracking
-			? FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ]
-			: FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING[ 0 ];
-
-	// @ts-expect-error No types for this exist yet.
-	const { invalidateResolutionForStoreSelector } = dispatch( coreStore );
-	invalidateResolutionForStoreSelector(
-		'__experimentalGetCurrentGlobalStylesId'
-	);
-
-	const globalStylesId = await resolveSelect(
-		coreStore
-		// @ts-expect-error No types for this exist yet.
-	).__experimentalGetCurrentGlobalStylesId();
-
-	// @ts-expect-error No types for this exist yet.
-	const { saveEntityRecord } = dispatch( coreStore );
-
-	await saveEntityRecord(
-		'root',
-		'globalStyles',
-		{
-			id: globalStylesId,
-			styles: mergeBaseAndUserConfigs(
-				colorPalette?.styles || {},
-				fontPairing?.styles || {}
-			),
-			settings: mergeBaseAndUserConfigs(
-				colorPalette?.settings || {},
-				fontPairing?.settings || {}
-			),
-		},
-		{
-			throwOnError: true,
-		}
-	);
-};
-
 export const enableTracking = async () => {
 	try {
 		await dispatch( OPTIONS_STORE_NAME ).updateOptions( {

diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx
@@ -216,26 +216,6 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 									},
 								},
 							},
-							setGlobalStyles: {
-								initial: 'pending',
-								states: {
-									pending: {
-										invoke: {
-											src: 'updateGlobalStylesWithDefaultValues',
-											onDone: {
-												target: 'success',
-											},
-											onError: {
-												actions:
-													'redirectToIntroWithError',
-											},
-										},
-									},
-									success: {
-										type: 'final',
-									},
-								},
-							},
 							installFontFamilies: {
 								...installFontFamiliesState,
 								states: {

diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/types.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/types.ts
@@ -11,3 +11,9 @@ export type DesignWithoutAIStateMachineContext = {
 	flowType: FlowType.noAI;
 	isFontLibraryAvailable: boolean;
 };
+
+export interface Theme {
+	_links: {
+		'wp:user-global-styles': { href: string }[];
+	};
+}