[CYS] Fix the failed to load resource error in the CYS whenever the c…

…urrent active theme is not TT4 (#45519) * Install and activate the TT4 before any other step on the loader * Show the loader while activating the theme * Try running steps together in parallel * Try to run install and global styles in the same function * Handle when the active theme returns null * Add changefile(s) from automation for the following project(s): woocommerce * Add retries and types to fix lint errors * Fix lint errors * Fix more lint errors --------- Co-authored-by: github-actions <github-actions@github.com>
woocommerce · Mar 15, 2024 · ad8f76b · ad8f76b
1 parent c658b1c
commit ad8f76b
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 72 deletions.
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 services = {
 	assembleSite,
 	browserPopstateHandler,

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
@@ -140,26 +140,6 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 									},
 								},
 							},
-							setGlobalStyles: {
-								initial: 'pending',
-								states: {
-									pending: {
-										invoke: {
-											src: 'updateGlobalStylesWithDefaultValues',
-											onDone: {
-												target: 'success',
-											},
-											onError: {
-												actions:
-													'redirectToIntroWithError',
-											},
-										},
-									},
-									success: {
-										type: 'final',
-									},
-								},
-							},
 							installFontFamilies: {
 								initial: 'checkFontLibrary',
 								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 }[];
+	};
+}
diff --git a/plugins/woocommerce/changelog/45519-45479-fix-404-error b/plugins/woocommerce/changelog/45519-45479-fix-404-error
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS - Fix the failed to load resource error in the CYS whenever the current active theme is not TT4