Launch Your Store: Add useLaunchYourStore helper method (#45404)

plugins/woocommerce-admin/client/header/index.js

@@ -21,6 +21,10 @@ import { Text, useSlot } from '@woocommerce/experimental';
 import './style.scss';
 import useIsScrolled from '../hooks/useIsScrolled';
 import { TasksReminderBar, useActiveSetupTasklist } from '../task-lists';
+import {
+	LaunchYourStoreStatus,
+	useLaunchYourStore,
+} from '../launch-your-store';
 
 export const PAGE_TITLE_FILTER = 'woocommerce_admin_header_page_title';
 
@@ -96,6 +100,10 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 		}
 	}, [ isEmbedded, sections, siteTitle ] );
 
+	const { isLoading, launchStatus, launchYourStoreEnabled } =
+		useLaunchYourStore();
+	const showLaunchYourStoreStatus = launchYourStoreEnabled && ! isLoading;
+
 	return (
 		<div className={ className } ref={ headerElement }>
 			{ activeSetupList && (
@@ -110,7 +118,11 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 				/>
 
 				<Text
-					className={ `woocommerce-layout__header-heading` }
+					className={ `woocommerce-layout__header-heading ${
+						showLaunchYourStoreStatus
+							? ''
+							: 'woocommerce-layout__header-left-align'
+					}` }
 					as="h1"
 				>
 					{ decodeEntities(
@@ -124,6 +136,10 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 					) }
 				</Text>
 
+				{ showLaunchYourStoreStatus && (
+					<LaunchYourStoreStatus status={ launchStatus } />
+				) }
+
 				<WooHeaderItem.Slot fillProps={ { isEmbedded, query } } />
 			</div>
 		</div>

plugins/woocommerce-admin/client/header/style.scss

@@ -17,13 +17,13 @@
 		min-height: $header-height;
 	}
 
-	@include breakpoint( '<782px' ) {
+	@include breakpoint('<782px') {
 		flex-flow: row wrap;
 		top: $adminbar-height-mobile;
 		width: 100%;
 	}
 
-	@include breakpoint( '782px-960px' ) {
+	@include breakpoint('782px-960px') {
 		width: calc(100% - 36px);
 	}
 
@@ -38,18 +38,21 @@
 		align-items: center;
 		padding: 0 0 0 $fallback-gutter-large;
 		padding: 0 0 0 $gutter-large;
-		flex: 1 auto;
 		height: $header-height;
 		background: $studio-white;
 		font-weight: 600;
 		font-size: 14px;
+
+		&.woocommerce-layout__header-left-align {
+			flex: 1 auto;
+		}
 	}
 }
 
 .folded .woocommerce-layout__header {
 	width: calc(100% - 36px);
 
-	@include breakpoint( '<782px' ) {
+	@include breakpoint('<782px') {
 		width: 100%;
 	}
 }

plugins/woocommerce-admin/client/index.js

@@ -21,7 +21,7 @@ import { deriveWpAdminBackgroundColours } from './utils/derive-wp-admin-backgrou
 import { possiblyRenderSettingsSlots } from './settings/settings-slots';
 import { registerTaxSettingsConflictErrorFill } from './settings/conflict-error-slotfill';
 import { registerPaymentsSettingsBannerFill } from './payments/payments-settings-banner-slotfill';
-import { registerSiteVisibilitySlotFill } from './launch-your-store/settings-slotfill';
+import { registerSiteVisibilitySlotFill } from './launch-your-store';
 
 const appRoot = document.getElementById( 'root' );
 const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );

plugins/woocommerce-admin/client/launch-your-store/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export { LaunchYourStoreStatus } from './status';
+export { useLaunchYourStore } from './use-launch-your-store';
+export { registerSiteVisibilitySlotFill } from './settings/slotfill';

plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js

@@ -9,58 +9,42 @@ import {
 import { useState, useEffect } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import { __ } from '@wordpress/i18n';
-import { OPTIONS_STORE_NAME } from '@woocommerce/data';
-import { withSelect } from '@wordpress/data';
 import classNames from 'classnames';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { SETTINGS_SLOT_FILL_CONSTANT } from '../settings/settings-slots';
+import { SETTINGS_SLOT_FILL_CONSTANT } from '../../settings/settings-slots';
+import { useLaunchYourStore } from '../use-launch-your-store';
 import './style.scss';
 
 const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
 
-const SiteVisibility = ( {
-	woocommerce_coming_soon,
-	woocommerce_store_pages_only,
-	woocommerce_private_link,
-	isLoading,
-	placeholder = false,
-} ) => {
-	const [ comingSoon, setComingSoon ] = useState( woocommerce_coming_soon );
+const SiteVisibility = () => {
+	const {
+		isLoading,
+		comingSoon: initialComingSoon = false,
+		storePagesOnly: initialStorePagesOnly = false,
+		privateLink: initialPrivateLink = false,
+	} = useLaunchYourStore();
+	const [ comingSoon, setComingSoon ] = useState( initialComingSoon );
 	const [ storePagesOnly, setStorePagesOnly ] = useState(
-		woocommerce_store_pages_only
-	);
-	const [ privateLink, setPrivateLink ] = useState(
-		woocommerce_private_link
+		initialStorePagesOnly
 	);
+	const [ privateLink, setPrivateLink ] = useState( initialPrivateLink );
 
 	useEffect( () => {
-		setComingSoon( woocommerce_coming_soon );
-		setStorePagesOnly( woocommerce_store_pages_only );
-		setPrivateLink( woocommerce_private_link );
-	}, [
-		woocommerce_coming_soon,
-		woocommerce_store_pages_only,
-		woocommerce_private_link,
-	] );
-
-	if ( isLoading ) {
-		return (
-			<SiteVisibility
-				woocommerce_lys_setting_coming_soon={ 'yes' }
-				isLoading={ false }
-				placeholder={ true }
-			/>
-		);
-	}
+		if ( ! isLoading ) {
+			setComingSoon( initialComingSoon );
+			setStorePagesOnly( initialStorePagesOnly );
+			setPrivateLink( initialPrivateLink );
+		}
+	}, [ isLoading ] );
 
 	return (
 		<div
 			className={ classNames( 'site-visibility-settings-slotfill', {
-				placeholder,
+				placeholder: isLoading,
 			} ) }
 		>
 			<input
@@ -179,35 +163,10 @@ const SiteVisibility = ( {
 	);
 };
 
-const SiteVisibilityComponent = compose(
-	withSelect( ( select ) => {
-		const { getOption, hasFinishedResolution } =
-			select( OPTIONS_STORE_NAME );
-
-		return {
-			woocommerce_coming_soon: getOption( 'woocommerce_coming_soon' ),
-			woocommerce_store_pages_only: getOption(
-				'woocommerce_store_pages_only'
-			),
-			woocommerce_private_link: getOption( 'woocommerce_private_link' ),
-			isLoading:
-				! hasFinishedResolution( 'getOption', [
-					'woocommerce_coming_soon',
-				] ) ||
-				! hasFinishedResolution( 'getOption', [
-					'woocommerce_store_pages_only',
-				] ) ||
-				! hasFinishedResolution( 'getOption', [
-					'woocommerce_private_link',
-				] ),
-		};
-	} )
-)( SiteVisibility );
-
 const SiteVisibilitySlotFill = () => {
 	return (
 		<Fill>
-			<SiteVisibilityComponent />
+			<SiteVisibility />
 		</Fill>
 	);
 };

plugins/woocommerce-admin/client/launch-your-store/status/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Icon, moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export const LaunchYourStoreStatus = () => {
+	return (
+		<div className="woocommerce-lys-status">
+			<div className="woocommerce-lys-status-pill-wrapper">
+				<div className="woocommerce-lys-status-pill">
+					<span>Coming soon</span>
+					<Icon icon={ moreVertical } size={ 18 } />
+				</div>
+			</div>
+		</div>
+	);
+};

plugins/woocommerce-admin/client/launch-your-store/status/style.scss

@@ -0,0 +1,21 @@
+.woocommerce-lys-status {
+	flex: 1 auto;
+	padding-left: 12px;
+}
+
+.woocommerce-lys-status-pill-wrapper {
+	display: inline-block;
+}
+
+.woocommerce-lys-status-pill {
+	display: flex;
+	align-items: center;
+	background-color: var(--gray-gray-5, #dcdcde);
+	color: #2c3338;
+	padding: 0 3px 0 10px;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 20px;
+	border-radius: 4px;
+	height: 24px;
+}

plugins/woocommerce-admin/client/launch-your-store/use-launch-your-store.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+
+export const useLaunchYourStore = () => {
+	const {
+		isLoading,
+		launchStatus,
+		launchYourStoreEnabled,
+		comingSoon,
+		storePagesOnly,
+		privateLink,
+		shareKey,
+	} = useSelect( ( select ) => {
+		const { hasFinishedResolution, getOption } =
+			select( OPTIONS_STORE_NAME );
+
+		const allOptionResolutionsFinished =
+			! hasFinishedResolution( 'getOption', [ 'launch-status' ] ) &&
+			! hasFinishedResolution( 'getOption', [
+				'woocommerce_coming_soon',
+			] ) &&
+			! hasFinishedResolution( 'getOption', [
+				'woocommerce_store_pages_only',
+			] ) &&
+			! hasFinishedResolution( 'getOption', [
+				'woocommerce_private_link',
+			] ) &&
+			! hasFinishedResolution( 'getOption', [ 'woocommerce_share_key' ] );
+
+		return {
+			isLoading: allOptionResolutionsFinished,
+			launchStatus: getOption( 'launch-status' ),
+			comingSoon: getOption( 'woocommerce_coming_soon' ),
+			storePagesOnly: getOption( 'woocommerce_store_pages_only' ),
+			privateLink: getOption( 'woocommerce_private_link' ),
+			shareKey: getOption( 'woocommerce_share_key' ),
+			launchYourStoreEnabled:
+				window.wcAdminFeatures[ 'launch-your-store' ],
+		};
+	} );
+
+	return {
+		isLoading,
+		comingSoon,
+		storePagesOnly,
+		privateLink,
+		shareKey,
+		launchStatus,
+		launchYourStoreEnabled,
+	};
+};

plugins/woocommerce/changelog/45404-add-lys-status-pill

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Updates unreleased file structure for LYS
+