diff --git a/plugins/woocommerce-admin/client/header/index.js b/plugins/woocommerce-admin/client/header/index.js
index 55491485939..a0919f5261f 100644
--- a/plugins/woocommerce-admin/client/header/index.js
+++ b/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 (
{ activeSetupList && (
@@ -110,7 +118,11 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
/>
{ decodeEntities(
@@ -124,6 +136,10 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
) }
+ { showLaunchYourStoreStatus && (
+
+ ) }
+
diff --git a/plugins/woocommerce-admin/client/header/style.scss b/plugins/woocommerce-admin/client/header/style.scss
index 0c0701e655a..20571515053 100644
--- a/plugins/woocommerce-admin/client/header/style.scss
+++ b/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%;
}
}
diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js
index a180eedb3d3..7aeb7efa2e6 100644
--- a/plugins/woocommerce-admin/client/index.js
+++ b/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' );
diff --git a/plugins/woocommerce-admin/client/launch-your-store/index.js b/plugins/woocommerce-admin/client/launch-your-store/index.js
new file mode 100644
index 00000000000..fa2bc2600a2
--- /dev/null
+++ b/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';
diff --git a/plugins/woocommerce-admin/client/launch-your-store/settings-slotfill.js b/plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js
similarity index 68%
rename from plugins/woocommerce-admin/client/launch-your-store/settings-slotfill.js
rename to plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js
index 1ba33ebf66a..476d34408ed 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/settings-slotfill.js
+++ b/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 (
-
{
- 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 (
-
+
);
};
diff --git a/plugins/woocommerce-admin/client/launch-your-store/style.scss b/plugins/woocommerce-admin/client/launch-your-store/settings/style.scss
similarity index 100%
rename from plugins/woocommerce-admin/client/launch-your-store/style.scss
rename to plugins/woocommerce-admin/client/launch-your-store/settings/style.scss
diff --git a/plugins/woocommerce-admin/client/launch-your-store/status/index.js b/plugins/woocommerce-admin/client/launch-your-store/status/index.js
new file mode 100644
index 00000000000..e6212387ba0
--- /dev/null
+++ b/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 (
+
+ );
+};
diff --git a/plugins/woocommerce-admin/client/launch-your-store/status/style.scss b/plugins/woocommerce-admin/client/launch-your-store/status/style.scss
new file mode 100644
index 00000000000..d0609b37956
--- /dev/null
+++ b/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;
+}
diff --git a/plugins/woocommerce-admin/client/launch-your-store/use-launch-your-store.js b/plugins/woocommerce-admin/client/launch-your-store/use-launch-your-store.js
new file mode 100644
index 00000000000..44330653237
--- /dev/null
+++ b/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,
+ };
+};
diff --git a/plugins/woocommerce/changelog/45404-add-lys-status-pill b/plugins/woocommerce/changelog/45404-add-lys-status-pill
new file mode 100644
index 00000000000..eb339b7b740
--- /dev/null
+++ b/plugins/woocommerce/changelog/45404-add-lys-status-pill
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Updates unreleased file structure for LYS
+