[CYS] Redirect to transitional page to the intro page if the CYS task was not completed (#45933)

* Redirect to intro page when accessing the transitional page if no customized

* Remove only

* Add changefile(s) from automation for the following project(s): woocommerce

* Check if the task is completed

* Add transition screen class

* Remove unused import

---------

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

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -61,6 +61,7 @@
 }
 
 .woocommerce-customize-store__step-assemblerHub,
+.woocommerce-customize-store__step-transitionalScreen,
 .woocommerce-customize-store__step-intro {
 	a {
 		text-decoration: none;

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

@@ -489,8 +489,34 @@ export const customizeStoreStateMachineDefinition = createMachine( {
 			},
 		},
 		transitionalScreen: {
-			initial: 'preTransitional',
+			initial: 'fetchCustomizeStoreCompleted',
 			states: {
+				fetchCustomizeStoreCompleted: {
+					invoke: {
+						src: 'fetchCustomizeStoreCompleted',
+						onDone: {
+							actions: 'assignCustomizeStoreCompleted',
+							target: 'checkCustomizeStoreCompleted',
+						},
+					},
+				},
+				checkCustomizeStoreCompleted: {
+					always: [
+						{
+							// Redirect to the "intro step" if the active theme has no modifications.
+							cond: 'customizeTaskIsNotCompleted',
+							actions: [
+								{ type: 'updateQueryStep', step: 'intro' },
+							],
+							target: '#customizeStore.intro',
+						},
+						{
+							// Otherwise, proceed to the next step.
+							cond: 'customizeTaskIsCompleted',
+							target: 'preTransitional',
+						},
+					],
+				},
 				preTransitional: {
 					meta: {
 						component: CYSSpinner,
@@ -604,6 +630,12 @@ export const CustomizeStoreController = ( {
 				activeThemeHasNoMods: ( _ctx ) => {
 					return ! _ctx.activeThemeHasMods;
 				},
+				customizeTaskIsCompleted: ( _ctx ) => {
+					return _ctx.intro.customizeStoreTaskCompleted;
+				},
+				customizeTaskIsNotCompleted: ( _ctx ) => {
+					return ! _ctx.intro.customizeStoreTaskCompleted;
+				},
 			},
 		} );
 	}, [ actionOverrides, servicesOverrides ] );

plugins/woocommerce-admin/client/customize-store/intro/services.ts

@@ -72,6 +72,16 @@ export const fetchActiveThemeHasMods = async () => {
 	return { activeThemeHasMods };
 };
 
+export const fetchCustomizeStoreCompleted = async () => {
+	const task = await resolveSelect( ONBOARDING_STORE_NAME ).getTask(
+		'customize-store'
+	);
+
+	return {
+		customizeStoreTaskCompleted: task?.isComplete,
+	};
+};
+
 export const fetchIntroData = async () => {
 	const currentTemplatePromise =
 		// @ts-expect-error No types for this exist yet.

plugins/woocommerce/changelog/45933-redirect-to-intro-when-going-to-transitional-but-no-theme-mods

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Redirect to the CYS intro screen when accessing the transitional page without going through the customizing process.

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

@@ -6,6 +6,7 @@ const { AssemblerPage } = require( './assembler/assembler.page' );
 const CUSTOMIZE_STORE_URL =
 	'/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store';
 const TRANSITIONAL_URL = `${ CUSTOMIZE_STORE_URL }%2Ftransitional`;
+const INTRO_URL = `${ CUSTOMIZE_STORE_URL }%2Fintro`;
 
 const test = base.extend( {
 	pageObject: async ( { page }, use ) => {
@@ -56,6 +57,18 @@ test.describe( 'Store owner can view the Transitional page', () => {
 		);
 	} );
 
+	test( 'Accessing the transitional page when the CYS flow is not completed should redirect to the Intro page', async ( {
+		page,
+		baseURL,
+	} ) => {
+		await page.goto( TRANSITIONAL_URL );
+
+		const locator = page.locator( 'h1:visible' );
+		await expect( locator ).not.toHaveText( 'Your store looks great!' );
+
+		await expect( page.url() ).toBe( `${ baseURL }${ INTRO_URL }` );
+	} );
+
 	test( 'Clicking on "Done" in the assembler should go to the transitional page', async ( {
 		pageObject,
 		baseURL,