Show the "Design your own" banner when editing a theme which is not TT4 (#45481)

* Show the "Design your own" banner when editing a theme which is not TT4

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

* Fix lint errors

* Pass the active theme to the context

* Fix lint errors

---------

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

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

@@ -306,6 +306,7 @@ export const customizeStoreStateMachineDefinition = createMachine( {
 									target: 'success',
 									actions: [
 										'assignThemeData',
+										'assignActiveTheme',
 										'assignCustomizeStoreCompleted',
 										'assignCurrentThemeIsAiGenerated',
 									],

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

@@ -36,6 +36,20 @@ export const assignThemeData = assign<
 	},
 } );
 
+export const assignActiveTheme = assign<
+	customizeStoreStateMachineContext,
+	customizeStoreStateMachineEvents
+>( {
+	intro: ( context, event ) => {
+		const activeTheme = (
+			event as DoneInvokeEvent< {
+				activeTheme: string;
+			} >
+		 ).data.activeTheme;
+		return { ...context.intro, activeTheme };
+	},
+} );
+
 export const recordTracksDesignWithAIClicked = () => {
 	recordEvent( 'customize_your_store_intro_design_with_ai_click' );
 };

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

@@ -74,6 +74,7 @@ type ModalStatus = keyof typeof MODAL_COMPONENTS;
 export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 	const {
 		intro: {
+			activeTheme,
 			themeData,
 			customizeStoreTaskCompleted,
 			currentThemeIsAiGenerated,
@@ -95,6 +96,8 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 	let modalStatus: ModalStatus = 'no-modal';
 	let bannerStatus: BannerStatus = 'default';
 
+	const isDefaultTheme = activeTheme === 'twentytwentyfour';
+
 	switch ( true ) {
 		case isNetworkOffline:
 			bannerStatus = 'network-offline';
@@ -106,6 +109,11 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 			! customizeStoreTaskCompleted:
 			bannerStatus = FlowType.noAI;
 			break;
+		case context.flowType === FlowType.noAI &&
+			customizeStoreTaskCompleted &&
+			! isDefaultTheme:
+			bannerStatus = FlowType.noAI;
+			break;
 		case context.flowType === FlowType.noAI && customizeStoreTaskCompleted:
 			bannerStatus = 'existing-no-ai-theme';
 			break;

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

@@ -105,9 +105,16 @@ export const fetchIntroData = async () => {
 
 	const customizeStoreTaskCompleted = task?.isComplete;
 
+	interface Theme {
+		stylesheet?: string;
+	}
+
+	const theme = ( await resolveSelect( 'core' ).getCurrentTheme() ) as Theme;
+
 	return {
 		customizeStoreTaskCompleted,
 		themeData,
+		activeTheme: theme.stylesheet || '',
 		currentThemeIsAiGenerated,
 	};
 };

plugins/woocommerce/changelog/45481-44725-add-customize-button-modal-2

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+CYS - Show the "Design your own" banner when editing a different theme than TT4 in the CYS flow.