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 ( - - ); - } + if ( ! isLoading ) { + setComingSoon( initialComingSoon ); + setStorePagesOnly( initialStorePagesOnly ); + setPrivateLink( initialPrivateLink ); + } + }, [ 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 ( +
+
+
+ Coming soon + +
+
+
+ ); +}; 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 +