[CYS - Core] Switch to TT4 when the flow starts (#43740)

* CYS - Core: add unit test

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

* fix description

* Enable TT4 when the customize your store process starts

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

---------

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

plugins/woocommerce-admin/client/customize-store/data/constants.ts

@@ -0,0 +1 @@
+export const THEME_SLUG = 'twentytwentyfour';

plugins/woocommerce-admin/client/customize-store/data/service.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+export const installAndActivateTheme = async ( themeSlug: string ) => {
+	await apiFetch( {
+		path: `/wc-admin/onboarding/themes/install?theme=${ themeSlug }`,
+		method: 'POST',
+	} );
+
+	await apiFetch( {
+		path: `/wc-admin/onboarding/themes/activate?theme=${ themeSlug }&theme_switch_via_cys_ai_loader=1`,
+		method: 'POST',
+	} );
+};

plugins/woocommerce-admin/client/customize-store/design-with-ai/services.ts

@@ -21,6 +21,8 @@ import { FONT_PAIRINGS } from '../assembler-hub/sidebar/global-styles/font-pairi
 import { COLOR_PALETTES } from '../assembler-hub/sidebar/global-styles/color-palette-variations/constants';
 import { HOMEPAGE_TEMPLATES } from '../data/homepageTemplates';
 import { updateTemplate } from '../data/actions';
+import { installAndActivateTheme as setTheme } from '../data/service';
+import { THEME_SLUG } from '../data/constants';
 
 const { escalate } = actions;
 
@@ -431,23 +433,13 @@ export const assembleSite = async (
 };
 
 const installAndActivateTheme = async () => {
-	const themeSlug = 'twentytwentyfour';
-
 	try {
-		await apiFetch( {
-			path: `/wc-admin/onboarding/themes/install?theme=${ themeSlug }`,
-			method: 'POST',
-		} );
-
-		await apiFetch( {
-			path: `/wc-admin/onboarding/themes/activate?theme=${ themeSlug }&theme_switch_via_cys_ai_loader=1`,
-			method: 'POST',
-		} );
+		await setTheme( THEME_SLUG );
 	} catch ( error ) {
 		recordEvent(
 			'customize_your_store_ai_install_and_activate_theme_error',
 			{
-				theme: themeSlug,
+				theme: THEME_SLUG,
 				error: error instanceof Error ? error.message : 'unknown',
 			}
 		);

plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts

@@ -2,11 +2,15 @@
  * External dependencies
  */
 import { Sender } from 'xstate';
+import { recordEvent } from '@woocommerce/tracks';
+
 /**
  * Internal dependencies
  */
 import { updateTemplate } from '../data/actions';
 import { HOMEPAGE_TEMPLATES } from '../data/homepageTemplates';
+import { installAndActivateTheme as setTheme } from '../data/service';
+import { THEME_SLUG } from '../data/constants';
 
 const assembleSite = async () => {
 	await updateTemplate( {
@@ -25,7 +29,23 @@ const browserPopstateHandler =
 		};
 	};
 
+const installAndActivateTheme = async () => {
+	try {
+		await setTheme( THEME_SLUG );
+	} catch ( error ) {
+		recordEvent(
+			'customize_your_store__no_ai_install_and_activate_theme_error',
+			{
+				theme: THEME_SLUG,
+				error: error instanceof Error ? error.message : 'unknown',
+			}
+		);
+		throw error;
+	}
+};
+
 export const services = {
 	assembleSite,
 	browserPopstateHandler,
+	installAndActivateTheme,
 };

plugins/woocommerce-admin/client/customize-store/design-without-ai/state-machine.tsx

@@ -61,10 +61,27 @@ export const designWithNoAiStateMachineDefinition = createMachine(
 							type: 'hasStepInUrl',
 							step: 'design',
 						},
-						target: 'preAssembleSite',
+						target: 'installAndActivateTheme',
 					},
 				],
 			},
+			installAndActivateTheme: {
+				initial: 'pending',
+				states: {
+					pending: {
+						invoke: {
+							src: 'installAndActivateTheme',
+							onDone: {
+								target: 'success',
+							},
+						},
+					},
+					success: { type: 'final' },
+				},
+				onDone: {
+					target: 'preAssembleSite',
+				},
+			},
 			preAssembleSite: {
 				id: 'preAssembleSite',
 				initial: 'assembleSite',

plugins/woocommerce-admin/client/customize-store/design-without-ai/tests/state-machine.test.ts

@@ -25,6 +25,8 @@ const createMockMachine = ( {
 	return machineWithConfig;
 };
 
+jest.mock( '@wordpress/api-fetch', () => jest.fn() );
+
 describe( 'Design Without AI state machine', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -53,7 +55,7 @@ describe( 'Design Without AI state machine', () => {
 			expect( hasStepInUrl ).toBeCalled();
 		} );
 
-		it( 'should transit to preAssembleSite state when the url is /design', () => {
+		it( 'should transit to installAndActivateTheme state when the url is /design', () => {
 			const hasStepInUrl = jest.fn( () => true );
 			const machine = designWithNoAiStateMachineDefinition.withConfig( {
 				guards: {
@@ -64,11 +66,13 @@ describe( 'Design Without AI state machine', () => {
 			const machineInterpret = interpret( machine ).start();
 
 			expect(
-				machineInterpret.getSnapshot().matches( 'preAssembleSite' )
+				machineInterpret
+					.getSnapshot()
+					.matches( 'installAndActivateTheme' )
 			).toBeTruthy();
 		} );
 
-		it( "should not transit to preAssembleSite state when the url isn't /design", () => {
+		it( "should not transit to installAndActivateTheme state when the url isn't /design", () => {
 			const hasStepInUrl = jest.fn( () => false );
 			const machine = designWithNoAiStateMachineDefinition.withConfig( {
 				guards: {
@@ -79,11 +83,40 @@ describe( 'Design Without AI state machine', () => {
 			const machineInterpret = interpret( machine ).start();
 
 			expect(
-				machineInterpret.getSnapshot().matches( 'preAssembleSite' )
+				machineInterpret
+					.getSnapshot()
+					.matches( 'installAndActivateTheme' )
 			).toBeFalsy();
 		} );
 	} );
 
+	describe( 'installAndActivateTheme state', () => {
+		it( 'should invoke `installAndActivateTheme` service', async () => {
+			const installAndActivateThemeMock = jest.fn( () =>
+				Promise.resolve()
+			);
+
+			const machine = createMockMachine( {
+				services: {
+					installAndActivateTheme: installAndActivateThemeMock,
+				},
+			} );
+
+			const state = machine.getInitialState( 'installAndActivateTheme' );
+
+			const actor = interpret( machine ).start( state );
+
+			await waitFor( actor, ( currentState ) =>
+				currentState.matches( 'installAndActivateTheme.pending' )
+			);
+
+			expect( installAndActivateThemeMock ).toHaveBeenCalled();
+			expect(
+				actor.getSnapshot().matches( 'preAssembleSite' )
+			).toBeTruthy();
+		} );
+	} );
+
 	describe( 'the preAssembleSite state', () => {
 		const initialState = 'preAssembleSite';
 		it( 'should start with the pending state', async () => {

plugins/woocommerce/changelog/43740-43459-cys-on-core-switch-to-tt4-when-the-noai-flow-starts

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+[CYS - Core] Switch to TT4 when the flow starts