diff --git a/plugins/woocommerce-admin/client/customize-store/assets/images/design-your-own.svg b/plugins/woocommerce-admin/client/customize-store/assets/images/design-your-own.svg new file mode 100644 index 00000000000..14fbe6efe8a --- /dev/null +++ b/plugins/woocommerce-admin/client/customize-store/assets/images/design-your-own.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/woocommerce-admin/client/customize-store/assets/images/professional-theme.svg b/plugins/woocommerce-admin/client/customize-store/assets/images/professional-theme.svg new file mode 100644 index 00000000000..d986f13f667 --- /dev/null +++ b/plugins/woocommerce-admin/client/customize-store/assets/images/professional-theme.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx index e8bc0cdd839..afc6142c1cb 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/index.tsx @@ -3,8 +3,9 @@ */ import { useMachine, useSelector } from '@xstate/react'; import { useEffect, useState } from '@wordpress/element'; -import { AnyInterpreter, Sender } from 'xstate'; import { getNewPath } from '@woocommerce/navigation'; +import { useSelect } from '@wordpress/data'; +import { AnyInterpreter, Sender } from 'xstate'; /** * Internal dependencies @@ -47,6 +48,18 @@ export const DesignWithAiController = ( { sendEventToParent?: Sender< customizeStoreStateMachineEvents >; parentContext?: customizeStoreStateMachineContext; } ) => { + interface Theme { + is_block_theme?: boolean; + } + + const currentTheme = useSelect( ( select ) => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return select( 'core' ).getCurrentTheme() as Theme; + }, [] ); + + const isBlockTheme = currentTheme?.is_block_theme; + // Assign aiOnline value from the parent context if it exists. Otherwise, ai is online by default. designWithAiStateMachineDefinition.context.aiOnline = parentContext?.flowType === FlowType.AIOnline; @@ -57,6 +70,10 @@ export const DesignWithAiController = ( { { devTools: versionEnabled === 'V4', parent: parentMachine, + context: { + ...designWithAiStateMachineDefinition.context, + isBlockTheme, + }, } ); diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx index b7328931e43..c54eb8b0f04 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx @@ -89,6 +89,7 @@ export const designWithAiStateMachineDefinition = createMachine( hasErrors: false, }, aiOnline: true, + isBlockTheme: false, }, initial: 'navigate', states: { diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts index 3ca27f75ab1..5840b3b8d43 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts @@ -40,6 +40,7 @@ export type designWithAiStateMachineContext = { // we can retrieve them in preBusinessInfoDescription and then assign them here spawnSaveDescriptionToOptionRef?: ReturnType< typeof spawn >; aiOnline: boolean; + isBlockTheme: boolean; }; export type designWithAiStateMachineEvents = | { type: 'AI_WIZARD_CLOSED_BEFORE_COMPLETION'; payload: { step: string } } diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx index d1dab31735e..cfedfdbfad6 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx @@ -4,6 +4,7 @@ import { useMachine, useSelector } from '@xstate/react'; import { AnyInterpreter, Sender } from 'xstate'; import { useEffect, useState } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -31,6 +32,18 @@ export const DesignWithNoAiController = ( { sendEventToParent?: Sender< customizeStoreStateMachineEvents >; parentContext?: customizeStoreStateMachineContext; } ) => { + interface Theme { + is_block_theme?: boolean; + } + + const currentTheme = useSelect( ( select ) => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return select( 'core' ).getCurrentTheme() as Theme; + }, [] ); + + const isBlockTheme = currentTheme?.is_block_theme; + const { versionEnabled } = useXStateInspect(); const [ , send, service ] = useMachine( designWithNoAiStateMachineDefinition, @@ -43,6 +56,7 @@ export const DesignWithNoAiController = ( { parentContext?.isFontLibraryAvailable ?? false, isPTKPatternsAPIAvailable: parentContext?.isPTKPatternsAPIAvailable ?? false, + isBlockTheme, }, } ); 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 03a59254924..d18c74e94a4 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 @@ -115,6 +115,7 @@ export const designWithNoAiStateMachineDefinition = createMachine( }, isFontLibraryAvailable: false, isPTKPatternsAPIAvailable: false, + isBlockTheme: false, }, initial: 'navigate', 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 9262a1a2843..52f67f4e528 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,6 +11,7 @@ export type DesignWithoutAIStateMachineContext = { flowType: FlowType.noAI; isFontLibraryAvailable: boolean; isPTKPatternsAPIAvailable: boolean; + isBlockTheme: boolean; }; export interface Theme { diff --git a/plugins/woocommerce-admin/client/customize-store/index.tsx b/plugins/woocommerce-admin/client/customize-store/index.tsx index 8611b5e0e63..6ae15218120 100644 --- a/plugins/woocommerce-admin/client/customize-store/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/index.tsx @@ -425,22 +425,22 @@ export const customizeStoreStateMachineDefinition = createMachine( { }, }, assemblerHub: { - initial: 'fetchActiveThemeHasMods', + initial: 'fetchCustomizeStoreCompleted', states: { - fetchActiveThemeHasMods: { + fetchCustomizeStoreCompleted: { invoke: { - src: 'fetchActiveThemeHasMods', + src: 'fetchCustomizeStoreCompleted', onDone: { - actions: 'assignActiveThemeHasMods', - target: 'checkActiveThemeHasMods', + actions: 'assignCustomizeStoreCompleted', + target: 'checkCustomizeStoreCompleted', }, }, }, - checkActiveThemeHasMods: { + checkCustomizeStoreCompleted: { always: [ { // Redirect to the "intro step" if the active theme has no modifications. - cond: 'activeThemeHasNoMods', + cond: 'customizeTaskIsNotCompleted', actions: [ { type: 'updateQueryStep', step: 'intro' }, ], @@ -448,7 +448,7 @@ export const customizeStoreStateMachineDefinition = createMachine( { }, { // Otherwise, proceed to the next step. - cond: 'activeThemeHasMods', + cond: 'customizeTaskIsCompleted', target: 'assemblerHub', }, ], diff --git a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx index 4ede587486d..36d1bf333da 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx @@ -2,10 +2,12 @@ * External dependencies */ import { useState } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { chevronLeft } from '@wordpress/icons'; import interpolateComponents from '@automattic/interpolate-components'; - +import { getNewPath } from '@woocommerce/navigation'; +import { Sender } from 'xstate'; import { Notice, // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -36,6 +38,12 @@ import { NoAIBanner, ExistingNoAiThemeBanner, } from './intro-banners'; +import welcomeTourImg from '../assets/images/design-your-own.svg'; +import professionalThemeImg from '../assets/images/professional-theme.svg'; +import { navigateOrParent } from '~/customize-store/utils'; +import { RecommendThemesAPIResponse } from '~/customize-store/types'; +import { customizeStoreStateMachineEvents } from '~/customize-store'; +import { trackEvent } from '~/customize-store/tracking'; export type events = | { type: 'DESIGN_WITH_AI' } @@ -71,6 +79,162 @@ const MODAL_COMPONENTS = { type ModalStatus = keyof typeof MODAL_COMPONENTS; +const ThemeCards = ( { + sendEvent, + themeData, +}: { + sendEvent: Sender< customizeStoreStateMachineEvents >; + themeData: RecommendThemesAPIResponse; +} ) => { + return ( + <> +

+ { __( + 'Or select a professionally designed theme to customize and make your own.', + 'woocommerce' + ) } +

+ +
+ { themeData.themes?.map( ( theme ) => ( + { + if ( theme.is_active ) { + sendEvent( { + type: 'SELECTED_ACTIVE_THEME', + payload: { theme: theme.slug }, + } ); + } else { + sendEvent( { + type: 'SELECTED_NEW_THEME', + payload: { theme: theme.slug }, + } ); + } + } } + /> + ) ) } +
+ +
+ +
+ + ); +}; + +const CustomizedThemeBanners = ( { + isBlockTheme, + sendEvent, +}: { + isBlockTheme: boolean | undefined; + sendEvent: Sender< customizeStoreStateMachineEvents >; +} ) => { + return ( + <> +

+ { __( 'Design or choose a new theme', 'woocommerce' ) } +

+ +
+
+ { + +
+

+ { __( 'Design your own theme', 'woocommerce' ) } +

+ + +
+
+ +
+ { + +
+

+ { __( + 'Choose a professionally designed theme', + 'woocommerce' + ) } +

+ + +
+
+
+ + ); +}; + export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => { const { intro: { @@ -97,6 +261,17 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => { let bannerStatus: BannerStatus = 'default'; const isDefaultTheme = activeTheme === 'twentytwentyfour'; + interface Theme { + is_block_theme?: boolean; + } + + const currentTheme = useSelect( ( select ) => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return select( 'core' ).getCurrentTheme() as Theme; + }, [] ); + + const isBlockTheme = currentTheme?.is_block_theme; switch ( true ) { case isNetworkOffline: @@ -111,6 +286,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => { break; case context.flowType === FlowType.noAI && customizeStoreTaskCompleted && + isBlockTheme && ! isDefaultTheme: bannerStatus = FlowType.noAI; break; @@ -154,7 +330,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => { 'woocommerce' ) : __( - 'Create a store that reflects your brand and business. Select one of our professionally designed themes to customize, or create your own using our store designer.', + 'Design a store that reflects your brand and business. Customize your active theme, select a professionally designed theme, or create a new look using our store designer.', 'woocommerce' ); @@ -230,54 +406,18 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => { sendEvent={ sendEvent } /> -

- { __( - 'Or select a professionally designed theme to customize and make your own.', - 'woocommerce' - ) } -

- -
- { themeData.themes?.map( ( theme ) => ( - { - if ( theme.is_active ) { - sendEvent( { - type: 'SELECTED_ACTIVE_THEME', - payload: { theme: theme.slug }, - } ); - } else { - sendEvent( { - type: 'SELECTED_NEW_THEME', - payload: { theme: theme.slug }, - } ); - } - } } - /> - ) ) } -
- -
- -
+ { customizeStoreTaskCompleted && + ( isDefaultTheme || ! isBlockTheme ) ? ( + + ) : ( + + ) } diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx index 6157aa3a3b3..35a8024cc9f 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx +++ b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx @@ -225,6 +225,7 @@ export const NoAIBanner = ( { } ) => { const [ isModalOpen, setIsModalOpen ] = useState( false ); interface Theme { + is_block_theme?: boolean; stylesheet?: string; } @@ -322,9 +323,21 @@ export const ExistingAiThemeBanner = ( { export const ExistingNoAiThemeBanner = () => { const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1'; + interface Theme { + is_block_theme?: boolean; + } + + const currentTheme = useSelect( ( select ) => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return select( 'core' ).getCurrentTheme() as Theme; + }, [] ); + + const isBlockTheme = currentTheme?.is_block_theme; + return ( { bannerClass="existing-no-ai-theme-banner" buttonIsLink={ false } bannerButtonOnClick={ () => { - trackEvent( 'customize_your_store_intro_customize_click' ); - navigateOrParent( - window, - getNewPath( - { customizing: true }, - '/customize-store/assembler-hub', - {} - ) - ); + trackEvent( 'customize_your_store_intro_customize_click', { + theme_type: isBlockTheme ? 'block' : 'classic', + } ); + if ( isBlockTheme ) { + navigateOrParent( + window, + getNewPath( + { customizing: true }, + '/customize-store/assembler-hub', + {} + ) + ); + } else { + navigateOrParent( + window, + 'customize.php?return=/wp-admin/themes.php' + ); + } } } bannerButtonText={ __( 'Customize your theme', 'woocommerce' ) } showAIDisclaimer={ false } diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss index 285e46cea73..7add7f050ce 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss +++ b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss @@ -212,6 +212,47 @@ } } +.woocommerce-customize-store-cards { + display: grid; + flex-wrap: wrap; + gap: 32px; + row-gap: 54px; + grid-template-columns: repeat(2, 1fr); + margin-bottom: 40px; + + @media only screen and (min-width: 1600px) { + grid-template-columns: repeat(4, 1fr); + } + + .intro-card { + border-radius: 4px; + border: 1px solid #e9e9e9; + text-align: center; + padding: 36px 51px; + margin-top: 0; + + img { + width: 100%; + margin-bottom: 20px; + } + + div { + text-align: left; + .intro-card__title { + font-size: 14px; + } + + .intro-card__link { + background-color: #fff; + border: 0; + padding: 0; + color: #3858e9; + font-size: 13px; + } + } + } +} + .woocommerce-customize-store-theme-cards { display: grid; flex-wrap: wrap; diff --git a/plugins/woocommerce-admin/client/customize-store/intro/services.ts b/plugins/woocommerce-admin/client/customize-store/intro/services.ts index b2844159931..e4634fc8508 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/services.ts +++ b/plugins/woocommerce-admin/client/customize-store/intro/services.ts @@ -33,47 +33,6 @@ export const fetchThemeCards = async () => { return themes; }; -export const fetchActiveThemeHasMods = async () => { - const currentTemplatePromise = - // @ts-expect-error No types for this exist yet. - resolveSelect( coreStore ).__experimentalGetTemplateForLink( '/' ); - - const styleRevsPromise = - // @ts-expect-error No types for this exist yet. - resolveSelect( coreStore ).getCurrentThemeGlobalStylesRevisions(); - - // @ts-expect-error No types for this exist yet. - const hasModifiedPagesPromise = resolveSelect( coreStore ).getEntityRecords( - 'postType', - 'page', - { - per_page: 100, - _fields: [ 'id', '_links.version-history' ], - orderby: 'menu_order', - order: 'asc', - } - ); - - const [ currentTemplate, styleRevs, rawPages ] = await Promise.all( [ - currentTemplatePromise, - styleRevsPromise, - hasModifiedPagesPromise, - ] ); - - const hasModifiedPages = rawPages?.some( - ( page: { _links: { [ key: string ]: string[] } } ) => { - return page._links?.[ 'version-history' ]?.length > 1; - } - ); - - const activeThemeHasMods = - !! currentTemplate?.modified || - styleRevs?.length > 0 || - hasModifiedPages; - - return { activeThemeHasMods }; -}; - export const fetchCustomizeStoreCompleted = async () => { const task = await resolveSelect( ONBOARDING_STORE_NAME ).getTask( 'customize-store' diff --git a/plugins/woocommerce/changelog/46916-46837-remove-tt4-restriction b/plugins/woocommerce/changelog/46916-46837-remove-tt4-restriction new file mode 100644 index 00000000000..532251e8fe0 --- /dev/null +++ b/plugins/woocommerce/changelog/46916-46837-remove-tt4-restriction @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +[CYS] Remove the restriction to TT4 and allow users to proceed to the pattern assembler with any block themes. Update intro page design. \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js index 5fd99d9f8a0..7a371fc77de 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js @@ -1,6 +1,6 @@ const { test: base, expect, request } = require( '@playwright/test' ); const { AssemblerPage } = require( './assembler/assembler.page' ); -const { activateTheme, DEFAULT_THEME } = require( '../../utils/themes' ); +const { activateTheme } = require( '../../utils/themes' ); const { setOption } = require( '../../utils/options' ); const ASSEMBLER_HUB_URL = @@ -27,7 +27,7 @@ test.describe( 'Store owner can view Assembler Hub for store customization', () 'woocommerce_customize_store_onboarding_tour_hidden', 'yes' ); - await activateTheme( 'twentytwentythree' ); + await activateTheme( 'twentytwentyfour' ); } catch ( error ) { console.log( 'Store completed option not updated' ); } @@ -47,9 +47,6 @@ test.describe( 'Store owner can view Assembler Hub for store customization', () } ); test.afterAll( async ( { baseURL } ) => { - // Reset theme back to default. - await activateTheme( DEFAULT_THEME ); - // Reset tour to visible. await setOption( request, @@ -68,16 +65,15 @@ test.describe( 'Store owner can view Assembler Hub for store customization', () await expect( locator ).not.toHaveText( 'Customize your store' ); } ); - test( 'Can view the Assembler Hub page when the theme is already customized', async ( { + test( 'Can access the Assembler Hub page when the theme is already customized', async ( { page, assemblerPageObject, } ) => { await page.goto( CUSTOMIZE_STORE_URL ); await page.click( 'text=Start designing' ); - await page - .getByRole( 'button', { name: 'Design a new theme' } ) - .click(); await assemblerPageObject.waitForLoadingScreenFinish(); + + await page.goto( ASSEMBLER_HUB_URL ); const assembler = await assemblerPageObject.getAssembler(); await expect( assembler.locator( "text=Let's get creative" ) @@ -86,11 +82,16 @@ test.describe( 'Store owner can view Assembler Hub for store customization', () test( 'Visiting change header should show a list of block patterns to choose from', async ( { page, + assemblerPageObject, } ) => { - await page.goto( ASSEMBLER_HUB_URL ); - await page.click( 'text=Choose your header' ); + await page.goto( CUSTOMIZE_STORE_URL ); + await page.click( 'text=Start designing' ); + await assemblerPageObject.waitForLoadingScreenFinish(); - const locator = page.locator( + const assembler = await assemblerPageObject.getAssembler(); + await assembler.locator( 'text=Choose your header' ).click(); + + const locator = assembler.locator( '.block-editor-block-patterns-list__list-item' ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js index 8c6cf6add2e..a61a26f5c93 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js @@ -1,10 +1,18 @@ -const { test, expect, request } = require( '@playwright/test' ); +const { test: base, expect, request } = require( '@playwright/test' ); const { activateTheme, DEFAULT_THEME } = require( '../../utils/themes' ); const { setOption } = require( '../../utils/options' ); +const { AssemblerPage } = require( './assembler/assembler.page' ); const CUSTOMIZE_STORE_URL = '/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store'; +const test = base.extend( { + assemblerPageObject: async ( { page }, use ) => { + const pageObject = new AssemblerPage( { page } ); + await use( pageObject ); + }, +} ); + test.describe( 'Store owner can view the Intro page', () => { test.use( { storageState: process.env.ADMINSTATE } ); @@ -92,43 +100,39 @@ test.describe( 'Store owner can view the Intro page', () => { await expect( page.locator( '.existing-no-ai-theme-banner' ) ).toBeVisible(); - await expect( - page.locator( 'text=Edit your custom theme' ) - ).toBeVisible(); + await expect( page.locator( 'h1' ) ).toHaveText( + 'Customize your theme' + ); await expect( page.getByRole( 'button', { name: 'Customize your theme' } ) ).toBeVisible(); } ); - test( 'it shows the "no AI" banner when the task is completed and the theme is not the default', async ( { + test( 'Clicking on "Customize your theme" with a block theme should go to the assembler', async ( { page, - baseURL, + assemblerPageObject, } ) => { - try { - await setOption( - request, - baseURL, - 'woocommerce_admin_customize_store_completed', - 'yes' - ); - } catch ( error ) { - console.log( 'Store completed option not updated', error ); - } - await activateTheme( 'twentytwentythree' ); + await page.goto( CUSTOMIZE_STORE_URL ); + await page.click( 'text=Start designing' ); + await assemblerPageObject.waitForLoadingScreenFinish(); await page.goto( CUSTOMIZE_STORE_URL ); + await page + .getByRole( 'button', { name: 'Customize your theme' } ) + .click(); - await expect( page.locator( '.no-ai-banner' ) ).toBeVisible(); - await expect( page.locator( 'text=Design your own' ) ).toBeVisible(); + const assembler = await assemblerPageObject.getAssembler(); await expect( - page.getByRole( 'button', { name: 'Start designing' } ) + assembler.locator( "text=Let's get creative" ) ).toBeVisible(); } ); - test( 'it shows the "no AI" banner, when the task is completed and the theme is not the default', async ( { + test( 'clicking on "Customize your theme" with a classic theme should go to the customizer', async ( { page, baseURL, } ) => { + await activateTheme( 'twentytwenty' ); + try { await setOption( request, @@ -137,16 +141,15 @@ test.describe( 'Store owner can view the Intro page', () => { 'yes' ); } catch ( error ) { - console.log( 'Store completed option not updated', error ); + console.log( 'Store completed option not updated' ); } - await activateTheme( 'twentytwentythree' ); - await page.goto( CUSTOMIZE_STORE_URL ); - await expect( page.locator( '.no-ai-banner' ) ).toBeVisible(); - await expect( page.locator( 'text=Design your own' ) ).toBeVisible(); - await expect( - page.getByRole( 'button', { name: 'Start designing' } ) - ).toBeVisible(); + await page + .getByRole( 'button', { name: 'Customize your theme' } ) + .click(); + + await page.waitForNavigation(); + await expect( page.url() ).toContain( 'customize.php' ); } ); } );