diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.scss b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.scss
new file mode 100644
index 00000000000..6ec80b9d144
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
index be23fa40a09..23e5a8eb418 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
+++ b/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 (
-
Main Content - Site Preview
+ { isLoading && (
+
+
+
+ ) }
+
);
};
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/styles.scss b/plugins/woocommerce-admin/client/launch-your-store/hub/styles.scss
index bdd1b011594..e23beda3be4 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/styles.scss
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/styles.scss
@@ -1,16 +1,30 @@
-.woocommerce-layout__main .launch-your-store-layout__container {
- display: flex;
- flex-direction: row;
+.woocommerce-launch-your-store {
+ min-width: 600px;
+ overflow: auto;
- .launch-your-store-layout__sidebar {
- width: 380px;
+ .woocommerce-layout__primary {
+ margin: 0;
+ padding: 0;
+ }
- &.is-sidebar-hidden {
- display: none;
+ .woocommerce-layout__main {
+ 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;
- }
}
diff --git a/plugins/woocommerce/changelog/add-lys-hub-site-preview b/plugins/woocommerce/changelog/add-lys-hub-site-preview
new file mode 100644
index 00000000000..cf400dfdd6c
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-lys-hub-site-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add LYS hub site preview
diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/LaunchYourStore.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/LaunchYourStore.php
index 057ecf258d6..daa85fe15d5 100644
--- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/LaunchYourStore.php
+++ b/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;
+ }
}