[CYS on Core] Intro screen - Update the copy depending on whether the user already started to customize their store (#43690)

* Add new banner for no-Ai existing theme

- Add new banner
- Update copy
- Refactor the theme preview structure

* Make preview optional

* Remove log

* Remove unused param

* Fix linting error

* 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/intro/index.tsx

@@ -31,6 +31,7 @@ import {
 	ExistingAiThemeBanner,
 	ExistingThemeBanner,
 	NoAIBanner,
+	ExistingNoAiThemeBanner,
 } from './intro-banners';
 
 export type events =
@@ -54,6 +55,7 @@ const BANNER_COMPONENTS = {
 	'existing-ai-theme': ExistingAiThemeBanner,
 	'existing-theme': ExistingThemeBanner,
 	[ FlowType.noAI ]: NoAIBanner,
+	'existing-no-ai-theme': ExistingNoAiThemeBanner,
 	default: DefaultBanner,
 };
 
@@ -85,16 +87,21 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 
 	let modalStatus: ModalStatus = 'no-modal';
 	let bannerStatus: BannerStatus = 'default';
+
 	switch ( true ) {
-		case context.flowType === FlowType.noAI:
-			bannerStatus = FlowType.noAI;
-			break;
 		case isNetworkOffline:
 			bannerStatus = 'network-offline';
 			break;
 		case isJetpackOffline as boolean:
 			bannerStatus = 'jetpack-offline';
 			break;
+		case context.flowType === FlowType.noAI &&
+			! customizeStoreTaskCompleted:
+			bannerStatus = FlowType.noAI;
+			break;
+		case context.flowType === FlowType.noAI && customizeStoreTaskCompleted:
+			bannerStatus = 'existing-no-ai-theme';
+			break;
 		case ! customizeStoreTaskCompleted && activeThemeHasMods:
 			bannerStatus = 'task-incomplete-active-theme-has-mods';
 			break;

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

@@ -26,6 +26,7 @@ export const BaseIntroBanner = ( {
 	bannerButtonOnClick,
 	bannerButtonText,
 	secondaryButton,
+	previewBanner,
 	children,
 }: {
 	bannerTitle: string;
@@ -36,6 +37,7 @@ export const BaseIntroBanner = ( {
 	bannerButtonOnClick?: () => void;
 	bannerButtonText?: string;
 	secondaryButton?: React.ReactNode;
+	previewBanner?: React.ReactNode;
 	children?: React.ReactNode;
 } ) => {
 	return (
@@ -82,6 +84,7 @@ export const BaseIntroBanner = ( {
 				</div>
 				{ children }
 			</div>
+			{ previewBanner }
 		</div>
 	);
 };
@@ -289,3 +292,33 @@ export const ExistingAiThemeBanner = ( {
 		</BaseIntroBanner>
 	);
 };
+
+export const ExistingNoAiThemeBanner = () => {
+	const siteUrl = getAdminSetting( 'siteUrl' ) + '?cys-hide-admin-bar=1';
+
+	return (
+		<BaseIntroBanner
+			bannerTitle={ __( 'Edit your custom theme', 'woocommerce' ) }
+			bannerText={ __(
+				'Continue to customize your store using the store designer. Change your color palette, fonts, page layouts, and more.',
+				'woocommerce'
+			) }
+			bannerClass="existing-no-ai-theme-banner"
+			buttonIsLink={ false }
+			bannerButtonOnClick={ () => {
+				recordEvent( 'customize_your_store_intro_customize_click' );
+				navigateOrParent(
+					window,
+					getNewPath(
+						{ customizing: true },
+						'/customize-store/assembler-hub',
+						{}
+					)
+				);
+			} }
+			bannerButtonText={ __( 'Customize your theme', 'woocommerce' ) }
+			showAIDisclaimer={ false }
+			previewBanner={ <IntroSiteIframe siteUrl={ siteUrl } /> }
+		></BaseIntroBanner>
+	);
+};

plugins/woocommerce-admin/client/customize-store/intro/intro.scss

@@ -108,6 +108,9 @@
 	min-height: 248px;
 	width: 100%;
 	align-items: center;
+	padding-left: 50px;
+	padding-right: 40px;
+	position: relative;
 
 	&.offline-banner {
 		background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-offline.svg) no-repeat center right;
@@ -119,45 +122,40 @@
 		background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-no-ai.svg) no-repeat center right;
 	}
 
-	&.existing-ai-theme-banner {
+	&.existing-ai-theme-banner,
+	&.existing-no-ai-theme-banner {
 		background: rgba(246, 247, 247, 1);
 
 		.woocommerce-customize-store-banner-content {
 			width: 100%;
 			display: flex;
-		}
+			justify-content: space-between;
 
-		.woocommerce-block-preview-container {
-			flex: 1;
-			position: relative;
-		}
-
-		.iframe-container {
-			pointer-events: none;
-			overflow: hidden;
-			position: absolute;
-			top: -24px;
-			right: 15%;
+			.banner-actions {
+				width: 50%;
+			}
 		}
 
 		.preview-iframe {
-			width: 480px;
-			height: 301px;
-			zoom: 2.5;
+			pointer-events: none;
+			position: absolute;
+			bottom: -497px;
+			right: 50px;
+			width: 1100px;
+			height: 710px;
 			-moz-transform: scale(0.3);
 			-moz-transform-origin: top right;
 			-o-transform: scale(0.3);
 			-o-transform-origin: top right;
 			-webkit-transform: scale(0.3);
 			-webkit-transform-origin: top right;
-			border-top-left-radius: 8px;
-			border-top-right-radius: 8px;
+			border-top-left-radius: 28px;
+			border-top-right-radius: 28px;
 		}
 	}
 
 	.woocommerce-customize-store-banner-content {
 		width: 450px;
-		margin-left: 50px;
 
 		@media only screen and (min-width: 1400px) {
 			width: 700px;

plugins/woocommerce/changelog/43690-43492-update-copy-when-customizing

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+CYS intro screen: update the copy depending on whether the user already started to customize their store.