Launch Your Store: Add useLaunchYourStore helper method (#45404)
This commit is contained in:
parent
1ad84aa6fe
commit
e16a644e86
|
@ -21,6 +21,10 @@ import { Text, useSlot } from '@woocommerce/experimental';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import useIsScrolled from '../hooks/useIsScrolled';
|
import useIsScrolled from '../hooks/useIsScrolled';
|
||||||
import { TasksReminderBar, useActiveSetupTasklist } from '../task-lists';
|
import { TasksReminderBar, useActiveSetupTasklist } from '../task-lists';
|
||||||
|
import {
|
||||||
|
LaunchYourStoreStatus,
|
||||||
|
useLaunchYourStore,
|
||||||
|
} from '../launch-your-store';
|
||||||
|
|
||||||
export const PAGE_TITLE_FILTER = 'woocommerce_admin_header_page_title';
|
export const PAGE_TITLE_FILTER = 'woocommerce_admin_header_page_title';
|
||||||
|
|
||||||
|
@ -96,6 +100,10 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
|
||||||
}
|
}
|
||||||
}, [ isEmbedded, sections, siteTitle ] );
|
}, [ isEmbedded, sections, siteTitle ] );
|
||||||
|
|
||||||
|
const { isLoading, launchStatus, launchYourStoreEnabled } =
|
||||||
|
useLaunchYourStore();
|
||||||
|
const showLaunchYourStoreStatus = launchYourStoreEnabled && ! isLoading;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={ className } ref={ headerElement }>
|
<div className={ className } ref={ headerElement }>
|
||||||
{ activeSetupList && (
|
{ activeSetupList && (
|
||||||
|
@ -110,7 +118,11 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Text
|
<Text
|
||||||
className={ `woocommerce-layout__header-heading` }
|
className={ `woocommerce-layout__header-heading ${
|
||||||
|
showLaunchYourStoreStatus
|
||||||
|
? ''
|
||||||
|
: 'woocommerce-layout__header-left-align'
|
||||||
|
}` }
|
||||||
as="h1"
|
as="h1"
|
||||||
>
|
>
|
||||||
{ decodeEntities(
|
{ decodeEntities(
|
||||||
|
@ -124,6 +136,10 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
|
||||||
) }
|
) }
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
|
{ showLaunchYourStoreStatus && (
|
||||||
|
<LaunchYourStoreStatus status={ launchStatus } />
|
||||||
|
) }
|
||||||
|
|
||||||
<WooHeaderItem.Slot fillProps={ { isEmbedded, query } } />
|
<WooHeaderItem.Slot fillProps={ { isEmbedded, query } } />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,11 +38,14 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 0 0 $fallback-gutter-large;
|
padding: 0 0 0 $fallback-gutter-large;
|
||||||
padding: 0 0 0 $gutter-large;
|
padding: 0 0 0 $gutter-large;
|
||||||
flex: 1 auto;
|
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
background: $studio-white;
|
background: $studio-white;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
&.woocommerce-layout__header-left-align {
|
||||||
|
flex: 1 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -21,7 +21,7 @@ import { deriveWpAdminBackgroundColours } from './utils/derive-wp-admin-backgrou
|
||||||
import { possiblyRenderSettingsSlots } from './settings/settings-slots';
|
import { possiblyRenderSettingsSlots } from './settings/settings-slots';
|
||||||
import { registerTaxSettingsConflictErrorFill } from './settings/conflict-error-slotfill';
|
import { registerTaxSettingsConflictErrorFill } from './settings/conflict-error-slotfill';
|
||||||
import { registerPaymentsSettingsBannerFill } from './payments/payments-settings-banner-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 appRoot = document.getElementById( 'root' );
|
||||||
const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
|
const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
export { LaunchYourStoreStatus } from './status';
|
||||||
|
export { useLaunchYourStore } from './use-launch-your-store';
|
||||||
|
export { registerSiteVisibilitySlotFill } from './settings/slotfill';
|
|
@ -9,58 +9,42 @@ import {
|
||||||
import { useState, useEffect } from '@wordpress/element';
|
import { useState, useEffect } from '@wordpress/element';
|
||||||
import { registerPlugin } from '@wordpress/plugins';
|
import { registerPlugin } from '@wordpress/plugins';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|
||||||
import { withSelect } from '@wordpress/data';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { compose } from '@wordpress/compose';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* 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';
|
import './style.scss';
|
||||||
|
|
||||||
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
|
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
|
||||||
|
|
||||||
const SiteVisibility = ( {
|
const SiteVisibility = () => {
|
||||||
woocommerce_coming_soon,
|
const {
|
||||||
woocommerce_store_pages_only,
|
|
||||||
woocommerce_private_link,
|
|
||||||
isLoading,
|
isLoading,
|
||||||
placeholder = false,
|
comingSoon: initialComingSoon = false,
|
||||||
} ) => {
|
storePagesOnly: initialStorePagesOnly = false,
|
||||||
const [ comingSoon, setComingSoon ] = useState( woocommerce_coming_soon );
|
privateLink: initialPrivateLink = false,
|
||||||
|
} = useLaunchYourStore();
|
||||||
|
const [ comingSoon, setComingSoon ] = useState( initialComingSoon );
|
||||||
const [ storePagesOnly, setStorePagesOnly ] = useState(
|
const [ storePagesOnly, setStorePagesOnly ] = useState(
|
||||||
woocommerce_store_pages_only
|
initialStorePagesOnly
|
||||||
);
|
|
||||||
const [ privateLink, setPrivateLink ] = useState(
|
|
||||||
woocommerce_private_link
|
|
||||||
);
|
);
|
||||||
|
const [ privateLink, setPrivateLink ] = useState( initialPrivateLink );
|
||||||
|
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
setComingSoon( woocommerce_coming_soon );
|
if ( ! isLoading ) {
|
||||||
setStorePagesOnly( woocommerce_store_pages_only );
|
setComingSoon( initialComingSoon );
|
||||||
setPrivateLink( woocommerce_private_link );
|
setStorePagesOnly( initialStorePagesOnly );
|
||||||
}, [
|
setPrivateLink( initialPrivateLink );
|
||||||
woocommerce_coming_soon,
|
|
||||||
woocommerce_store_pages_only,
|
|
||||||
woocommerce_private_link,
|
|
||||||
] );
|
|
||||||
|
|
||||||
if ( isLoading ) {
|
|
||||||
return (
|
|
||||||
<SiteVisibility
|
|
||||||
woocommerce_lys_setting_coming_soon={ 'yes' }
|
|
||||||
isLoading={ false }
|
|
||||||
placeholder={ true }
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
}, [ isLoading ] );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={ classNames( 'site-visibility-settings-slotfill', {
|
className={ classNames( 'site-visibility-settings-slotfill', {
|
||||||
placeholder,
|
placeholder: isLoading,
|
||||||
} ) }
|
} ) }
|
||||||
>
|
>
|
||||||
<input
|
<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 = () => {
|
const SiteVisibilitySlotFill = () => {
|
||||||
return (
|
return (
|
||||||
<Fill>
|
<Fill>
|
||||||
<SiteVisibilityComponent />
|
<SiteVisibility />
|
||||||
</Fill>
|
</Fill>
|
||||||
);
|
);
|
||||||
};
|
};
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
|
@ -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;
|
||||||
|
}
|
|
@ -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,
|
||||||
|
};
|
||||||
|
};
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: update
|
||||||
|
Comment: Updates unreleased file structure for LYS
|
||||||
|
|
Loading…
Reference in New Issue