LYS: Add coming soon page editor links (#46100)
* Add 'woocommerce_coming_soon_page_id' option to API options * Add useComingSoonEditorLink hook to handle the coming soon editor link * Add useComingSoonEditorLink hook and update styles * Add changelog * Move use-launch-your-store.js to ./hooks and update import path
This commit is contained in:
parent
4c3d6ffa6b
commit
3f601b3f45
|
@ -0,0 +1,28 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { useSelect } from '@wordpress/data';
|
||||||
|
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||||||
|
import { getAdminLink } from '@woocommerce/settings';
|
||||||
|
|
||||||
|
const COMMING_SOON_PAGE_ID_OPTION = 'woocommerce_coming_soon_page_id';
|
||||||
|
|
||||||
|
export const useComingSoonEditorLink = () => {
|
||||||
|
return useSelect( ( select ) => {
|
||||||
|
const { getOption, hasFinishedResolution } =
|
||||||
|
select( OPTIONS_STORE_NAME );
|
||||||
|
|
||||||
|
const isLoading = ! hasFinishedResolution( 'getOption', [
|
||||||
|
COMMING_SOON_PAGE_ID_OPTION,
|
||||||
|
] );
|
||||||
|
const pageID = getOption( COMMING_SOON_PAGE_ID_OPTION );
|
||||||
|
|
||||||
|
const pageLink =
|
||||||
|
isLoading || ! pageID
|
||||||
|
? // Fallback to the pages list if the page ID is not set yet.
|
||||||
|
getAdminLink( 'edit.php?post_type=page' )
|
||||||
|
: getAdminLink( `post.php?post=${ pageID }&action=edit` );
|
||||||
|
|
||||||
|
return [ pageLink, isLoading ];
|
||||||
|
}, [] );
|
||||||
|
};
|
|
@ -2,5 +2,5 @@
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
export { LaunchYourStoreStatus } from './status';
|
export { LaunchYourStoreStatus } from './status';
|
||||||
export { useLaunchYourStore } from './use-launch-your-store';
|
export { useLaunchYourStore } from './hooks/use-launch-your-store';
|
||||||
export { registerSiteVisibilitySlotFill } from './settings/slotfill';
|
export { registerSiteVisibilitySlotFill } from './settings/slotfill';
|
||||||
|
|
|
@ -7,7 +7,11 @@ import {
|
||||||
RadioControl,
|
RadioControl,
|
||||||
Button,
|
Button,
|
||||||
} from '@wordpress/components';
|
} from '@wordpress/components';
|
||||||
import { useState } from '@wordpress/element';
|
import {
|
||||||
|
useState,
|
||||||
|
createInterpolateElement,
|
||||||
|
createElement,
|
||||||
|
} from '@wordpress/element';
|
||||||
import { registerPlugin } from '@wordpress/plugins';
|
import { registerPlugin } from '@wordpress/plugins';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -18,6 +22,7 @@ import { recordEvent } from '@woocommerce/tracks';
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { SETTINGS_SLOT_FILL_CONSTANT } from '../../settings/settings-slots';
|
import { SETTINGS_SLOT_FILL_CONSTANT } from '../../settings/settings-slots';
|
||||||
|
import { useComingSoonEditorLink } from '../hooks/use-coming-soon-editor-link';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
|
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
|
||||||
|
@ -43,6 +48,7 @@ const SiteVisibility = () => {
|
||||||
const copyLink = __( 'Copy link', 'woocommerce' );
|
const copyLink = __( 'Copy link', 'woocommerce' );
|
||||||
const copied = __( 'Copied!', 'woocommerce' );
|
const copied = __( 'Copied!', 'woocommerce' );
|
||||||
const [ copyLinkText, setCopyLinkText ] = useState( copyLink );
|
const [ copyLinkText, setCopyLinkText ] = useState( copyLink );
|
||||||
|
const [ commingSoonPageLink ] = useComingSoonEditorLink();
|
||||||
|
|
||||||
const getPrivateLink = () => {
|
const getPrivateLink = () => {
|
||||||
if ( storePagesOnly === 'yes' ) {
|
if ( storePagesOnly === 'yes' ) {
|
||||||
|
@ -105,9 +111,16 @@ const SiteVisibility = () => {
|
||||||
selected={ comingSoon }
|
selected={ comingSoon }
|
||||||
/>
|
/>
|
||||||
<p className="site-visibility-settings-slotfill-section-description">
|
<p className="site-visibility-settings-slotfill-section-description">
|
||||||
{ __(
|
{ createInterpolateElement(
|
||||||
'Your site is hidden from visitors behind a “Coming soon” landing page until it’s ready for viewing. You can customize your “Coming soon” landing page via the Editor.',
|
__(
|
||||||
|
'Your site is hidden from visitors behind a “Coming soon” landing page until it’s ready for viewing. You can customize your “Coming soon” landing page via the <a>Editor</a>.',
|
||||||
'woocommerce'
|
'woocommerce'
|
||||||
|
),
|
||||||
|
{
|
||||||
|
a: createElement( 'a', {
|
||||||
|
href: commingSoonPageLink,
|
||||||
|
} ),
|
||||||
|
}
|
||||||
) }
|
) }
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -8,6 +8,10 @@
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.site-visibility-settings-slotfill-private-link {
|
.site-visibility-settings-slotfill-private-link {
|
||||||
margin-left: 73px;
|
margin-left: 73px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { Icon, moreVertical, edit, cog } from '@wordpress/icons';
|
import { Icon, moreVertical, edit, cog } from '@wordpress/icons';
|
||||||
import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
|
import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
|
||||||
import { getNewPath } from '@woocommerce/navigation';
|
|
||||||
import { getAdminLink } from '@woocommerce/settings';
|
import { getAdminLink } from '@woocommerce/settings';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
|
@ -12,6 +11,7 @@ import classnames from 'classnames';
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
import { useComingSoonEditorLink } from '../hooks/use-coming-soon-editor-link';
|
||||||
|
|
||||||
export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
|
export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
|
||||||
const isComingSoon = comingSoon && comingSoon === 'yes';
|
const isComingSoon = comingSoon && comingSoon === 'yes';
|
||||||
|
@ -22,9 +22,8 @@ export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
|
||||||
: __( 'Site coming soon', 'woocommerce' );
|
: __( 'Site coming soon', 'woocommerce' );
|
||||||
const liveText = __( 'Live', 'woocommerce' );
|
const liveText = __( 'Live', 'woocommerce' );
|
||||||
const dropdownText = isComingSoon ? comingSoonText : liveText;
|
const dropdownText = isComingSoon ? comingSoonText : liveText;
|
||||||
const launchYourStoreLink = new URL(
|
const [ commingSoonPageLink ] = useComingSoonEditorLink();
|
||||||
getAdminLink( getNewPath( {}, '/launch-your-store', {} ) )
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<div className="woocommerce-lys-status">
|
<div className="woocommerce-lys-status">
|
||||||
<div className="woocommerce-lys-status-pill-wrapper">
|
<div className="woocommerce-lys-status-pill-wrapper">
|
||||||
|
@ -60,7 +59,7 @@ export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
|
||||||
) }
|
) }
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{ isComingSoon && (
|
{ isComingSoon && (
|
||||||
<MenuItem href={ launchYourStoreLink.href }>
|
<MenuItem href={ commingSoonPageLink }>
|
||||||
<Icon icon={ edit } size={ 24 } />
|
<Icon icon={ edit } size={ 24 } />
|
||||||
{ __(
|
{ __(
|
||||||
'Customize "Coming soon" page',
|
'Customize "Coming soon" page',
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: add
|
||||||
|
|
||||||
|
Add coming soon page editor links
|
|
@ -225,6 +225,7 @@ class Options extends \WC_REST_Data_Controller {
|
||||||
'woocommerce_private_link',
|
'woocommerce_private_link',
|
||||||
'woocommerce_share_key',
|
'woocommerce_share_key',
|
||||||
'launch-status',
|
'launch-status',
|
||||||
|
'woocommerce_coming_soon_page_id',
|
||||||
// WC Test helper options.
|
// WC Test helper options.
|
||||||
'wc-admin-test-helper-rest-api-filters',
|
'wc-admin-test-helper-rest-api-filters',
|
||||||
'wc_admin_helper_feature_values',
|
'wc_admin_helper_feature_values',
|
||||||
|
|
Loading…
Reference in New Issue