Add LYS hub site preview (#45976)

* Add lys hub site preview

* Add changelog

* Improve loading UI

* Use REQUEST_URI

* Set min-width to the page

plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.scss

@@ -0,0 +1,29 @@
+.launch-store-site-preview-page__container {
+	height: 100vh;
+	width: 100%;
+	padding: 16px 16px 16px 0;
+	position: relative;
+
+	.launch-store-site__preview-site-iframe {
+		display: block;
+		border: none;
+		width: 100%;
+		height: 100%;
+		border-radius: 20px;
+		box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.04), 0 13px 15px 0 rgba(0, 0, 0, 0.03), 0 6px 10px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.25);
+		overflow-y: auto;
+	}
+
+	.launch-store-site-preview-site__loading-overlay {
+		border-radius: 20px;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 1;
+		background-color: #fff;
+		opacity: 0.9;
+		height: calc(100% - 32px);
+		width: calc(100% - 16px);
+	}
+}

plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx

@@ -2,20 +2,65 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { Spinner } from '@woocommerce/components';
+
 /**
  * Internal dependencies
  */
+import { getAdminSetting } from '~/utils/admin-settings';
 import type { MainContentComponentProps } from '../xstate';
+import './site-preview.scss';
 
 export const SitePreviewPage = ( props: MainContentComponentProps ) => {
+	const siteUrl = getAdminSetting( 'siteUrl' ) + '?site-preview=1';
+	const [ isLoading, setIsLoading ] = useState( true );
+	const iframeRef = useRef< HTMLIFrameElement >( null );
+
+	useEffect( () => {
+		const iframeContentWindow = iframeRef.current?.contentWindow;
+
+		const beforeUnloadHandler = () => {
+			setIsLoading( true );
+		};
+
+		if ( iframeContentWindow ) {
+			iframeContentWindow.addEventListener(
+				'beforeunload',
+				beforeUnloadHandler
+			);
+		}
+		return () => {
+			if ( iframeContentWindow ) {
+				iframeContentWindow.removeEventListener(
+					'beforeunload',
+					beforeUnloadHandler
+				);
+			}
+		};
+		// IsLoading is a dependency because we want to reset it when the iframe reloads.
+	}, [ iframeRef, setIsLoading, isLoading ] );
+
 	return (
 		<div
 			className={ classnames(
 				'launch-store-site-preview-page__container',
+				{ 'is-loading': isLoading },
 				props.className
 			) }
 		>
-			<p>Main Content - Site Preview</p>
+			{ isLoading && (
+				<div className="launch-store-site-preview-site__loading-overlay">
+					<Spinner />
+				</div>
+			) }
+			<iframe
+				ref={ iframeRef }
+				className="launch-store-site__preview-site-iframe"
+				src={ siteUrl }
+				title="Preview"
+				onLoad={ () => setIsLoading( false ) }
+			/>
 		</div>
 	);
 };

plugins/woocommerce-admin/client/launch-your-store/hub/styles.scss

@@ -1,16 +1,30 @@
-.woocommerce-layout__main .launch-your-store-layout__container {
+.woocommerce-launch-your-store {
-	display: flex;
+	min-width: 600px;
-	flex-direction: row;
+	overflow: auto;
 
-	.launch-your-store-layout__sidebar {
+	.woocommerce-layout__primary {
-		width: 380px;
+		margin: 0;
+		padding: 0;
+	}
 
-		&.is-sidebar-hidden {
+	.woocommerce-layout__main {
-			display: none;
+		padding: 0;
+
+		.launch-your-store-layout__container {
+			display: flex;
+			flex-direction: row;
+
+			.launch-your-store-layout__sidebar {
+				width: 380px;
+
+				&.is-sidebar-hidden {
+					display: none;
+				}
+			}
+
+			.launch-your-store-layout__content {
+				flex-grow: 1;
+			}
 		}
 	}
-
-	.launch-your-store-layout__content {
-		flex-grow: 1;
-	}
 }

plugins/woocommerce/changelog/add-lys-hub-site-preview

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add LYS hub site preview

plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/LaunchYourStore.php

@@ -9,6 +9,17 @@ use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
  * Launch Your Store Task
  */
 class LaunchYourStore extends Task {
+	/**
+	 * Constructor
+	 *
+	 * @param TaskList $task_list Parent task list.
+	 */
+	public function __construct( $task_list ) {
+		parent::__construct( $task_list );
+
+		add_action( 'show_admin_bar', array( $this, 'possibly_hide_wp_admin_bar' ) );
+	}
+
 	/**
 	 * ID.
 	 *
@@ -82,4 +93,40 @@ class LaunchYourStore extends Task {
 	public function can_view() {
 		return Features::is_enabled( 'launch-your-store' );
 	}
+
+	/**
+	 * Hide the WP admin bar when the user is previewing the site.
+	 *
+	 * @param bool $show Whether to show the admin bar.
+	 */
+	public function possibly_hide_wp_admin_bar( $show ) {
+		if ( isset( $_GET['site-preview'] ) ) { // @phpcs:ignore
+			return false;
+		}
+
+		global $wp;
+		$http_referer = wp_get_referer() ?? '';
+		$parsed_url   = wp_parse_url( $http_referer, PHP_URL_QUERY );
+		$query_string = is_string( $parsed_url ) ? $parsed_url : '';
+
+		// Check if the user is coming from the site preview link.
+		if ( strpos( $query_string, 'site-preview' ) !== false ) {
+			if ( ! isset( $_SERVER['REQUEST_URI'] ) ) {
+				return $show;
+			}
+
+			// Redirect to the current URL with the site-preview query string.
+			$current_url =
+				add_query_arg(
+					array(
+						'site-preview' => 1,
+					),
+					esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) )
+				);
+			wp_safe_redirect( $current_url );
+			exit;
+		}
+
+		return $show;
+	}
 }