[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 <github-actions@github.com>
This commit is contained in:
Alba Rincón
GitHub
parent
c658b1c163
commit
ad8f76b2e9
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -11,3 +11,9 @@ export type DesignWithoutAIStateMachineContext = {
|
|||
flowType: FlowType.noAI;
|
||||
isFontLibraryAvailable: boolean;
|
||||
};
|
||||
|
||||
export interface Theme {
|
||||
_links: {
|
||||
'wp:user-global-styles': { href: string }[];
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue