From ad8f76b2e90e3c691396214a494311f8ca5050af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Fri, 15 Mar 2024 11:09:31 +0100 Subject: [PATCH] [CYS] Fix the failed to load resource error in the CYS whenever the current 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 --- .../design-without-ai/services.ts | 134 +++++++++++------- .../design-without-ai/state-machine.tsx | 20 --- .../design-without-ai/types.ts | 6 + .../changelog/45519-45479-fix-404-error | 4 + 4 files changed, 92 insertions(+), 72 deletions(-) create mode 100644 plugins/woocommerce/changelog/45519-45479-fix-404-error 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 index c47b93230a1d..4b23307f2679 100644 --- 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 index 1fde98aae772..54bcbfaadda7 100644 --- 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 index 93bfd680f105..90b6cf7e610c 100644 --- 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 new file mode 100644 index 000000000000..d16f8acb7f77 --- /dev/null +++ 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 \ No newline at end of file