From 488bb62d82ec64533c45b9d1b5c027c6dfe05724 Mon Sep 17 00:00:00 2001
From: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Date: Fri, 15 Mar 2024 12:27:08 +0100
Subject: [PATCH] [CYS on core] Introduce the Transitional page, i2 (#45546)

* Update the transitional page.

* Update icons

* Remove unnecessary div class

* Update the styles for the transitional page.

* remove the editor param

* conditionally display the survey button

* Additional layout changes

* Streamline the classes for the icons

* Import brush and tag from wordpress/icons

* delete the custom icons from Woo as they already exist on wordpress/icons and can be imported from there.

* Update styles for adding support to mobile view.

* Update the lesson-plan icon.

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

* Update e2e tests to account for the changes made to the transitional page.

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../customize-store/assembler-hub/layout.tsx  |   1 -
 .../assets/icons/lesson-plan.js               |  27 +++
 .../customize-store/transitional/index.tsx    | 183 +++++++++++-------
 .../customize-store/transitional/style.scss   | 152 ++++++---------
 .../transitional/test/index.test.tsx          |  11 +-
 ...546-45539-cys-on-core-transitional-page-i2 |   4 +
 6 files changed, 203 insertions(+), 175 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js
 create mode 100644 plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
index 3a65704b9bb..40ac1580125 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
@@ -128,7 +128,6 @@ export const Layout = () => {
 				>
 					<Transitional
 						sendEvent={ sendEvent }
-						editor={ editor }
 						isWooExpress={ isWooExpress() }
 						isSurveyOpen={ isSurveyOpen }
 						setSurveyOpen={ setSurveyOpen }
diff --git a/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js b/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js
new file mode 100644
index 00000000000..ba138f1bf81
--- /dev/null
+++ b/plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const lessonPLan = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<Path
+			fill="#1E1E1E"
+			d="m8.85 4.821-1.203-.895-2.083 2.802-1.114-.83L3.553 7.1 5.87 8.829l2.98-4.008ZM20 7.75h-8.889v-1.5H20v1.5Zm0 5h-8.889v-1.5H20v1.5Z"
+		/>
+		<Path
+			fill="#1E1E1E"
+			fillRule="evenodd"
+			d="M6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+			clipRule="evenodd"
+		/>
+		<Path fill="#1E1E1E" d="M11.111 17.75H20v-1.5h-8.889v1.5Z" />
+	</SVG>
+);
+export default lessonPLan;
diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx
index aaac895ee84..bcdb78aa040 100644
--- a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx
@@ -4,7 +4,6 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { getSetting } from '@woocommerce/settings';
 import { recordEvent } from '@woocommerce/tracks';
@@ -15,8 +14,7 @@ import {
 	// @ts-ignore No types for this exist yet.
 	__unstableMotion as motion,
 } from '@wordpress/components';
-// @ts-ignore No types for this exist yet.
-import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
+
 /**
  * Internal dependencies
  */
@@ -27,6 +25,8 @@ import './style.scss';
 import { navigateOrParent } from '../utils';
 import { WooCYSSecondaryButtonSlot } from './secondary-button-slot';
 import { SurveyForm } from './survey-form';
+import lessonPlan from '../assets/icons/lesson-plan.js';
+import { Icon, brush, tag } from '@wordpress/icons';
 
 export * as actions from './actions';
 export * as services from './services';
@@ -34,7 +34,6 @@ export * as services from './services';
 export type events = { type: 'GO_BACK_TO_HOME' } | { type: 'COMPLETE_SURVEY' };
 
 export const Transitional = ( {
-	editor,
 	sendEvent,
 	hasCompleteSurvey,
 	isWooExpress,
@@ -42,7 +41,6 @@ export const Transitional = ( {
 	setSurveyOpen,
 	aiOnline,
 }: {
-	editor: React.ReactNode;
 	sendEvent: ( event: events ) => void;
 	hasCompleteSurvey: boolean;
 	isWooExpress: boolean;
@@ -51,7 +49,6 @@ export const Transitional = ( {
 	aiOnline: boolean;
 } ) => {
 	const homeUrl: string = getSetting( 'homeUrl', '' );
-	const isEditorLoading = useIsSiteEditorLoading();
 	const closeSurvey = () => {
 		setSurveyOpen( false );
 	};
@@ -88,24 +85,22 @@ export const Transitional = ( {
 				isTransparent={ false }
 				className="edit-site-layout__hub"
 			/>
-
 			<div className="woocommerce-customize-store__transitional-content">
 				<h1 className="woocommerce-customize-store__transitional-heading">
 					{ __( 'Your store looks great!', 'woocommerce' ) }
 				</h1>
 				<h2 className="woocommerce-customize-store__transitional-subheading">
 					{ __(
-						"You're one step closer to launching your online business — we can't wait to see it come to life.",
+						"Congratulations! You've successfully designed your store. Take a look at your hard work before continuing to set up your store.",
 						'woocommerce'
 					) }
 				</h2>
 
-				<div className="woocommerce-customize-store__transitional-main-actions">
-					<WooCYSSecondaryButtonSlot />
-
+				<WooCYSSecondaryButtonSlot />
+				<div className="woocommerce-customize-store__transitional-buttons">
 					{ showSurveyButton && (
 						<Button
-							className="woocommerce-customize-store__transitional-preview-button"
+							className="woocommerce-customize-store__transitional-preview-buttonwoocommerce-customize-store__transitional-preview-button"
 							variant="secondary"
 							onClick={ () => {
 								recordEvent(
@@ -130,73 +125,115 @@ export const Transitional = ( {
 							window.open( homeUrl, '_blank' );
 						} }
 					>
-						{ __( 'Preview store', 'woocommerce' ) }
+						{ __( 'View store', 'woocommerce' ) }
 					</Button>
 				</div>
-
-				<div
-					className={ classNames(
-						'woocommerce-customize-store__transitional-site-preview-container',
-						{
-							'is-loading': isEditorLoading,
-						}
-					) }
-				>
-					{ editor }
-				</div>
-				<div className="woocommerce-customize-store__transitional-actions">
+				<h2 className="woocommerce-customize-store__transitional-main-actions-title">
+					{ __( "What's next?", 'woocommerce' ) }
+				</h2>
+				<div className="woocommerce-customize-store__transitional-main-actions">
 					<div className="woocommerce-customize-store__transitional-action">
-						<h3>
-							{ __( 'Fine-tune your design', 'woocommerce' ) }
-						</h3>
-						<p>
-							{ __(
-								'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
-								'woocommerce'
-							) }
-						</p>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								recordEvent(
-									'customize_your_store_transitional_editor_click'
-								);
-								navigateOrParent(
-									window,
-									`${ ADMIN_URL }site-editor.php`
-								);
-							} }
-						>
-							{ __( 'Go to the Editor', 'woocommerce' ) }
-						</Button>
+						<Icon
+							className={
+								'woocommerce-customize-store__transitional-action__icon'
+							}
+							icon={ tag }
+						/>
+						<div className="woocommerce-customize-store__transitional-action__content">
+							<h3>
+								{ __( 'Add your products', 'woocommerce' ) }
+							</h3>
+							<p>
+								{ __(
+									'Start stocking your virtual shelves by adding or importing your products, or edit the sample products.',
+									'woocommerce'
+								) }
+							</p>
+							<Button
+								variant="link"
+								onClick={ () => {
+									recordEvent(
+										'customize_your_store_transitional_editor_click'
+									);
+									navigateOrParent(
+										window,
+										`${ ADMIN_URL }edit.php?post_type=product`
+									);
+								} }
+							>
+								{ __( 'Go to Products', 'woocommerce' ) }
+							</Button>
+						</div>
 					</div>
 
 					<div className="woocommerce-customize-store__transitional-action">
-						<h3>
-							{ __(
-								'Continue setting up your store',
-								'woocommerce'
-							) }
-						</h3>
-						<p>
-							{ __(
-								'Go back to the Home screen to complete your store setup and start selling',
-								'woocommerce'
-							) }
-						</p>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								recordEvent(
-									'customize_your_store_transitional_home_click'
-								);
-								sendEvent( {
-									type: 'GO_BACK_TO_HOME',
-								} );
-							} }
-						>
-							{ __( 'Back to Home', 'woocommerce' ) }
-						</Button>
+						<Icon
+							className={
+								'woocommerce-customize-store__transitional-action__icon'
+							}
+							icon={ brush }
+						/>
+						<div className="woocommerce-customize-store__transitional-action__content">
+							<h3>
+								{ __( 'Fine-tune your design', 'woocommerce' ) }
+							</h3>
+							<p>
+								{ __(
+									'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
+									'woocommerce'
+								) }
+							</p>
+							<Button
+								variant="link"
+								onClick={ () => {
+									recordEvent(
+										'customize_your_store_transitional_editor_click'
+									);
+									navigateOrParent(
+										window,
+										`${ ADMIN_URL }site-editor.php`
+									);
+								} }
+							>
+								{ __( 'Go to the Editor', 'woocommerce' ) }
+							</Button>
+						</div>
+					</div>
+
+					<div className="woocommerce-customize-store__transitional-action">
+						<Icon
+							className={
+								'woocommerce-customize-store__transitional-action__icon'
+							}
+							icon={ lessonPlan }
+						/>
+						<div className="woocommerce-customize-store__transitional-action__content">
+							<h3>
+								{ __(
+									'Continue setting up your store',
+									'woocommerce'
+								) }
+							</h3>
+							<p>
+								{ __(
+									'Go back to the Home screen to complete your store setup and start selling',
+									'woocommerce'
+								) }
+							</p>
+							<Button
+								variant="link"
+								onClick={ () => {
+									recordEvent(
+										'customize_your_store_transitional_home_click'
+									);
+									sendEvent( {
+										type: 'GO_BACK_TO_HOME',
+									} );
+								} }
+							>
+								{ __( 'Back to Home', 'woocommerce' ) }
+							</Button>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
index a295fb3ff7e..a6ed6213129 100644
--- a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
+++ b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
@@ -30,11 +30,22 @@
 	}
 
 	.woocommerce-customize-store__transitional-content {
-		flex: 1;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding-top: 40px;
+		justify-content: center;
+		padding: 40px;
+
+		.woocommerce-customize-store__transitional-buttons {
+			display: flex;
+			align-items: center;
+			margin-top: 20px;
+			gap: 20px;
+
+			.woocommerce-customize-store__transitional-preview-button {
+				flex: 1;
+			}
+		}
 	}
 
 	.woocommerce-customize-store__transitional-heading {
@@ -58,7 +69,16 @@
 		line-height: 24px; /* 150% */
 		letter-spacing: -0.1px;
 		margin: 4px 0 0;
-		width: 560px;
+		max-width: 560px;
+	}
+
+	.woocommerce-customize-store__transitional-main-actions-title {
+		font-size: 20px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 24px; /* 120% */
+		margin-top: 100px;
+		margin-bottom: 40px;
 	}
 
 	.woocommerce-customize-store__transitional-main-actions {
@@ -67,109 +87,45 @@
 		gap: 20px;
 		flex-direction: row;
 
+		@media only screen and (max-width: 600px) {
+			flex-direction: column;
+		}
+
+		h3 {
+			margin: 0;
+			font-size: 16px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 24px; /* 150% */
+			letter-spacing: -0.32px;
+		}
+
 		.components-button {
-			padding: 8px 16px;
-			height: 40px;
+			text-decoration: none;
 		}
-	}
-
-	.woocommerce-customize-store__transitional-site-preview-container {
-		border-radius: 16px;
-		margin-top: 50px;
-		background: #f6f7f7;
-		box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.02), 0 13px 10px 0 rgba(0, 0, 0, 0.03), 0 15px 20px 0 rgba(0, 0, 0, 0.04);
-		width: 600px;
-		height: 371px;
-
-		div {
-			position: relative;
-			border-radius: 24px;
-		}
-
-		.woocommerce-customize-store__edit-site-editor {
-			height: 100%;
-		}
-
-		.woocommerce-customize-store__block-editor {
-			position: relative;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: 100%;
-		}
-
-		.interface-navigable-region {
-			overflow: hidden;
-		}
-
-		.auto-block-preview__container,
-		.block-editor-block-preview__content {
-			width: 588px;
-			height: 363px;
-			position: relative;
-		}
-
-		iframe {
-			border-radius: 24px;
-			width: 1176px;
-			height: 726px;
-			transform: scale(0.5);
-			left: -50%;
-			position: relative;
-			top: -50%;
-		}
-
-		&.is-loading {
-			@include placeholder();
-
-			iframe {
-				visibility: hidden;
-				opacity: 0.5;
-			}
-		}
-	}
-
-	.woocommerce-customize-store__transitional-actions {
-		display: flex;
-		flex-direction: row;
-		margin-top: 50px;
-		gap: 40px;
 
 		.woocommerce-customize-store__transitional-action {
 			display: flex;
-			flex-direction: column;
-			width: 280px;
+		}
 
-			h3 {
-				color: $gray-900;
-				font-size: 16px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px; /* 150% */
-				margin: 0;
-			}
+		.woocommerce-customize-store__transitional-action__icon,
+		.woocommerce-customize-store__transitional-action__content {
+			flex: 1;
+		}
+
+		.woocommerce-customize-store__transitional-action__icon {
+			text-align: right;
+			max-width: 40px;
+			padding-right: 16px;
+		}
+
+		.woocommerce-customize-store__transitional-action__content {
+			max-width: 250px;
+			padding-right: 2px;
 
 			p {
-				margin: 5px 0 0;
-				color: $gray-700;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 16px; /* 123.077% */
-				height: 48px;
-			}
-
-			.components-button {
-				margin-top: 16px;
-				padding: 0;
-				margin-left: 0;
-				height: 20px;
-				width: fit-content;
-
-				&:hover {
-					background: transparent;
-				}
+				margin-top: 5px;
+				margin-bottom: 16px;
 			}
 		}
 	}
diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx
index 8c8859c1f44..6d82ba2edf5 100644
--- a/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx
@@ -48,10 +48,15 @@ describe( 'Transitional', () => {
 
 		expect(
 			screen.getByRole( 'button', {
-				name: /Preview store/i,
+				name: /View store/i,
 			} )
 		).toBeInTheDocument();
 
+		expect(
+			screen.getByRole( 'button', {
+				name: /Go to Products/i,
+			} )
+		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {
 				name: /Go to the Editor/i,
@@ -65,14 +70,14 @@ describe( 'Transitional', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should record an event when clicking on "Preview store" button', () => {
+	it( 'should record an event when clicking on "View store" button', () => {
 		window.open = jest.fn();
 		// @ts-ignore
 		render( <Transitional { ...props } /> );
 
 		screen
 			.getByRole( 'button', {
-				name: /Preview store/i,
+				name: /View store/i,
 			} )
 			.click();
 
diff --git a/plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2 b/plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2
new file mode 100644
index 00000000000..852b04f8913
--- /dev/null
+++ b/plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2
@@ -0,0 +1,4 @@
+Significance: major
+Type: update
+
+Introduce the new Transitional page to the customize your store.
\ No newline at end of file