CYS: Ensure that the button in the Intro page redirects to the Customizer when a classic theme is enabled (#49804)

* CYS: Ensure that Customizer redirect is always enabled when a classic theme is enabled

* CYS: Ensure that the button in the Intro page redirects to the Customizer when a classic theme is enabled

* clean up logic

* add site preview

* mark CYS as complete when user saves customizer changes

* improve comment

* fix unit test

* fix unit test

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/intro/index.tsx

@@ -37,6 +37,7 @@ import {
 	ExistingThemeBanner,
 	NoAIBanner,
 	ExistingNoAiThemeBanner,
+	ClassicThemeBanner,
 } from './intro-banners';
 import welcomeTourImg from '../assets/images/design-your-own.svg';
 import professionalThemeImg from '../assets/images/professional-theme.svg';
@@ -67,6 +68,7 @@ const BANNER_COMPONENTS = {
 	'existing-theme': ExistingThemeBanner,
 	[ FlowType.noAI ]: NoAIBanner,
 	'existing-no-ai-theme': ExistingNoAiThemeBanner,
+	'classic-theme': ClassicThemeBanner,
 	default: DefaultBanner,
 };
 
@@ -281,6 +283,9 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 		case isJetpackOffline as boolean:
 			bannerStatus = 'jetpack-offline';
 			break;
+		case ! isBlockTheme:
+			bannerStatus = 'classic-theme';
+			break;
 		case context.flowType === FlowType.noAI &&
 			! customizeStoreTaskCompleted:
 			bannerStatus = FlowType.noAI;

plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx

@@ -323,17 +323,37 @@ export const ExistingAiThemeBanner = ( {
 export const ExistingNoAiThemeBanner = () => {
 	const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
 
-	interface Theme {
-		is_block_theme?: boolean;
-	}
+	return (
+		<BaseIntroBanner
+			bannerTitle={ __( 'Customize your theme', 'woocommerce' ) }
+			bannerText={ __(
+				'Customize everything from the color palette and the fonts to the page layouts, making sure every detail aligns with your brand.',
+				'woocommerce'
+			) }
+			bannerClass="existing-no-ai-theme-banner"
+			buttonIsLink={ false }
+			bannerButtonOnClick={ () => {
+				trackEvent( 'customize_your_store_intro_customize_click', {
+					theme_type: 'block',
+				} );
+				navigateOrParent(
+					window,
+					getNewPath(
+						{ customizing: true },
+						'/customize-store/assembler-hub',
+						{}
+					)
+				);
+			} }
+			bannerButtonText={ __( 'Go to the Editor', 'woocommerce' ) }
+			showAIDisclaimer={ false }
+			previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
+		></BaseIntroBanner>
+	);
+};
 
-	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;
+export const ClassicThemeBanner = () => {
+	const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
 
 	return (
 		<BaseIntroBanner
@@ -346,29 +366,14 @@ export const ExistingNoAiThemeBanner = () => {
 			buttonIsLink={ false }
 			bannerButtonOnClick={ () => {
 				trackEvent( 'customize_your_store_intro_customize_click', {
-					theme_type: isBlockTheme ? 'block' : 'classic',
+					theme_type: 'classic',
 				} );
-				if ( isBlockTheme ) {
-					navigateOrParent(
-						window,
-						getNewPath(
-							{ customizing: true },
-							'/customize-store/assembler-hub',
-							{}
-						)
-					);
-				} else {
-					navigateOrParent(
-						window,
-						'customize.php?return=/wp-admin/themes.php'
-					);
-				}
+				navigateOrParent(
+					window,
+					'customize.php?return=/wp-admin/themes.php'
+				);
 			} }
-			bannerButtonText={
-				isBlockTheme
-					? __( 'Go to the Editor', 'woocommerce' )
-					: __( 'Go to the Customizer', 'woocommerce' )
-			}
+			bannerButtonText={ __( 'Go to the Customizer', 'woocommerce' ) }
 			showAIDisclaimer={ false }
 			previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
 		></BaseIntroBanner>

plugins/woocommerce-admin/client/customize-store/intro/tests/intro-banner.test.tsx

@@ -19,6 +19,16 @@ jest.mock( '../../assembler-hub/site-hub', () => ( {
 jest.mock( '~/utils/react-hooks/use-network-status', () => ( {
 	useNetworkStatus: jest.fn(),
 } ) );
+
+jest.mock( '@wordpress/data', () => {
+	const originalModule = jest.requireActual( '@wordpress/data' );
+	return {
+		...originalModule,
+		useSelect: jest.fn( () => ( {
+			is_block_theme: true,
+		} ) ),
+	};
+} );
 describe( 'Intro Banners', () => {
 	it( 'should display NetworkOfflineBanner when network is offline', () => {
 		( useNetworkStatus as jest.Mock ).mockImplementation( () => true );

plugins/woocommerce-admin/client/customize-store/intro/tests/intro-modal.test.tsx

@@ -17,6 +17,16 @@ jest.mock( '../../assembler-hub/site-hub', () => ( {
 jest.mock( '~/utils/react-hooks/use-network-status', () => ( {
 	useNetworkStatus: jest.fn(),
 } ) );
+
+jest.mock( '@wordpress/data', () => {
+	const originalModule = jest.requireActual( '@wordpress/data' );
+	return {
+		...originalModule,
+		useSelect: jest.fn( () => ( {
+			is_block_theme: true,
+		} ) ),
+	};
+} );
 describe( 'Intro Modals', () => {
 	it( 'should display DesignChangeWarningModal when activeThemeHasMods and button is clicked', async () => {
 		const sendEventMock = jest.fn();

plugins/woocommerce/changelog/49804-fix-ensure-classic-theme-enabled-customizer

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS: Ensure that the button in the Intro page redirects to the Customizer when a classic theme is enabled.

plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php

@@ -25,9 +25,10 @@ class CustomizeStore extends Task {
 		// Hook to remove unwanted UI elements when users are viewing with ?cys-hide-admin-bar=true.
 		add_action( 'wp_head', array( $this, 'possibly_remove_unwanted_ui_elements' ) );
 
-		add_action( 'save_post_wp_global_styles', array( $this, 'mark_task_as_complete' ), 10, 3 );
-		add_action( 'save_post_wp_template', array( $this, 'mark_task_as_complete' ), 10, 3 );
-		add_action( 'save_post_wp_template_part', array( $this, 'mark_task_as_complete' ), 10, 3 );
+		add_action( 'save_post_wp_global_styles', array( $this, 'mark_task_as_complete_block_theme' ), 10, 3 );
+		add_action( 'save_post_wp_template', array( $this, 'mark_task_as_complete_block_theme' ), 10, 3 );
+		add_action( 'save_post_wp_template_part', array( $this, 'mark_task_as_complete_block_theme' ), 10, 3 );
+		add_action( 'customize_save_after', array( $this, 'mark_task_as_complete_classic_theme' ) );
 	}
 
 	/**
@@ -39,7 +40,7 @@ class CustomizeStore extends Task {
 	 *
 	 * @return void
 	 */
-	public function mark_task_as_complete( $post_id, $post, $update ) {
+	public function mark_task_as_complete_block_theme( $post_id, $post, $update ) {
 		if ( $post instanceof WP_Post ) {
 			$is_cys_complete = $this->has_custom_global_styles( $post ) || $this->has_custom_template( $post );
 
@@ -49,6 +50,15 @@ class CustomizeStore extends Task {
 		}
 	}
 
+	/**
+	 * Mark the CYS task as complete whenever the user saves the customizer changes.
+	 *
+	 * @return void
+	 */
+	public function mark_task_as_complete_classic_theme() {
+		update_option( 'woocommerce_admin_customize_store_completed', 'yes' );
+	}
+
 	/**
 	 * ID.
 	 *

plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js

@@ -136,6 +136,21 @@ test.describe(
 
 		test( 'clicking on "Go to the Customizer" with a classic theme should go to the customizer', async ( {
 			page,
+		} ) => {
+			await activateTheme( 'twentytwenty' );
+
+			await page.goto( CUSTOMIZE_STORE_URL );
+
+			await page
+				.getByRole( 'button', { name: 'Go to the Customizer' } )
+				.click();
+
+			await page.waitForNavigation();
+			await expect( page.url() ).toContain( 'customize.php' );
+		} );
+
+		test( 'clicking on "Go to the Customizer" with a classic theme should go to the customizer when customize your step is completed', async ( {
+			page,
 			baseURL,
 		} ) => {
 			await activateTheme( 'twentytwenty' );